【Flutter】buildが終わった直後に処理を実行する（After Layout）

Flutter初心者がアプリ開発学習で挫折しないために、WidgetやDartの文法についての記事を毎朝7時に更新しています。
Flutterのオンライン講座のリンクも載せていますので、ぜひそちらもご覧ください。

プログラミングで副業！アプリ開発学習 | ONthe UMEDA

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,
     ),
   );
 }
}