In this post, I will show you how to make a cool UI design for a Food delivery app using Flutter so let's begin
main.dart
import 'package:flutter/material.dart';
import 'package:food_tuto/foodcard.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: FoodApp(),
);
}
}
class FoodApp extends StatefulWidget {
@override
_FoodAppState createState() => _FoodAppState();
}
class _FoodAppState extends State<FoodApp> {
//here i'm going to place a list of image url
List<String> imgUrl = [
"https://purepng.com/public/uploads/large/purepng.com-food-platefood-meat-plate-tasty-grill-breakfast-dinner-french-fries-launch-941524624270veqpm.png",
"https://toreys.net/wp-content/uploads/2019/06/steak-fries-400x209-reduced.png",
"https://pngimage.net/wp-content/uploads/2018/06/sizzler-png-4.png",
"https://pngimage.net/wp-content/uploads/2018/06/sizzler-png-3.png",
"https://pngimage.net/wp-content/uploads/2018/06/sizzler-png-2.png",
"https://pngimage.net/wp-content/uploads/2018/06/sizzler-png-8.png",
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFFCFCFC),
//let's start by the appbar
appBar: AppBar(
backgroundColor: Color(0xFFfcfcfc),
title: Text(
"Food App",
style: TextStyle(
color: Color(0xFFfc6a26),
),
),
centerTitle: true,
elevation: 0.0,
leading: IconButton(
onPressed: () {},
icon: Icon(
Icons.menu,
color: Colors.black,
),
),
actions: [
IconButton(
icon: Icon(
Icons.shopping_cart,
color: Colors.black,
),
onPressed: () {},
)
],
),
//Now let's build the body of our app
body: Padding(
padding: EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Let's create the welcoming Text
Text(
"Let's Eat \nOrder your Food Now",
style: TextStyle(
fontSize: 28.0,
fontWeight: FontWeight.w700,
),
),
SizedBox(
height: 20.0,
),
Container(
width: double.infinity,
height: 50.0,
decoration: BoxDecoration(
color: Color(0x55d2d2d2),
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: "Search... ",
border: InputBorder.none,
contentPadding: EdgeInsets.only(left: 20.0),
),
)),
RaisedButton(
elevation: 3.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
onPressed: () {},
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 15.0),
child: Icon(
Icons.search,
color: Colors.white,
),
),
color: Color(0xFFfc6a26),
),
],
),
),
SizedBox(
height: 20.0,
),
//Now let's build the food menu
//I'm going to create a custom widget
Expanded(
child: GridView.count(
crossAxisCount: 2,
//let's change the aspect ration for the child card
childAspectRatio: 0.7,
children: [
foodCard(imgUrl[0], "Meat plate", "25"),
foodCard(imgUrl[1], "Meat plate", "25"),
foodCard(imgUrl[2], "Meat plate", "25"),
foodCard(imgUrl[3], "Meat plate", "25"),
foodCard(imgUrl[4], "Meat plate", "25"),
foodCard(imgUrl[5], "Meat plate", "25"),
],
),
)
],
),
),
//Now let's create the bottom bar
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Color(0xFFfcfcfc),
elevation: 0.0,
unselectedItemColor: Colors.black,
selectedItemColor: Color(0xFFfc6a26),
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Home"),
),
BottomNavigationBarItem(
icon: Icon(Icons.store),
title: Text("Our Shop"),
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
title: Text("Favorite"),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text("Profile"),
),
],
),
);
}
}
foodcard.dart
import 'package:flutter/material.dart';
Widget foodCard(String img, String title, String price) {
return Container(
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
img,
height: 100.0,
),
SizedBox(
height: 8.0,
),
Flexible(
child: Text(
title,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w600,
),
),
),
SizedBox(
height: 20.0,
),
Row(
children: [
Expanded(
child: Text(
"${price} £",
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w700,
),
),
),
Expanded(
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.favorite_border,
color: Colors.black,
),
),
)
],
)
],
),
),
),
);
}
Flutter Food Delivery App
Reviewed by Medics
on
October 11, 2020
Rating:
Reviewed by Medics
on
October 11, 2020
Rating:
Thanks for sharing the above information. It's really useful and informative. Keep sharing
ReplyDeleteAll types of industries are going digital whether it is a food delivery service or apparel business. It is quite challenging to stand out from your fellow competitors. But adding customized and unique features will help you to be different from the rest of the crowd. Make sure, in making your food delivery application, you are not ignoring the basic features. The features and the UI decide the success of your application. Invest in the app development services provider to see the best results.
If you are looking for the readymade Food Delivery Solution, check out the features that customer app should have. Click to read more - Food Delivery Application.
Excellent tips and blog for disseminating such valuable information! Food is one of those industries that will never go out of style. People will always remember to order food from their favorite restaurants regardless of the occasional festival or vacation. We offer a turnkey food delivery solution that enables restaurant owners to take their operations online. Our Food Delivery Service works like magic in terms of increasing the ongoing sales of your restaurant or cloud kitchen.
ReplyDeleteAwesome Article thanks for share your valuable information and you are a pharmacy owner build your business with features of our Online medicine delivery app
ReplyDeleteOnline Medicine Delivery App
Thank you for sharing an informative article on Food Delivery app using Flutter framework. Flutter is Cross-platform Mobile app development framework. Keep sharing more post on Flutter App Development for developing on demand apps.
ReplyDelete