UI credits : https://www.figma.com/file/iwl1DGD3FWKW6jfQzijpsh/Restaurant-Mobile-App-UI-Design-(Community)
Results ::
landing page
sign up page
login page
forgot password page
reset password page
sign up success page
home page
assets
img1
img2
img3
img4
img5
img6
img7
img8
pubspec.yaml
name: testapp
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: "none" # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1
environment:
sdk: ">=2.19.0 <3.0.0"
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
# The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is
# activated in the `analysis_options.yaml` file located at the root of your
# package. See that file for information about deactivating specific lint
# rules and activating additional ones.
flutter_lints: ^2.0.0
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter packages.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- assets/
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
main.dart
import 'package:flutter/material.dart';
import 'package:testapp/forgot_password_page.dart';
import 'package:testapp/landing_page.dart';
import 'package:testapp/login_page.dart';
import 'package:testapp/reset_password_page.dart';
import 'package:testapp/sign_up_page.dart';
import 'package:testapp/signup_success_page.dart';
import 'home_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
//for the background color of page we need to
//edit theme
// theme: ThemeData(
// //delete below line
// // primarySwatch: Colors.blue,
// //now lets reload and see the bg color
// scaffoldBackgroundColor: const Color.fromRGBO(64, 147, 206, 100)),
home: LandingPage(),
debugShowCheckedModeBanner: false,
);
}
}
landing_page.dart
import 'dart:html';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:testapp/sign_up_page.dart';
class LandingPage extends StatefulWidget {
const LandingPage({super.key});
@override
State<LandingPage> createState() => _LandingPageState();
}
class _LandingPageState extends State<LandingPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'You are a',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w500,
),
),
const SizedBox(
height: 10,
),
SizedBox(
height: 41,
width: 323,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.black,
backgroundColor: Color.fromRGBO(100, 252, 216, 1),
),
onPressed: () {},
child: Text(
'Restaurant',
style: TextStyle(
fontSize: 16,
),
),
),
),
const SizedBox(
height: 10,
),
SizedBox(
height: 41,
width: 323,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.black,
backgroundColor: Color.fromRGBO(100, 252, 216, 1),
),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => SignUpPage()));
},
child: Text(
'Customer',
style: TextStyle(
fontSize: 16,
),
),
),
),
],
),
),
);
}
}
sign_up_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:flutter/widgets.dart';
import 'package:testapp/signup_success_page.dart';
import 'login_page.dart';
class SignUpPage extends StatefulWidget {
const SignUpPage({super.key});
@override
State<SignUpPage> createState() => _SignUpPageState();
}
class _SignUpPageState extends State<SignUpPage> {
TextEditingController emailController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Image.asset(
'img1.png',
height: 170,
width: 309,
),
),
SizedBox(
height: 10,
),
Text(
'Sign Up',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
),
),
Row(
children: [
const Icon(
Icons.email,
color: Colors.black12,
),
const SizedBox(
width: 10,
),
SizedBox(
width: 310,
child: TextField(
controller: emailController,
decoration: InputDecoration(
hintText: 'Enter Email',
),
),
),
],
),
Row(
children: [
const Icon(
Icons.account_circle_outlined,
color: Colors.black12,
),
const SizedBox(
width: 10,
),
SizedBox(
width: 310,
child: TextField(
controller: emailController,
decoration: InputDecoration(
hintText: 'Full Name',
),
),
),
],
),
Row(
children: [
const Icon(
Icons.mobile_friendly_outlined,
color: Colors.black12,
),
const SizedBox(
width: 10,
),
SizedBox(
width: 310,
child: TextField(
controller: emailController,
decoration: InputDecoration(
hintText: 'Mobile',
),
),
),
],
),
Row(
children: [
const Icon(
Icons.password,
color: Colors.black12,
),
const SizedBox(
width: 10,
),
SizedBox(
width: 310,
child: TextField(
controller: emailController,
decoration: InputDecoration(
hintText: 'Password',
),
),
),
],
),
SizedBox(
height: 10,
),
Row(
children: [
Text(
'By Signing up, you’re agree to our',
style: TextStyle(
fontSize: 14,
),
),
TextButton(
onPressed: () {},
child: Text(
'Term & Conditions',
style: TextStyle(
fontSize: 14,
),
),
)
],
),
Row(
children: [
Text(
'and',
style: TextStyle(
fontSize: 14,
),
),
TextButton(
onPressed: () {},
child: Text(
'Privacy Policy',
style: TextStyle(
fontSize: 14,
),
),
)
],
),
SizedBox(
height: 3,
),
SizedBox(
height: 41,
width: 340,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.black,
backgroundColor: Color.fromRGBO(100, 252, 216, 1),
),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SignUpSuccessPage()));
},
child: Text(
'Continue',
style: TextStyle(
fontSize: 16,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Joined before?'),
TextButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => LoginPage(),
),
);
},
child: Text('Login'),
),
],
),
],
),
),
);
}
}
login_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:testapp/forgot_password_page.dart';
import 'package:testapp/home_page.dart';
import 'package:testapp/sign_up_page.dart';
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
TextEditingController emailController = TextEditingController();
TextEditingController passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(20),
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Image.asset(
'img2.png',
height: 200,
width: 258,
),
),
SizedBox(
height: 5,
),
Text(
'Login',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
),
),
Row(
children: [
const Icon(
Icons.phone,
color: Colors.black12,
),
const SizedBox(
width: 10,
),
SizedBox(
width: 400,
child: TextField(
controller: emailController,
decoration: InputDecoration(
hintText: 'Email ID or Mobile',
),
),
),
],
),
SizedBox(
height: 5,
),
Row(
children: [
const Icon(
Icons.password,
color: Colors.black12,
),
const SizedBox(
width: 10,
),
SizedBox(
width: 400,
child: TextField(
controller: passwordController,
decoration: InputDecoration(
hintText: ' Password',
),
),
),
],
),
Align(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ForgotPassword(),
),
);
},
child: Text('Forgot Password?'),
),
),
SizedBox(
height: 5,
),
SizedBox(
height: 41,
width: 500,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.black,
backgroundColor: Color.fromRGBO(100, 252, 216, 1),
),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
child: Text(
'Continue',
style: TextStyle(
fontSize: 16,
),
),
),
),
SizedBox(
height: 5,
),
Align(
alignment: Alignment.center,
child: Text('OR'),
),
SizedBox(
height: 41,
width: 500,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.black,
backgroundColor: Color.fromRGBO(243, 242, 242, 1),
),
onPressed: () {},
child: Row(
children: [
Image.asset(
'img7.png',
height: 21,
width: 21,
),
SizedBox(
width: 130,
),
Text(
'Login with Google',
style: TextStyle(
fontSize: 16,
),
),
],
),
),
),
SizedBox(
height: 3,
),
SizedBox(
height: 41,
width: 500,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.black,
backgroundColor: Color.fromRGBO(243, 242, 242, 1),
),
onPressed: () {},
child: Row(
children: [
Image.asset(
'img8.png',
height: 21,
width: 21,
),
SizedBox(
width: 130,
),
Text(
'Login with Facebook',
style: TextStyle(
fontSize: 16,
),
),
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('New to us?'),
TextButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => SignUpPage(),
),
);
},
child: Text('Register'))
],
),
],
),
),
);
}
}
forgot_password_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:testapp/reset_password_page.dart';
class ForgotPassword extends StatefulWidget {
const ForgotPassword({super.key});
@override
State<ForgotPassword> createState() => _ForgotPasswordState();
}
class _ForgotPasswordState extends State<ForgotPassword> {
TextEditingController emailController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Image.asset(
'img3.png',
height: 200,
width: 258,
),
),
SizedBox(
height: 5,
),
Text(
'Forgot',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
),
),
Text(
'Password?',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 10,
),
Text(
'Don’t Worry it happens. Please Enter an email or Mobile associated with your account',
style: TextStyle(
fontSize: 14,
),
),
SizedBox(
height: 20,
),
Row(
children: [
const Icon(
Icons.password,
color: Colors.black12,
),
const SizedBox(
width: 10,
),
SizedBox(
width: 380,
child: TextField(
controller: emailController,
decoration: InputDecoration(
hintText: 'Email Or Mobile',
),
),
),
],
),
SizedBox(
height: 30,
),
SizedBox(
height: 41,
width: 500,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.black,
backgroundColor: Color.fromRGBO(100, 252, 216, 1),
),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ResetPasswordPage(),
),
);
},
child: Text(
'Submit',
style: TextStyle(
fontSize: 16,
),
),
),
),
],
),
),
);
}
}
reset_password_page.dart
import 'package:flutter/material.dart';
import 'package:testapp/login_page.dart';
class ResetPasswordPage extends StatefulWidget {
const ResetPasswordPage({super.key});
@override
State<ResetPasswordPage> createState() => _ResetPasswordPageState();
}
class _ResetPasswordPageState extends State<ResetPasswordPage> {
TextEditingController newPasswordController = TextEditingController();
TextEditingController confirmPassController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Image.asset(
'img4.png',
height: 200,
width: 258,
),
),
SizedBox(
height: 5,
),
Text(
'Reset',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
),
),
Text(
'Password',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 10,
),
Row(
children: [
const Icon(
Icons.password,
color: Colors.black12,
),
const SizedBox(
width: 10,
),
SizedBox(
width: 380,
child: TextField(
controller: newPasswordController,
decoration: InputDecoration(
hintText: 'New Password',
),
),
),
],
),
SizedBox(
height: 20,
),
Row(
children: [
const Icon(
Icons.password,
color: Colors.black12,
),
const SizedBox(
width: 10,
),
SizedBox(
width: 380,
child: TextField(
controller: newPasswordController,
decoration: InputDecoration(
hintText: 'Confirm Password',
),
),
),
],
),
SizedBox(
height: 30,
),
SizedBox(
height: 41,
width: 500,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.black,
backgroundColor: Color.fromRGBO(100, 252, 216, 1),
),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => LoginPage(),
),
);
},
child: Text(
'Submitting',
style: TextStyle(
fontSize: 16,
),
),
),
),
],
),
),
);
}
}
signup_success_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:testapp/login_page.dart';
class SignUpSuccessPage extends StatefulWidget {
const SignUpSuccessPage({super.key});
@override
State<SignUpSuccessPage> createState() => _SignUpSuccessPageState();
}
class _SignUpSuccessPageState extends State<SignUpSuccessPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(20),
child: Column(
children: [
Center(
child: Image.asset(
'img1.png',
height: 226,
width: 309,
),
),
Center(
child: Image.asset(
'img5.png',
height: 144,
width: 144,
),
),
Center(
child: Text('Signed up Successfully'),
),
SizedBox(
height: 100,
),
SizedBox(
height: 41,
width: 500,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.black,
backgroundColor: Color.fromRGBO(100, 252, 216, 1),
),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => LoginPage(),
),
);
},
child: Text(
'Login',
style: TextStyle(
fontSize: 16,
),
),
),
),
],
),
),
);
}
}
home_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
backgroundColor: Color.fromRGBO(100, 252, 217, 1),
actions: [
Padding(
padding: EdgeInsets.all(20),
child: Icon(
Icons.add_shopping_cart_outlined,
),
),
],
),
drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Color.fromRGBO(100, 252, 217, 1),
),
child: Text('Drawer Header'),
),
ListTile(
leading: Icon(
Icons.home,
),
title: const Text('Page 1'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(
Icons.train,
),
title: const Text('Page 2'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
body: Column(
children: [
Container(
height: 100,
decoration: BoxDecoration(
color: Color.fromRGBO(100, 252, 217, 1),
),
child: Column(
children: [
Container(
padding: EdgeInsets.all(20),
child: const TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
prefixIcon: Icon(Icons.search),
hintText: 'Search for Shops and Restaurants ',
border: OutlineInputBorder(),
),
),
),
],
),
),
Container(
padding: EdgeInsets.all(20),
height: height - 200,
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, position) {
return Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Color.fromRGBO(243, 242, 242, 1),
borderRadius: BorderRadius.circular(10),
),
child: Row(
children: [
Image.asset(
'img6.png',
height: 99,
width: 99,
),
SizedBox(
width: 30,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'ABC Restaurant',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Row(
children: [
Icon(
Icons.star,
color: Colors.amber,
size: 0.1,
),
Icon(
Icons.star,
color: Colors.amber,
),
Icon(
Icons.star,
color: Colors.amber,
),
Icon(
Icons.star,
color: Colors.amber,
),
Icon(
Icons.star,
color: Colors.amber,
),
],
),
SizedBox(
height: 3,
),
Container(
padding: EdgeInsets.all(5),
width: 110,
decoration: BoxDecoration(
color: Color.fromRGBO(186, 192, 203, 1),
),
child: Text('Recommended'),
),
SizedBox(
height: 3,
),
Row(
children: [
Icon(Icons.wysiwyg),
SizedBox(
width: 3,
),
Text('18'),
],
),
],
)
],
),
);
},
),
),
],
),
);
}
}
Top comments (0)