Introduction
This is the second article in the “Flutter for Beginner” series where in we shall look at how to get started on developing cross-platform mobile applications using flutter framework.
By the end of this series we shall develop a simple blog list application which contains a blog home page and a blog article page, developed for both Android and iOS together using the flutter framework.
In the previous article we get ourselves familiar with what flutter is about and the things we need to do to get started on development. In this article lets look at how a flutter application code structure looks like and how the execution happens. We shall also try to understand the purpose of each folder and what happens when the app is built or run.
Read How to setup Flutter Development Environment Here – How to Install and Configure Flutter
To create a new application, we have to the run the below command using flutter sdk which shall create a sample demo application with some boilerplate code.
> flutter create helloworldappOnce this command is executed, the flutter application creates a code project for us under the folder helloworldapp under the command directory. The code project contains a sample “hello world” application with a single screen.
Let’s open the flutter project created on a Visual Studio Code window. Since we have installed Flutter and Dart extensions for Visual Studio Code, it makes us very simple to develop, run and debug our flutter application code via Visual Studio Code.
Another interesting feature of Flutter is that the applications can be “hot reloaded”; meaning any changes done on the code can be live reloaded on the debugging device without the need to rebuild and run the entire codebase. This saves us a lot of time and eases our development efforts.
To run the application, we can press on F5, or click on the Play icon over the Debug menu in the Visual Studio Code. Or we can run by using the Command Line with the below command:
> flutter runThis command builds the flutter project and deploys the application on a connected real device (if available) or opens up an Android emulator or an iOS simulator. In either the case, the deploy is done automatically and the application is booted up.
Alternatively, we can build and generate the app executable over the command line using the below command:
> flutter build apk (for android; ipa for ios)this shall compile and bundle all the assets and artifacts into environment specific mobile app bundle; which can then be exported or shared for use.
Coming back to the code structure, let’s look at how a typical flutter application code base looks like:
Understanding Flutter Project Structure
Ignoring the support files generated by the vs code, we can see the folders android and ios, which contain the native source code projects (java and swift projects) respectively, which are internally used when bundling for an app build or when the app is debugged.
We have the lib folder which contains the main.dart file. This folder is where the entire code for all the UI, Logic and everything in flutter dart resides.
When bundling or running, these files are compiled and copied onto the respective native layer projects (under android or ios folders) and then the respective native layer project is executed.
We have the test folder, where the test scripts on the developed app components reside and are invoked when needed.
The .iml file is sort of a project file where the project configurations reside.
pubspec.yaml
Then we have the pubspec.yaml file which is sort of a plugin registry for the flutter app. This is where the flutter runtime looks for whenever a new plugin is added to the project or when the project is executed.
The spec file also contains the app metadata information and the sdk version information. Whenever the app is built or run, internally the flutter runtime runs the below command to include all the plugins available within this file using the below command:
> flutter pub getwhich basically runs over the pubspec file and installs or updates any missing or out of date plugins.
When we run the flutter codebase using whatever way mentioned earlier, the execution of the app begins from the main.dart file which is basically the starting point for the application.
In the next article, lets look at how a typical main.dart file looks like and see how the sample app works when we run the project.
For all the UI designers and developers who’re looking for a simple utility to create and test colors and combinations for their next awesome apps – here’s a simple app for you, which is completely ad-free and is free! check it out here
Found this article helpful? Please consider supporting!
