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.
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
- 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
├── ...
| Directory | Explain |
|---|---|
| images | For storing various pictures |
| local_json | I encapsulate the Icon information of Flutter into a Json file and store it in this directory |
| res | Store 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
| Directory | Explain |
|---|---|
| config | Store various configuration classes |
| database | Store database operation related classes |
| l10n | Class for storing internationalized related operations |
| items | Item class that stores part of the List list |
| json | Various network requests, databases, etc. related json files |
| logic | Logic layer directory |
| model | Model layer directory |
| pages | Store each page, which is the directory of the View layer |
| utils | Packaged tools, such as file operations |
| widgets | custom 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!