Slackコミュニティに

無料で参加する

Flutterラボの

プレミアム会員になる

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

2020.09.30

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

プログラミングで副業!アプリ開発学習 | ONthe UMEDA 企業のファン獲得から個人の生活品質向上まで、ますます需要の高まる"アプリ"の開発を、ご自身のペースで学べる教材・学習サポー onthe.osaka

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とNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)