How to reduce repetitive code for buttons in flutter? - flutter

Question

I have more than 10 buttons that I need to display in my flutter. Here's the sample code for my 2 repetitive buttons:
Padding(
padding: const EdgeInsets.all(8.0),
child: Material(
clipBehavior: Clip.antiAlias,
shape: const StadiumBorder(),
child: Ink(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.black,
Colors.grey,
Colors.white,
],
),
),
width: double.infinity,
height: 60,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => PrivacyRoute()),
);
},
child: ListTile(
leading: Icon(
Icons.menu_book,
color: Colors.white,
),
title: Text('Bahasa Melayu',
style: TextStyle(
color: Colors.white,
fontSize: 20,
)),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Material(
clipBehavior: Clip.antiAlias,
shape: const StadiumBorder(),
child: Ink(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.black,
Colors.grey,
Colors.white,
],
),
),
width: double.infinity,
height: 60,
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => PrivacyRoute()),
);
},
child: ListTile(
leading: Icon(
Icons.menu_book,
color: Colors.white,
),
title: Text('English',
style: TextStyle(
color: Colors.white,
fontSize: 20,
)),
),
),
),
),
),
The non-repetitive is only the colours of linear-gradient, onTap, icon and the text. Any idea how? I tried using the void function but was unable to achieve a usable function. Hope to get some insights from you guys.

Answer 1

Make it a StatelessWidget class
class MyButton extends StatelessWidget {
final VoidCallback onTap;
final List<Color> colors;
final Widget icon;
final String text;
const MyButton({
Key? key,
required this.onTap,
required this.colors,
required this.icon,
required this.text,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Material(
clipBehavior: Clip.antiAlias,
shape: const StadiumBorder(),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: colors,
),
),
width: double.infinity,
height: 60,
child: InkWell(
onTap: onTap,
child: ListTile(
leading: icon,
title: Text(text,
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
),
),
);
}
}
Now it's up to you if you want those parameters as required or you will have some defaults value in case they are null etc. (for example if you don't pass colors maybe have a cosnt list of colors to use in that case)