Flutter - creating dynamic style elevated button widget

nischalinn
July 22, 2024
89 views
3 votes
3 Answers

I am trying to create a dynamic elevated button widget.

class CustomeElevatedBtn extends StatelessWidget {
  const CustomeElevatedBtn(
      {required this.child_, required this.onPressed_, required this.style_});

  final Widget child_;
  final VoidCallback onPressed_;
  final ??? style_;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed_,
      child: child_,
      style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25),
          ),
          padding: EdgeInsets.symmetric(horizontal: 16),
          textStyle: TextStyle(fontSize: 14),
          backgroundColor: Colors.orangeAccent,
          foregroundColor: Colors.white),
    );
  }
}

I want to make the style widget dynamic, I mean ElevatedButton.styleFrom values to be dynamic but I am unable to do so. How can I do it?

Tags: dart flutter

Answers

Try to replace final ??? style_; with final ButtonStyle? style_;
Declare ButtonStyle as nullable and use like below

CustomeElevatedBtn(
  child_: Text('Custom Button'),
  onPressed_: () {
    // Button onPressed
  },
  style_: ButtonStyle(
    backgroundColor: Colors.orangeAccent,
    foregroundColor: Colors.white,
    padding: MaterialStateProperty.all(EdgeInsets.all(16)),
    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 14)),
    shape: MaterialStateProperty.all(RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(25),
    )),
  ),
),

Just replace ??? to ButtonStyle and use wherever you want like this:

class CustomElevatedButton extends StatelessWidget {
  const CustomElevatedButton(
      {super.key,
      required this.child_,
      required this.onPressed_,
      required this.style_});

  final Widget child_;
  final VoidCallback onPressed_;
  final ButtonStyle style_;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed_,
      child: child_,
      style: style_,
    );
  }
}

Try below code I have used it my big project. Refer ButtonStyle

Custom Button Class:

class CustomElevatedButton extends StatelessWidget {
  const CustomElevatedButton({
    super.key,
    required this.onPressed,
    required this.buttonStyle,
    this.buttonName = '',
  });

  final Function() onPressed;
  final ButtonStyle buttonStyle;
  final String buttonName;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(buttonName),
      style: buttonStyle,
    );
  }
}

Use any where in project

 CustomElevatedButton(
        buttonName: 'Submit',
        onPressed: () {
          print('Button Pressed');
        },
        buttonStyle: ButtonStyle(
          foregroundColor: WidgetStateProperty.all(Colors.white),
          backgroundColor: WidgetStateProperty.all(Colors.green),
        ),
      ),

If you want to using styleFrom then refer below code

class CustomElevatedButton extends StatelessWidget {
  final void Function() onBtnPressed;
  final String btnLabel;
  final Color? backgroundColor;
  final double? borderRadius;
  final EdgeInsetsGeometry? padding;
  final Color? borderSideColor;
  final AlignmentGeometry? alignment;
  final bool isDisable;

  const CustomElevatedButton({
    Key? key,
    required this.onBtnPressed,
    this.backgroundColor,
    required this.btnLabel,
    this.borderRadius,
    this.padding,
    this.borderSideColor,
    this.alignment,
    this.isDisable = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: isDisable ? null : onBtnPressed,
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(2)),
        backgroundColor: backgroundColor ?? Colors.red,
        shadowColor: Colors.transparent,
        minimumSize: Size(double.maxFinite, 6),
        padding: padding,
        alignment: alignment,
      ),
      child: Text(
        btnLabel,
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – creating dynamic style elevated button widget

Answers