creating dynamic style elevated button widget

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?

Solution

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

Result:

Using styleFrom:

CustomElevatedButton(
        btnLabel: 'Submit',
        onBtnPressed: () {
          print('Button Pressed');
        },
        backgroundColor: Colors.green,
      ),

Result:

Full Code:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 50,
            width: 200,
            child: CustomElevatedButton(
              buttonName: 'Submit',
              onPressed: () {
                print('Button Pressed');
              },
              buttonStyle: ButtonStyle(
                foregroundColor: WidgetStateProperty.all(Colors.white),
                backgroundColor: WidgetStateProperty.all(Colors.green),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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