Handling onPress from model generated buttons - flutter

Question

I've got a model which I simplify for the purpose of this question
MyModel(a:0, b:0, c:0) //a b c are integers
Now I need to generate buttons from this model so I've created a new class which takes that model as a parameter and generates buttons
class Panel extends StatelessWidget {
final MyModel model;
const Panel({this.model});
List<Widget> _buildContent() {
final list = [
{'a': model.a},
{'b': model.b},
{'c': model.c}
];
List<Widget> l = [];
list.forEach((element) {
l.add(FlatButton(child: Text(element.keys.first), onPressed: () {}));
});
return l;
}
#override
Widget build(BuildContext context) {
return Container(
height: 70,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _buildContent(),
));
}
}
and in my main class, I'm just calling it like this
Panel(model: myModel);
I'm trying to find the neatest way to handle presses of these buttons, each button should update its element at +1 on each press and send the updated model back to the main class

Answer 1

You need for your Panel to provide a callback when the model changes. Then you can change the model used in your application. Note the "onChange" callback added to the Panel that in the App calls setState to actually change the model.
Example:
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class Model {
final int a;
final int b;
final int c;
const Model({this.a, this.b, this.c});
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
Model model = Model(a: 1, b: 2, c: 3);
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: Text('Current Model: a:${model.a}, b:${model.b}, c: ${model.c}')),
body: Center(
child: Panel(
model: model,
onChange: (changedModel) => setState(() => model = changedModel)),
),
),
);
}
}
class PanelButton {
final String text;
final Model Function() onClick;
const PanelButton(this.text, this.onClick);
}
class Panel extends StatelessWidget {
final Model model;
final void Function(Model) onChange;
const Panel({#required this.model, this.onChange});
List<Widget> _buildContent() {
final list = [
PanelButton('a', () => Model(a: model.a + 1, b: model.b, c: model.c)),
PanelButton('b', () => Model(a: model.a, b: model.b + 1, c: model.c)),
PanelButton('c', () => Model(a: model.a, b: model.b, c: model.c + 1)),
];
return list
.map((x) => FlatButton(
child: Text(x.text), onPressed: () => _raiseOnChange(x.onClick())))
.toList();
}
void _raiseOnChange(Model model) {
if (onChange != null) {
onChange(model);
}
}
#override
Widget build(BuildContext context) {
return Container(
height: 70,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _buildContent(),
));
}
}

Answer 2

As far as my knowledge is concerned, what you can do is the following:
Rather than following model thing, you can make a Global Variable, which has a dictionary/hasmap. Make a file named as globals.dart and do this
/*
This is the primary util for maintaining
all the Global values/variables
*/
library globals;
//This is your variable
Map<String, dynamic> mydata = {'a':0, 'b':0, 'c':0};
Now, you can access global value anywhere in any file, by just importing the globals.dart file like import '{path}/globals.dart'
Now in your Panel, we can access it, and do the increment of the item as per your will
import '{path}/globals.dart' as globals
class Panel extends StatelessWidget {
List<Widget> _buildContent() {
List<Widget> l = [];
// No list declaration, direct items access
globals.mydata.forEach((key, value) {
l.add(
FlatButton(
child: Text(key),
onPressed: (key) {
//on pressed you just increment when it is hit for the key elem
globals.mydata[key] += 1;
}
));
});
return l;
}
#override
Widget build(BuildContext context) {
return Container(
height: 70,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: _buildContent(),
));
}
}
Final step, now when you hit on the button, you get updated HasMap, which is globally accessible, so you can call the Panel(), no params required. And when you want to check the updated value just print it
import '{path}/globals.dart' as globals
Panel()
// This will give out the updated data if the button is hit else {'a': 0, 'b': 0, 'c': 0}
print(globals.mydata)
This is the cleanest way I can think for you in this case. I hope that would work out for you as well :) Let me know, I would be happy if that will work out :)