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