【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part110 その他

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part110 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part109 その他

引き続き、その他について学びます。

ValueListenableBuilderウィジェット

ValueListenableBuilderウィジェットをつかうとsetState()を使うことなく状態の更新ができます。
これ、とてもすごいことだと思いますよ!

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyHomePage()));
}

class MyHomePage extends StatelessWidget {
  final number = new ValueNotifier(0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'テスト中!',
      theme: ThemeData(primarySwatch: Colors.blue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ValueListenableBuilder<int>(
          valueListenable: number,
          builder: (context, value, child) {
            return Center(
              child: ElevatedButton(
                onPressed: () {
                  number.value++;
                },
                child: MyWidget(number),
              ),
            );
          },
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final ValueListenable<int> number;

  MyWidget(this.number);

  @override
  Widget build(BuildContext context) {
    return new Text(number.value.toString());
  }
}

確かにsetState()を使用していませんね。

final number = new ValueNotifier(0);

が仕事している感じです。

最後に

このウィジェットについては本書の後半で説明があるそうです。
今日はここまで!

参考

【日本語版】【Flutter】Widget of the Week – #30 ValueListenableBuilder【要約】│アイマナ – ITを学ぼう (aimana-it.com)