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


## この記事の対象

Flutter初心者

自分

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

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

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


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/375bfc3f-a677-370d-c7e2-354e0fb67cad.jpeg" alt="スクリーンショット 2020-10-03 17.30.30.jpg" width="300">
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/f50c672b-a949-c4f7-03f1-ee23860955c6.jpeg" alt="スクリーンショット 2020-10-03 17.30.09" width="300">

## 前提知識の確認

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



## 1.クラスを用意する

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

```Dart
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()`の中に描かれる関数を書くことでわかりやすくしています。

```Dart
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型の変数を定義できます。

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

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

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

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

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

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

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

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

完成！





## ソースコード

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

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