App structure

There are five main folder structures in a Native Flutter app, the folders & files structure are explained below.

App Structure

There are Five main folder structures in a Native Flutter app:

App: The app has all the files needed for the app and the main structure on which the application can be built upon.

Common: It has some data which we can reuse in the app.

Pages: It has all pages of a project which contains UI, functions, and styling of our app. It also contains some files which we can reuse in the app.

Service: It contains all the API implementation of the project.

Assets: It has all icons, background images, and some other images.

Style: It has a typical style of our whole project, and it also has similar colors which we reuse in the project.

Note: If you want more information, please refer to Flutter Getting Started.

App

main.dart: It is the main entry point of our app. It defines the basic structure and initial navigation of the app.

Folder structure

In our case, we have a side menu. In this file, we have defined which page would be the first, and we also described an option to navigate to the side menu. It also helps in notifying us when the platform is ready.

Common:

It contains similar files which we are using in our project. In this case, we have defined a constant variable within the app and which also helps to change variable value.

base_url: 'https://restaurantrestapi.herokuapp.com/' // you can add your own database URL

Pages:

Each page has it’s a folder. And within that folder, you will find every related file for that page. This includes UI, and it is connected with the service page.

Let’s get through the cart page.

Service:

Each page has its folder. And within that folder, you will find the related files for that particular page. It contains API.

Style:

It contains a similar kind of files which we are using in this project. In our case, we have defined all the colors used within the app, which helps us to change color so that you can play around and try different color schemes.

We also defined a common Text style which is used within the app.

TextStyle hintStyle() {
  return new TextStyle(
      fontWeight: FontWeight.w400,
      fontSize: 14.0,
      color: Colors.white70,
      letterSpacing: 1.0
  );
}