Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】buildが終わった直後に処理を実行する(After Layout)
2020.09.30
Flutter初心者がアプリ開発学習で挫折しないために、WidgetやDartの文法についての記事を毎朝7時に更新しています。
Flutterのオンライン講座のリンクも載せていますので、ぜひそちらもご覧ください。
pubspec.yaml を編集して、『after_layout』パッケージを取得します。
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.3
after_layout: ^1.0.7+2 #この行を追加
編集したら、『Pub get』でパッケージを取得しましょう。
次に with で super class (TopPage) にMixin (AfterLayoutMixin) を適用させておきます。
class _TopPageState extends State<TopPage> with AfterLayoutMixin<TopPage>
あとは、afterFirstLayoutメソッド内にbuild が終わった直後にしたい処理を記述すると、完了です。
@override
void afterFirstLayout(BuildContext context) {
print('build が終わった直後の処理');
}
コードの全文を載せておくので、参考になれば幸いです。
import 'package:after_layout/after_layout.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Hatchout',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: TopPage(),
);
}
}
class TopPage extends StatefulWidget {
@override
_TopPageState createState() => _TopPageState();
}
class _TopPageState extends State<TopPage> with AfterLayoutMixin<TopPage> {
@override
void afterFirstLayout(BuildContext context) {
print('build が終わった直後の処理');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('After Layout'),
centerTitle: true,
),
);
}
}
Flutterラボ
hatchoutschool
Flutter Daily
Flutterに関する記事を日々更新しています (223本)
【Dart】Stringからint, double, DateTimeに変換する
2020.09.14
【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18
【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01
【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13