Quick start

Material Flutter is a mobile UI template built with Google’s Flutter allowing you to create powerful and beautiful mobile applications.

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code which is used by developers and organisations around the world, and is free and open source.

Using the mobile application is very simple but it does require you to understand basic Dart functions and Flutter. To get the desired effect you will need to integrate more Flutter widgets and build your own backend.

Getting Started

Based on Flutter requirement. Please select the operating system on which you are installing Flutter:

System Requirements

The cool thing about using Flutter for creating cross-platform native mobile apps is the fact that you can build those on almost any OS.

Here are some System Requirements for Android Studio which is needed for running an Android simulator.

Windows:

  • Microsoft® Windows® 7/8/10 (64-bit)
  • 4 GB RAM minimum, 8 GB RAM recommended
  • 2 GB of available disk space minimum,
  • 4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and emulator system image)
  • 1280 x 800 minimum screen resolution

Mac:

  • Mac® OS X® 10.10 (Yosemite) or higher, up to 10.14 (macOS Mojave)
  • 4 GB RAM minimum, 8 GB RAM recommended
  • 2 GB of available disk space minimum,
  • 4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and emulator system image)
  • 1280 x 800 minimum screen resolution

Linux:

  • GNOME or KDE desktop - Tested on gLinux based on Debian.
  • 64-bit distribution capable of running 32-bit applications
  • GNU C Library (glibc) 2.19 or later
  • 4 GB RAM minimum, 8 GB RAM recommended
  • 2 GB of available disk space minimum,
  • 4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and emulator system image)
  • 1280 x 800 minimum screen resolution

Chrome OS:

  • 8 GB RAM or more recommended
  • 4 GB of available disk space minimum
  • 1280 x 800 minimum screen resolution
  • Intel i5 or higher (U series or higher) recommended

Installation

Once you’ve downloaded the product from our website you should unzip the folder. The next step is for you to open up your terminal and go directly to the newly created folder called material-pro-flutter-vX.Y (x and y are numbers indicating the version number). Once you’re there run flutter packages get and then flutter run to start the project.

  • Running on iOS:
    1. Open the project in Xcode from ios/Runner.xcodeproj
    2. Click run button to simulate.
  • Running on Android:
    1. Run$open -a Simulator.appin your terminal.
    2. Start your app by running the commandflutter run.
    3. Run on Android
    4. Make sure you have an Android emulator installed and running.
    5. Runflutter runin your terminal.

You can read more about installing and using Flutter projects by reading the official docs for macOS and Windows.

Directory Structure

.
├── README.md
├── android
├── assets
├── ios
├── lib
│   ├── constants
│   │   ├── Images.dart
│   │   └── Theme.dart
│   ├── main.dart
│   ├── screens
│   │   ├── about.dart
│   │   ├── agreement.dart
│   │   ├── articles.dart
│   │   ├── beauty.dart
│   │   ├── cart.dart
│   │   ├── category.dart
│   │   ├── chat.dart
│   │   ├── elements.dart
│   │   ├── fashion.dart
│   │   ├── home.dart
│   │   ├── notifications-settings.dart
│   │   ├── notifications.dart
│   │   ├── onboarding.dart
│   │   ├── privacy.dart
│   │   ├── product.dart
│   │   ├── profile.dart
│   │   ├── register.dart
│   │   ├── search.dart
│   │   └── settings.dart
│   └── widgets
│       ├── button.dart
│       ├── card-category.dart
│       ├── card-horizontal.dart
│       ├── card-shopping-cart.dart
│       ├── card-shopping.dart
│       ├── card-small.dart
│       ├── card-square.dart
│       ├── drawer-tile.dart
│       ├── drawer.dart
│       ├── input.dart
│       ├── navbar.dart
│       ├── slider-product.dart
│       ├── slider.dart
│       └── table-cell.dart
├── my_app.iml
├── pubspec.lock
├── pubspec.yaml

Constants

This folder contains all constants we’re using throughout our Flutter cross-platform app.

Screens

Contains all screens created for Material Kit Pro Flutter.

Widgets

Widgets ready to be used and transform however you’d like.

Customize

Customizing the App will be really easy for you. This is due to the fact we provided you well prepared code. This makes it simple to be able to dig through the code and hence without problems regarding customization.

You want to change a color thtought the whole app? Just go to the Theme.dart and modify any color or even add one yourself.

Adding Screens

Adding screens is really easy, all you have to do is go to the screens directory and create a new *.dart file. Right there create a new statless widget which returns a Scaffold object. If you want to add it inside the Drawer, all you have to do is go there and you’ll find a lot of DrawerTile objects. Next in line should be your own route, for example you could write something like this:

DrawerTile(
  icon: Icons.apps,
  onTap: () {
    if (currentPage != "New Screen")
      Navigator.pushReplacementNamed(context, '/newScreen');
  },
  iconColor: MaterialColors.primary,
  title: "New Screen",
  isSelected: currentPage == "New Screen" ? true : false
),

We’ve made sure that the app knows which route is on by passing to each screen a custom widget made specifically for the Scaffold widget. Just pass the drawer to each of your screens and use the parameter called currentPage. For example:

return Scaffold(
  appBar: Navbar(
    title: "New Screen"
  ),
  drawer: MaterialDrawer(currentPage: 'New Screen'),
  body: Container()
);