【 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)
ディスカッション
コメント一覧
まだ、コメントがありません