0

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

こちらのコード を参考にしてFlutterでボタンをクリックすると色が変わる機能を作ろうとしています。

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

画像の説明をここに入力

画像の説明をここに入力

ソースコード

// 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('ボタン1'),
                    onPressed: () {                      
                      model.changeButtonColor1();
                    },
                    color: model.buttonColor1,
                  ),
                  RaisedButton(
                    child: Text('ボタン2'),
                    onPressed: () {                      
                      // クリックしても動かないmodel.changeButtonColorAddArgument(model.buttonColor2);
                    },
                    color: model.buttonColor2,
                  ),
                  RaisedButton(
                    child: Text('ボタン3'),
                    onPressed: () {
                     // クリックしても動かないmodel.changeButtonColorAddArgument(model.buttonColor3);
                    },
                    color: model.buttonColor3,
                  ),
                ],
              ),
            );
          }),
        ),
      ),
    );
  }
}
// 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();
    }
}

実施した手順とその結果

手順1

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

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

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

手順2

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

  • 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

5
  • 1
    「...の前後にprint(buttonColor)して色が変わっているか調べました」とあるのに、「状態管理(buttonColor2,3)の変数の色自体は変わっています」と結論づけてしまっているようです。print(buttonColor2), print(buttonColor3)は何を出力しますか?
    – OOPer
    2021年6月14日 20:48
  • 僕の認識では、changeButtonColorAddArgumentメソッドにあるbuttonColorは引数で、それをmain.dartファイルのボタン2やボタン3のonPressedでmodel.changeButtonColorAddArgument(model.buttonColor3);という感じに呼び出しているので、ボタン2をクリックするとprint(buttonColor2)が実行され、ボタン3をクリックするとprint(buttonColor3)が実行されます。結果は手順1のコンソールに書いてある通りの結果を出力します。 また「print(buttonColor)して色が変わっているか調べました」の部分は少し書き方がおかしかったので「print(buttonColor)して状態管理用の変数がどうなっているのか調べました」に変更します。ご指摘ありがとうございます。 2021年6月14日 21:09
  • 1
    「僕の認識では、...ボタン2をクリックするとprint(buttonColor2)が実行され、ボタン3をクリックするとprint(buttonColor3)が実行されます。」その認識がそもそもの誤りですね。
    – OOPer
    2021年6月14日 21:14
  • ブレークポイントでmodel.changeButtonColorAddArgument(model.buttonColor3)の行に置き、ボタン3をクリックしてみるとコンソールでは値が更新されているように見えましたが、ブレークポイント上ではおっしゃる通り認識が誤っていたのかbuttonColor3の値が変更されていませんでした。これをヒントに再度調査してみます。 2021年6月14日 22:02
  • 大前提となる誤認識を改めれば方法はいくらでもあると思います。無事に所望の動作が実現できた際には、自己回答(と、その「承認」)をお願いします。
    – OOPer
    2021年6月14日 22:39

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。