How to pass variables from a list - flutter

Question

I have created a class containing a single button with certain parameters. In the future I want to make an array of buttons containing random parameters
class _ButtonWidget extends StatelessWidget {
_ButtonWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
width: 200,
height: 200,
child: ElevatedButton
(onPressed: (() {
}),
child: Text('PRESS',
style: TextStyle(color: Colors.white),),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.black),
overlayColor: MaterialStateProperty.all(Colors.green),
shape: MaterialStateProperty.all<RoundedRectangleBorder>( RoundedRectangleBorder(
borderRadius: BorderRadius.circular(300.0),
side: BorderSide(color: Colors.blue, width: 3),
),
),
),
),
),
);
}
}
I also have a list in which I want to set parameters such as color and radius randomly in the future.
class StyleButton {
final backgroundColor;
final overlayColor;
final int borderRadius;
final borderSideColor;
StyleButton({
required this.backgroundColor, required this.overlayColor, required this.borderRadius, required this.borderSideColor,
});
}
class StyleButtonWidget extends StatefulWidget {
StyleButtonWidget({Key? key}) : super(key: key);
#override
State<StyleButtonWidget> createState() => _StyleButtonWidgetState();
}
class _StyleButtonWidgetState extends State<StyleButtonWidget> {
final _movies = [
StyleButton(
backgroundColor: Colors.black,
overlayColor: Colors.green,
borderRadius: 300,
borderSideColor: Colors.blue,
),
];
#override
Widget build(BuildContext context) {
// TODO: implement build
throw UnimplementedError();
}
}
How do I pass variables from my list
final _movies = [
StyleButton(
backgroundColor: Colors.black,
overlayColor: Colors.green,
borderRadius: 300,
borderSideColor: Colors.blue,
),
in the button parameters ?
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.black),
overlayColor: MaterialStateProperty.all(Colors.green),
shape: MaterialStateProperty.all<RoundedRectangleBorder>( RoundedRectangleBorder(
borderRadius: BorderRadius.circular(300.0),
side: BorderSide(color: Colors.blue, width: 3),
),

Answer 1

Try like this.
Alter your ButtonWidget to accept a StyleButtonParam.
class ButtonWidget extends StatelessWidget {
const ButtonWidget({Key? key, required this.buttonStyle}) : super(key: key);
final StyleButton buttonStyle;
#override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
width: 200,
height: 200,
child: ElevatedButton(
onPressed: (() {}),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(buttonStyle.backgroundColor),
overlayColor: MaterialStateProperty.all(buttonStyle.overlayColor),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(buttonStyle.borderRadius.toDouble()),
side: BorderSide(color: buttonStyle.borderSideColor, width: 3),
),
),
),
child: const Text(
'PRESS',
style: TextStyle(color: Colors.white),
),
),
),
);
}
}
Access the Button widget like this.
class StyleButtonWidget extends StatefulWidget {
const StyleButtonWidget({Key? key}) : super(key: key);
#override
State<StyleButtonWidget> createState() => _StyleButtonWidgetState();
}
class _StyleButtonWidgetState extends State<StyleButtonWidget> {
List<Widget> buttons = [];
final List<StyleButton> _movies = [
StyleButton(
backgroundColor: Colors.black,
overlayColor: Colors.green,
borderRadius: 300,
borderSideColor: Colors.blue,
),
];
buildButton() {
_movies.forEach((element) {
buttons.add(ButtonWidget(buttonStyle: element));
});
setState((){});
}
#override
Widget build(BuildContext context) {
// TODO: implement build
throw UnimplementedError();
}
}
Note: Add-on change method for the button may be by wrapping with Gesture detector and function parameter. And add it while accessing the widget.

Answer 2

final _movies = [
StyleButton(
backgroundColor: Colors.black,
overlayColor: Colors.green,
borderRadius: 300,
borderSideColor: Colors.blue,
),
From the following list, you can access any variable with index
_movies[0].backgroundColor
If you want to make it dynamic, use a for-loop
for(var i = 0; i < _movies > length; i++)
_movies[i].backgroundColor;