広告

Flutterラボの

プレミアム会員になる

【Flutter】ダイアログ(Dialog)をsetStateする方法

2020.09.24

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

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

まずは、ダイアログを表示してみます。

await showDialog(
 context: context,
 builder: (context) {
   return SimpleDialog(
     contentPadding: EdgeInsets.all(0.0),
     titlePadding: EdgeInsets.all(0.0),
     title: Container(
       height: 400,
       child: Scaffold(
         appBar: AppBar(
           title: Text('ダイアログ内でsetState', style: TextStyle(fontSize: 15.0),),
           centerTitle: true,
         ),
         body: Center(child: Text('$_counter', style: TextStyle(fontSize: 40.0),)),
         floatingActionButton: FloatingActionButton(
           child: Icon(Icons.add),
           onPressed: () {
             setState(() {
               _counter++;
             });
           },
         ),
       ),
     )
   );
 },
);

画像1

ダイアログは表示できましたが、プラスボタンを押しても数字が変わりません。
SimpleDialogクラスがStatelessWidgetであるため、setStateできていないようです。
StatelessWidgetをStatefulWidgetとして扱うためには、『StatefulBuilder』ウィジェットを使います。

await showDialog(
 context: context,
 builder: (context) {
   return StatefulBuilder(
     builder: (context, setState) {
       return SimpleDialog(
         contentPadding: EdgeInsets.all(0.0),
         titlePadding: EdgeInsets.all(0.0),
         title: Container(
           height: 400,
           child: Scaffold(
             appBar: AppBar(
               title: Text('ダイアログ内でsetState', style: TextStyle(fontSize: 15.0),),
               centerTitle: true,
             ),
             body: Center(child: Text('$_counter', style: TextStyle(fontSize: 40.0),)),
             floatingActionButton: FloatingActionButton(
               child: Icon(Icons.add),
               onPressed: () {
                 setState(() {
                   _counter++;
                 });
               },
             ),
           ),
         )
       );
     }
   );
 },
);

画像2

これで、ダイアログ内でもsetStateできて、数字が変わるようになりました。

最後にコード全文も貼っておくので、参考にしてみてください。

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> {

 int _counter = 0;

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('ダイアログ内でsetState'),
       centerTitle: true,
     ),
     floatingActionButton: FloatingActionButton(
       child: Icon(Icons.add),
       onPressed: () async {
         await showDialog(
           context: context,
           builder: (context) {
             return StatefulBuilder(
               builder: (context, setState) {
                 return SimpleDialog(
                   contentPadding: EdgeInsets.all(0.0),
                   titlePadding: EdgeInsets.all(0.0),
                   title: Container(
                     height: 400,
                     child: Scaffold(
                       appBar: AppBar(
                         title: Text('ダイアログ内でsetState', style: TextStyle(fontSize: 15.0),),
                         centerTitle: true,
                       ),
                       body: Center(child: Text('$_counter', style: TextStyle(fontSize: 40.0),)),
                       floatingActionButton: FloatingActionButton(
                         child: Icon(Icons.add),
                         onPressed: () {
                           setState(() {
                             _counter++;
                           });
                         },
                       ),
                     ),
                   )
                 );
               }
             );
           },
         );
       },
     ),
   );
 }

}


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