Restaurant Mobile App using flutter
Tags: flutter, dart, project
Published: 2023-07-02 12:07:05

UI credits : https://www.figma.com/file/iwl1DGD3FWKW6jfQzijpsh/Restaurant-Mobile-App-UI-Design-(Community)


Results ::
landing page

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2iw9q4yt76osixt9zau.png)

sign up page


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tdvly3ax6hsl2m3i59t.png)


login page

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alv8272lni8l1payyvhj.png)

forgot password page


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrywn1c7spm662inqyop.png)


reset password page


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8cj5zdspluf8633x84t.png)

sign up success page


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0n9hcgpldqkwhzve8s5.png)

home page


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnltd1i38gyuxxwvbpak.png)





![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05a8emwqzek1m1u4y9cz.png)

assets

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbi1mk9dvufmfhx5tpk5.png)

img1

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v82bfksm2k38zofrq6gd.png)

img2
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6159hr0ekputoiwrw68b.png)

img3

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yyowlb6xfh8wv037ht7.png)

img4


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfoto2plh4iepa34bgt8.png)

img5


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l292t9mi1ahzsy1a41av.png)

img6


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1r8s7myb154yzkhspwg.png)

img7


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1psn3thgshlrbqqwxa6.png)

img8


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l586nwu9ubfwr7sk1n7m.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3vbm0n4eyei5a5j1um8.png)


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'),
                            ],
                          ),
                        ],
                      )
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

```