flutter: Is there a way to reuse a widget? - flutter

Question

I have two widgets which are basically the same, except their color. They are list tile in list view builder. There is a checking to show in grey or red. The only property to be changed is color. I know that there is copyWith() function, but it seems that cannot be used in this case.
How can I reuse the below widget?
Widget listTile = Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 8.0, 0),
child: ListTile(
title: Text(
message.title),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(message.name),
Row(
children: <Widget>[
Icon(
Icons.alarm_on,
color: Colors.redAccent,
size: 16,
),
Text(message.time),
],
)
],
),
),
),
),
);

Answer 1

Make a function which takes the color as a parameter..and return your widget from that function..
Something like this..
customWidget( Color color){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 8.0, 0),
child: ListTile(
title: Text(
message.title),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(message.name),
Row(
children: <Widget>[
Icon(
Icons.alarm_on,
//color: Colors.redAccent,
color: color,
size: 16,
),
Text(message.time),
],
)
],
),
),
),
),
);
}
And whenever you want to use it..do it this way..
customWidget(Colors.red)
Hope it solves your issue..feel free to ask for clarifications :)

Answer 2

Instead of making it a variable, you can make it a method and then pass the color parameter to it.
Widget buildWidget(Color color) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
color: color, // Use your color parameter here
borderRadius: BorderRadius.circular(12),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 8.0, 0),
child: ListTile(
title: Text(
message.title),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(message.name),
Row(
children: <Widget>[
Icon(
Icons.alarm_on,
color: Colors.redAccent,
size: 16,
),
Text(message.time),
],
)
],
),
),
),
),
);
}
You can also pass along the message object you are using as a parameter to the function
So your ListView.builder will look like:
ListView.builder(
..., // other properties
itemBuilder: (context, index) => buildWidget(/*Your params here*/),
),