Flutter 条件によってWidgetを切り替える

この記事の対象

Flutter初心者

自分

この記事を読んでできるようになること

• 画像のようなボタンを押すことでWidgetが切り替わるような仕組み

• StatefulWidgetによるFlutterを動的に扱う仕組み

前提知識の確認

• StatefulWidgetを継承することで変数の変更などの動的な動きを実装できる。(ボタンを押すことによるカウントアップなど)
• StatefulWidget継承クラスでのプロパティ(変数)の値を変更する時は,変更するメソッドの中でsetState()の中に変更する処理を記述する。
• bool型の変数(testbool)は,testbool = !testboolで真偽地を反転することができる。

1.クラスを用意する

おなじみの呪文を唱えます。

import 'package:flutter/material.dart';
void main() {
  runApp(MyAppState());
}

class MyAppState extends StatefulWidget{
  @override
  MyApp createState() => MyApp();
}

class MyApp extends State<MyAppState>{
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("テスト変換")),
        body: Text("a"),
        ),
      );
  }
}

これで**"ああ"**と表示されるようなアプリにはなっていると思います。

よく見るものと違うと思った人がいるかもしれません。おそらく,StatelessWidget継承クラスがない点かもしれません。上のコードではState継承クラスにreturn MaterialAppをさせ,runApp()にはStatefulWidget継承クラスを入れています。

2.RaisedButtonを配置する

RaisedButtonを配置し,Textを指定します。

ボタンが押された時の動きをonPressed()で指定します。ここではWidget buildの上にonPressed()の中に描かれる関数を書くことでわかりやすくしています。

import 'package:flutter/material.dart';
void main() {
  runApp(MyAppState());
}

class MyAppState extends StatefulWidget{
  @override
  MyApp createState() => MyApp();
}

class MyApp extends State<MyAppState>{
  void _onPressedStart(){
    print("スタートボタンが押された");
  }
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("テスト変換")),
        body: Center(
          child: RaisedButton(
            child: Text("スタート"),
            onPressed: _onPressedStart
          ),
          ),
        ),
      );
  }
}

3.bool型の変数を作り,ボタンを押すことで反転できるようにする

先ほどonPressed()で実行される関数をWidget buildより上で作ったように変数を作ります。別にWidget buildより下で書いても問題ないのですが,読みにくいので僕はやりません。笑

bool switchBool = false;これでbool型の変数を定義できます。

 setState( () {switchBool != switchBool;}
    );

setState()の中で定義したswitchBoolを反転しています。

最後に,switchBoolが反転していることを確認します。

void _onPressedStart(){
    print("スタートボタンが押された${switchBool}");
    setState((){switchBool = !switchBool;});
  }

4.定義した変数によって表示されるWidgetを変化させる

if (条件) 条件を満たす時のみ配置するWidgetという方法を用います。今回は条件を満たさないelseの時別のWidgetを表示させるのでelse Widgetも追加します。

この時**,**を記述してしまうとうまくいかないと思われます。

 body: Center(
          child: Column(
            
          children: <Widget>[
            
            if (switchBool) RaisedButton(
            child: Text("スタート"),
            onPressed: _onPressedStart
            )
            else RaisedButton(
            child: Text("リセット"),
            onPressed: _onPressedStart
            )
            ],
          ),
          ),

完成！

ソースコード

DartPadで作ったのでガタガタです。

import 'package:flutter/material.dart';
void main() {
  runApp(MyAppState());
}

class MyAppState extends StatefulWidget{
  @override
  MyApp createState() => MyApp();
}

class MyApp extends State<MyAppState>{
  bool switchBool = false;
  void _onPressedStart(){
    print("スタートボタンが押された${switchBool}");
    setState((){switchBool = !switchBool;});
  }
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("テスト変換")),
        body: Center(
          child: Column(
            
          children: <Widget>[
            
            if (switchBool) RaisedButton(
            child: Text("スタート"),
            onPressed: _onPressedStart
            )
            else RaisedButton(
            child: Text("リセット"),
            onPressed: _onPressedStart
            )
            ],
          ),
          ),
        ),
      );
  }
}