Skip to main content

First app and basic structure in Flutter

· 4 min read

Flutter is a new Open Source framework created by Google that focuses on the creation of cross platform application. Flutter primarily targets iOS and Android, but is increasingly adding support for desktop and web platform too.

Flutter apps are built using the Dart programming language. If you're new to Dart, you may want to start by getting a general overview of the language first.

In this article, we're going to create our first application and built up ourselves basic application structures.

Installing Flutter

We can install Flutter on our machine in a variety of ways. The easiest way to get started is to download the installer from the Flutter website.

IDE & Plugins

I'd recommend that you either use Android studio or Visual Studio Code for your Flutter development. Android studio offers and integrated, feature-rich IDE with support for Flutter, whereas Visual Studio Code offers more lightweight, but functional support.

  • To install the Flutter plugin for Android Studio, open up the plugin preferences using Preferences > Plugins on macOS, File > Settings > Plugins on Windows & Linux. From there, search for the Flutter plugin within the repository list and click install.
  • To install the Flutter plugin for Visual Studio Code, search the store for Flutter or click install from the following page.

Creating a new Flutter apps

Assuming that you're installed Flutter and have the appropriate dependencies (Android Studio / XCode) installed. We can go ahead and create a new Flutter app. This can be done in numerous ways, but I find the easiest ways are to do it via the Terminal. Let's use the terminal in this case:

$ flutter create hello_flutter
Creating project hello_flutter...
All done!
In order to run your application, type:
- cd hello_flutter
- flutter run

Launching app

As anticipated, this will go ahead and create a new Flutter project for us and open it up inside of Android Studio. We can then open this using the Flutter plugin for Android Studio.

With default configuration focus on main.dart, simply we're hit to choose the simulator (Android or iPhone) for running. I've selected this iOS Simulator for this. We should then see our demo application.

flutter first app

And now, you'll wonder how to write a really application with Flutter. An application has a lot of screens, lots of feature and many processing logic like network, database, etc. Let me suggest you a clearly structure of Flutter project.

Project Structure

Using the state management framework in your project is Provider, and apply the architecture of the entire project is as follows

MVP project structure
  • The View layer is used to display layouts and is a variety of StatelessWidget pages wrapped by ChangeNotifierProvider.
  • The Model layer is used to process data and is variety of Model classes that inherit ChangeNotifier
  • The Logic layer doesn't save any data, only logic operation.

Does it look like the MVP pattern in Android? In fact, they are all similar, but the names are slightly different. You can also think of the above mode as the MVP mode.

Flutter is particularly well suited for this architectural model, because the view changes with the data, you basically don't have to care about the View, just go and operate on the data.

Directory Structure

The project directory structure is as follows:

├── android
├── images
├── ios
├── lib
├── local_json
├── res
├── ...
imagesFor storing various pictures
local_jsonI encapsulate the Icon information of Flutter into a Json file and store it in this directory
resStore the language files generated by the "intl" plugin

Let me explain the other directories besides lib:

├── config
├── database
├── l10n
├── items
├── json
├── logic
├── model
├── pages
├── utils
├── widgets
├── main.dart
configStore various configuration classes
databaseStore database operation related classes
l10nClass for storing internationalized related operations
itemsItem class that stores part of the List list
jsonVarious network requests, databases, etc. related json files
logicLogic layer directory
modelModel layer directory
pagesStore each page, which is the directory of the View layer
utilsPackaged tools, such as file operations
widgetscustom widgets

I'd now suggest that you play around with Flutter using this example application. Change the text, do something funky things with the calculations, add new function and enjoy with new project structure. You can also reference the source code here!

I'll see you next article, enjoy!