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

CodePudding user response：

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.

CodePudding user response：

  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;