anda harus membuat file CustomButtonWidget.dart dan copy codingan dibawah.

class CustomButton extends StatelessWidget {
  final double width;
  final Function() onPressed;
  final String title;
  final IconData icon;
  final bool isPrefixIconEnable;
  final bool isSuffixIconEnable;
  final Color contentColor;
  final Color backgroundColor;
  final bool isOutlinedBorderEnable;
  final bool isTitleExpanded;

  const CustomButton({
    super.key,
    required this.onPressed,
    required this.title,
    this.icon = FontAwesomeIcons.house,
    this.isPrefixIconEnable = false,
    this.isSuffixIconEnable = false,
    required this.contentColor,
    this.backgroundColor = Colors.transparent,
    this.isOutlinedBorderEnable = false,
    this.isTitleExpanded = false,
    required this.width,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: 40,
      child: TextButton(
        onPressed: onPressed,
        style: TextButton.styleFrom(
          backgroundColor: backgroundColor,
          shape: RoundedRectangleBorder(
            side: BorderSide(
              color: isOutlinedBorderEnable ? contentColor : Colors.transparent,
            ),
            borderRadius: BorderRadius.circular(8),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            isPrefixIconEnable
                ? Icon(
                    icon,
                    size: 16,
                    color: contentColor,
                  )
                : SizedBox(),
            SizedBox(
              width: isPrefixIconEnable ? 12 : 0,
            ),
            isTitleExpanded
                ? Expanded(
                    child: Text(
                      title,
                      style: TyphographyTheme.defaultButtonTextStyle.copyWith(
                        color: contentColor,
                      ),
                    ),
                  )
                : Text(
                    title,
                    style: TyphographyTheme.defaultButtonTextStyle.copyWith(
                      color: contentColor,
                    ),
                  ),
            SizedBox(
              width: isSuffixIconEnable ? 12 : 0,
            ),
            isSuffixIconEnable
                ? Icon(
                    FontAwesomeIcons.house,
                    size: 16,
                    color: contentColor,
                  )
                : SizedBox(),
          ],
        ),
      ),
    );
  }
}

Jika sudah membuat file dan memasukkan codingan ke dalam file yang sudah dibuat langkah selanjutnya kita akan melakukan contoh pemanggilan widget CustomButton yang sudah kita buat sebelumnya, berikut adalah contoh pemakaiannya .

1.Default custombutton

CustomButton( 
                onPressed: () {},
                title: 'Default button',
                contentColor: ColorTheme.blackColor,
                width: ScreenSize.getWidth(context) * .5,
              ),

2.Text button dengan icon

CustomButton(
                onPressed: () {},
                title: 'Text Button with icon',
                contentColor: ColorTheme.blackColor,
                width: ScreenSize.getWidth(context) * .8,
                isPrefixIconEnable: true,
                icon: FontAwesomeIcons.upload,
              ),

3.Outline button

CustomButton(
                onPressed: () {},
                title: 'Outline Button',
                contentColor: ColorTheme.blackColor,
                width: ScreenSize.getWidth(context) * .5,
                isOutlinedBorderEnable: true,
              ),

4.Outline button dengan icon

CustomButton(
                onPressed: () {},
                title: 'Outline Button with icon',
                contentColor: ColorTheme.blackColor,
                width: ScreenSize.getWidth(context) * .8,
                isOutlinedBorderEnable: true,
                isPrefixIconEnable: true,
                icon: FontAwesomeIcons.upload,
              ),

5.Filed button

CustomButton(
                onPressed: () {},
                title: 'Filed Button',
                contentColor: ColorTheme.backgroundPageColor,
                width: ScreenSize.getWidth(context) * .8,
                backgroundColor: ColorTheme.redColor,
              ),

6.Filed button dengan icon

CustomButton(
                onPressed: () {},
                title: 'Filed Button with icon',
                contentColor: ColorTheme.backgroundPageColor,
                width: ScreenSize.getWidth(context) * .8,
                isPrefixIconEnable: true,
                backgroundColor: ColorTheme.redColor,
                icon: FontAwesomeIcons.upload,
              ),