Modularize the code block

[Kmtengo]

e-Mess/lib/main.dart

Lines 121 to 627 in bce0d3e

	Expanded(
	child: TabBarView(
	controller: _tabController,
	children: <Widget>[
	// Breakfast GridView/Tab
	Column(
	children: [
	Expanded(
	child: GridView.count(
	crossAxisCount: 3,
	mainAxisSpacing: 5.0,
	crossAxisSpacing: 5.0,
	children: <Widget>[
	TextButton(
	onPressed: () {},
	style: TextButton.styleFrom(
	padding: EdgeInsets
	.zero, // Set padding to zero
	),
	child: Card(
	child: Column(
	children: [
	SizedBox(
	height: 90.0,
	child: Padding(
	padding:
	const EdgeInsets.all(3.0),
	child: ClipRRect(
	borderRadius:
	BorderRadius.circular(
	15.0),
	child: Image.asset(
	'images/tea.png',
	height: 30.0,
	),
	),
	),
	),
	const Expanded(
	child: Row(
	mainAxisAlignment:
	MainAxisAlignment.start,
	children: [
	Padding(
	padding:
	EdgeInsets.fromLTRB(
	8.0,
	0.0,
	16.0,
	0.0),
	child: Text(
	'Tea',
	style: TextStyle(
	fontFamily:
	'DancingScript',
	fontWeight:
	FontWeight.w900,
	fontSize: 18.0,
	),
	),
	)
	],
	),
	),
	const Row(
	mainAxisAlignment:
	MainAxisAlignment.start,
	children: [
	Padding(
	padding:
	EdgeInsets.fromLTRB(8.0,
	0.0, 16.0, 0.0),
	child: Text(
	'Ksh. 15',
	style: TextStyle(
	fontFamily:
	'NunitoSans',
	color:
	Colors.deepOrange,
	fontWeight:
	FontWeight.bold,
	fontSize: 8.5),
	),
	)
	],
	)
	],
	),
	),
	),
	TextButton(
	onPressed: () {},
	style: TextButton.styleFrom(
	padding: EdgeInsets
	.zero, // Set padding to zero
	),
	child: Card(
	child: Column(
	children: [
	SizedBox(
	height: 90.0,
	child: Padding(
	padding:
	const EdgeInsets.all(3.0),
	child: ClipRRect(
	borderRadius:
	BorderRadius.circular(
	15.0),
	child: Image.asset(
	'images/bread1.jpg',
	height: 30.0),
	),
	),
	),
	const Expanded(
	child: Row(
	mainAxisAlignment:
	MainAxisAlignment.start,
	children: [
	Padding(
	padding:
	EdgeInsets.fromLTRB(
	8.0,
	0.0,
	16.0,
	0.0),
	child: Text(
	'Bread',
	style: TextStyle(
	fontFamily:
	'DancingScript',
	fontWeight:
	FontWeight.w900,
	fontSize: 18.0,
	),
	),
	)
	],
	),
	),
	const Row(
	mainAxisAlignment:
	MainAxisAlignment.start,
	children: [
	Padding(
	padding:
	EdgeInsets.fromLTRB(8.0,
	0.0, 16.0, 0.0),
	child: Text(
	'Ksh. 12',
	style: TextStyle(
	fontFamily:
	'NunitoSans',
	color:
	Colors.deepOrange,
	fontWeight:
	FontWeight.bold,
	fontSize: 8.5),
	),
	)
	],
	)
	],
	),
	),
	),
	TextButton(
	onPressed: () {},
	style: TextButton.styleFrom(
	padding: EdgeInsets
	.zero, // Set padding to zero
	),
	child: Card(
	child: Column(
	children: [
	SizedBox(
	height: 90.0,
	child: Padding(
	padding:
	const EdgeInsets.all(3.0),
	child: ClipRRect(
	borderRadius:
	BorderRadius.circular(
	15.0),
	child: Image.asset(
	'images/eggs.png',
	height: 30.0,
	),
	),
	),
	),
	const Expanded(
	child: Row(
	mainAxisAlignment:
	MainAxisAlignment.start,
	children: [
	Padding(
	padding:
	EdgeInsets.fromLTRB(
	8.0,
	0.0,
	16.0,
	0.0),
	child: Text(
	'Eggs',
	style: TextStyle(
	fontFamily:
	'DancingScript',
	fontWeight:
	FontWeight.w900,
	fontSize: 18.0,
	),
	),
	)
	],
	),
	),
	const Row(
	mainAxisAlignment:
	MainAxisAlignment.start,
	children: [
	Padding(
	padding:
	EdgeInsets.fromLTRB(8.0,
	0.0, 16.0, 0.0),
	child: Text(
	'Ksh. 20',
	style: TextStyle(
	fontFamily:
	'NunitoSans',
	color:
	Colors.deepOrange,
	fontWeight:
	FontWeight.bold,
	fontSize: 8.5),
	),
	)
	],
	)
	],
	),
	),
	),
	TextButton(
	onPressed: () {},
	style: TextButton.styleFrom(
	padding: EdgeInsets
	.zero, // Set padding to zero
	),
	child: Card(
	child: Column(
	children: [
	SizedBox(
	height: 90.0,
	child: Padding(
	padding:
	const EdgeInsets.all(3.0),
	child: ClipRRect(
	borderRadius:
	BorderRadius.circular(
	15.0),
	child: Image.asset(
	'images/mandazi.png',
	height: 30.0,
	),
	),
	),
	),
	const Expanded(
	child: Row(
	mainAxisAlignment:
	MainAxisAlignment.start,
	children: [
	Padding(
	padding:
	EdgeInsets.fromLTRB(
	8.0,
	0.0,
	16.0,
	0.0),
	child: Text(
	'Mandazi',
	style: TextStyle(
	fontFamily:
	'DancingScript',
	fontWeight:
	FontWeight.w900,
	fontSize: 18.0,
	),
	),
	)
	],
	),
	),
	const Row(
	mainAxisAlignment:
	MainAxisAlignment.start,
	children: [
	Padding(
	padding:
	EdgeInsets.fromLTRB(8.0,
	0.0, 16.0, 0.0),
	child: Text(
	'Ksh. 15',
	style: TextStyle(
	fontFamily:
	'NunitoSans',
	color:
	Colors.deepOrange,
	fontWeight:
	FontWeight.bold,
	fontSize: 8.5),
	),
	)
	],
	)
	],
	),
	),
	),
	TextButton(
	onPressed: () {},
	style: TextButton.styleFrom(
	padding: EdgeInsets
	.zero, // Set padding to zero
	),
	child: Card(
	child: Column(
	children: [
	SizedBox(
	height: 90.0,
	child: Padding(
	padding:
	const EdgeInsets.all(3.0),
	child: ClipRRect(
	borderRadius:
	BorderRadius.circular(
	15.0),
	child: Image.asset(
	'images/coffee.png',
	height: 30.0,
	),
	),
	),
	),
	const Expanded(
	child: Row(
	mainAxisAlignment:
	MainAxisAlignment.start,
	children: [
	Padding(
	padding:
	EdgeInsets.fromLTRB(
	8.0,
	0.0,
	16.0,
	0.0),
	child: Text(
	'Coffee',
	style: TextStyle(
	fontFamily:
	'DancingScript',
	fontWeight:
	FontWeight.w900,
	fontSize: 18.0,
	),
	),
	)
	],
	),
	),
	const Row(
	mainAxisAlignment:
	MainAxisAlignment.start,
	children: [
	Padding(
	padding:
	EdgeInsets.fromLTRB(8.0,
	0.0, 16.0, 0.0),
	child: Text(
	'Ksh. 25',
	style: TextStyle(
	fontFamily:
	'NunitoSans',
	color:
	Colors.deepOrange,
	fontWeight:
	FontWeight.bold,
	fontSize: 8.5),
	),
	)
	],
	)
	],
	),
	),
	),
	TextButton(
	onPressed: () {},
	style: TextButton.styleFrom(
	padding: EdgeInsets
	.zero, // Set padding to zero
	),
	child: Card(
	child: Column(
	children: [
	SizedBox(
	height: 90.0,
	child: Padding(
	padding:
	const EdgeInsets.all(3.0),
	child: ClipRRect(
	borderRadius:
	BorderRadius.circular(
	15.0),
	child: Image.asset(
	'images/toast.png',
	height: 30.0,
	),
	),
	),
	),
	const Expanded(
	child: Row(
	mainAxisAlignment:
	MainAxisAlignment.start,
	children: [
	Padding(
	padding:
	EdgeInsets.fromLTRB(
	8.0,
	0.0,
	16.0,
	0.0),
	child: Text(
	'Toast',
	style: TextStyle(
	fontFamily:
	'DancingScript',
	fontWeight:
	FontWeight.w900,
	fontSize: 18.0,
	),
	),
	)
	],
	),
	),
	const Row(
	mainAxisAlignment:
	MainAxisAlignment.start,
	children: [
	Padding(
	padding:
	EdgeInsets.fromLTRB(8.0,
	0.0, 16.0, 0.0),
	child: Text(
	'Ksh. 15',
	style: TextStyle(
	fontFamily:
	'NunitoSans',
	color:
	Colors.deepOrange,
	fontWeight:
	FontWeight.bold,
	fontSize: 8.5),
	),
	)
	],
	)
	],
	),
	),
	),
	],
	),
	),
	TextButton(
	onPressed: () {},
	child: ClipRRect(
	borderRadius: const BorderRadius.vertical(
	top: Radius.circular(15.0),
	bottom: Radius.circular(0.0)),
	child: Container(
	color: Colors.teal,
	height: 80.0,
	child: const Row(
	mainAxisAlignment:
	MainAxisAlignment.center,
	crossAxisAlignment:
	CrossAxisAlignment.center,
	children: <Widget>[
	Text(
	'Confirm Order',
	style: TextStyle(
	fontFamily: 'BungeeSpice',
	color: Colors.deepOrange,
	fontWeight: FontWeight.bold,
	fontSize: 25.0),
	)
	],
	),
	),
	),
	)
	],
	),

Modularize the code

Convert the referenced code into a universal class which will be called to create all the meal cards in the homepage as objects by supplying the card details which include the meal photo, meal name and meal price.

Note

Converting the code block into a class will modularize the codebase and reduce the lines of code while also simplifying documentation, implementation and debugging.