【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part121 コントローラークラス
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part121 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part120 コントローラークラス
引き続き、コントローラークラスについて学びます。
カスタムアニメーション
ScrollControllerクラス
ScrollController
クラスで実装してみます。
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyHomePage()));
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
ScrollController? _controller;
Animation<double>? _animation;
@override
void initState() {
super.initState();
_controller = ScrollController();
// コールバックを指定できます。
_controller!.addListener(() {
// 本書ではここは_scrollController.offsetとなっていますね・・・。
print(_controller!.offset);
});
}
@override
void dispose() {
// しっかり解放します!
_controller!.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'テスト中!',
theme: ThemeData(primarySwatch: Colors.blue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Stack(
children: <Widget>[
ListView.builder(
controller: _controller!,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Padding(
child: Text(
'$index',
style: TextStyle(fontSize: 22.0),
),
padding: EdgeInsets.all(20.0),
),
);
},
),
],
),
),
),
);
}
}
class AnimatedLogo extends AnimatedWidget {
AnimatedLogo({
Key? key,
Animation<double>? animation,
}) : super(key: key, listenable: animation!);
Animation<double> get animation => listenable as Animation<double>;
@override
Widget build(BuildContext context) {
// 本書では以下のように実装してありますがどうにも動作しません・・・。
// final Animation<double> animation = listenable;
return Center(
child: Container(
height: animation.value, width: animation.value,
// 何度も呼ばれる
child: const FlutterLogo(),
),
);
}
}
いい感じにコールバックの処理が動いています。
最後に
ようやくウィジェット編が終わりました!
たくさんのウィジェットがあり、場面に適したウィジェットを選択する必要がありそうです。
細やかなことをやっていきたい場面や既存のウィジェットで事足りる場面の見極めが大事ですね。
今日はここまで!
参考
Flutterでスクロールを検知し、ある位置までスクロールしたらWidgetを表示するには · Androg (kwmt27.net)
ディスカッション
コメント一覧
まだ、コメントがありません