

### やりたいこととできないこと

[こちらのコード](https://github.com/kboy-
silvergym/coriander/tree/01ee584236784c5e75e8fe99a66e1cb038bf5eb3/lib)
を参考にしてFlutterでボタンをクリックすると色が変わる機能を作ろうとしています。

ボタン１に関してはクリックするとchangeButtonColor1()メソッドが呼ばれ、ボタンの色が変わります。  
その後、ボタンの数を増やすことになりました。  
ボタン２とボタン３に関しては状態管理の変数(buttonColor1,buttonColor2,buttonColor3)を増やし、changeButtonColor2(),changeButtonColor3()と作っていくとコードの肥大化が止まらず今後ボタン４、ボタン５と増やしていくつもりなので、changeButtonColorAddArgumentというメソッドの引数に状態管理の変数を入れるようにしました。しかし、そうするとクリックしてもボタン2、ボタン３の色が変わりません。

[![画像の説明をここに入力](https://i.stack.imgur.com/0nsKx.jpg)](https://i.stack.imgur.com/0nsKx.jpg)

[![画像の説明をここに入力](https://i.stack.imgur.com/Gg2Ce.jpg)](https://i.stack.imgur.com/Gg2Ce.jpg)

### ソースコード

[code]

    // main.dart
    
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:provider/provider.dart';
    import 'main_model.dart';
    
    // ChangeNotifierを継承すると変更可能なデータを渡せる
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: ChangeNotifierProvider<MainModel>(
            create: (_) => MainModel(),
            child: Scaffold(
              appBar: AppBar(
                title: Text('ボタンの色を変えたい。'),
              ),
              body: Consumer<MainModel>(builder: (context, model, child)  {
                return Center(
                  child: Column(
                    children: [
                      // ignore: deprecated_member_use
                      RaisedButton(
                        child: Text('ボタン１'),
                        onPressed: () {                      
                          model.changeButtonColor1();
                        },
                        color: model.buttonColor1,
                      ),
                      RaisedButton(
                        child: Text('ボタン２'),
                        onPressed: () {                      
                          // クリックしても動かないmodel.changeButtonColorAddArgument(model.buttonColor2);
                        },
                        color: model.buttonColor2,
                      ),
                      RaisedButton(
                        child: Text('ボタン３'),
                        onPressed: () {
                         // クリックしても動かないmodel.changeButtonColorAddArgument(model.buttonColor3);
                        },
                        color: model.buttonColor3,
                      ),
                    ],
                  ),
                );
              }),
            ),
          ),
        );
      }
    }
    
[/code]

[code]

    // main_model.dart
    import 'package:flutter/material.dart';
    
    class MainModel extends ChangeNotifier {
      Color buttonColor1 = Colors.red;
      Color buttonColor2 = Colors.red;
      Color buttonColor3 = Colors.red;
      void changeButtonColor1(){
        // buttonColor = Colors.blue;
        // canChange = true;
        if (buttonColor1 == Colors.blue){
          buttonColor1 = Colors.red;
        } else if(buttonColor1 == Colors.red){
          buttonColor1 = Colors.blue;
        }
        notifyListeners();
      }
      void changeButtonColorAddArgument(Color buttonColor){
          if (buttonColor == Colors.blue){        
            buttonColor = Colors.red;
          } else if(buttonColor == Colors.red){
            print(buttonColor);
            buttonColor = Colors.blue;
            print(buttonColor);        
          }
          notifyListeners();
        }
    }
    
[/code]

### 実施した手順とその結果

**手順1**

changeButtonColorAddArgument()のbuttonColor =
Colors.blueの前後にprint(buttonColor)して状態管理用の変数がどうなっているのか調べました。  
コンソールの結果は以下になります。

[code]

    Performing hot reload...
    Syncing files to device iPhone 8...
    Reloaded 1 of 566 libraries in 522ms.
    flutter: MaterialColor(primary value: Color(0xfff44336))
    flutter: MaterialColor(primary value: Color(0xff2196f3))
    
[/code]

[f44336](https://encycolorpedia.jp/f44336)は赤、[2196f3](https://encycolorpedia.jp/2196f3)は青だったので、状態管理(buttonColor2,3)の変数の色自体は変わっていますが、それがUIに反映されていないことがわかります。

**手順2**

次に手順１を参考にして以下のキーワードで検索しました。

  * flutter provider UIが更新されない
  * flutter provider UI is not updated.
  * flutter provider 引数 動かない
  * flutter provider argument not working

しかし、これらの検索ワードからでは引数を追加することによって動作しなくなる理由を見つけることができませんでした。

この問題を解決するにあたって何かアドバイスがあればお願いします。

### 環境

flutter 2.30  
dart 2.14.0  
android studio 4.2.1  
provider ^5.0.0  
MacBook Air (M1, 2020) 16GB  
Big Sur 11.4


CC BY-SA 4.0
2021-06-14T16:24:05.810
77556
2021-06-15T00:22:18.907
2021-06-15T00:22:18.907
3060
36424
question
flutter dart
Flutter,Providerを使用してクリックするとボタンの背景色を変えたいが、状態管理用の変数を引数に入れて実行するとなぜか動作しない。