やりたいこととできないこと
こちらのコード を参考にして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
print(buttonColor2)
,print(buttonColor3)
は何を出力しますか?