Geometry of the Flutter App
This blog covers in detail the Project structure of the Flutter app and demonstrates the geometry of the app by explaining the Widget Tree.
Project Structure
Open the IDE of your choice, and create a new Flutter project. You’ll be able to see various files and folders as shown in the image. Wonder what are they for? Let’s discuss their purpose!
android — This is platform specific folder for native android project. It is used when you want to add some platform specific code for your Android app.
iOS — This is also platform specific folder for native iOS project. It is used when you want to add some platform specific code for your iOS app.
build — This folder is automatically generated when you run your project. It contains compiled code of your flutter application.
lib — This is one of the main folders which contains the .dart files of your project which are used to build the Flutter application. You can create various folders as /screens, /utilities, /service, etc. under the lib folder to organize your code into different modules and provide a structure to distinguish your .dart files.
main.dart — This .dart file under the lib folder is necessary and a must have, as it contains the main( ) function which is the starting point to build the screens for your application.
test — If you want to perform automatic testing for your application, you can write the test cases here.
.gitignore — When using git as your version control system, the files that should be ignored are listed here which would not be pushed to your github repository. It comes with preset and you can leave everything as it is unless you want some other file specifically to be ignored.
.metadata — This text files is used to track properties of your Flutter project which is automatically managed and you don’t need to change anything here.
.packages — It contains the list of dependencies which are automatically managed by the Flutter SDK.
flutter_demo_app.iml — The name of the .iml file always corresponds to the name of your project (here, flutter_demo_app). It stores the settings relevant for Flutter SDK.
pubspec.yaml — This is also one of the important and very frequently used file which contains the settings or configurations of your project. You can add the dependencies for your project in this file. If you are using any assets as image or custom fonts etc, you need to provide the path for those assets in this file to use them.
pubspec.yaml is similar to the build.gradle file of app level in Android development.
README.md — This file is to describe your project and you can add any details that describe and relate to your project.
This was all about the individual files and folders, the most important that you need to remember and which would frequently be used when you work with any Flutter application are lib folder and pubspec.yaml file.
Widget Tree — Lay out the Widgets
Are you willing to build some layout in Flutter?
Imagine you have a Canvas and the paints, and you wish to paint a picture. To paint it, you divide the picture into some small components that you’ll draw one by one, such that they are well ordered and organized on the Canvas to make a meaning out of it.
Similarly, let’s try to map this scenario with the Flutter app.
The main.dart file under the lib folder contains the main( ) function. The statements written inside this function are executed when the app starts.
Corresponding to the activity of painting being performed, we have runApp() function which takes a Widget (here, MaterialApp( )) as an argument and sets it in the screen.
Corresponding to the paints in the scenario above, we have MaterialApp containing various properties like title, home, theme etc. The widget that is defined in home property (here, Scaffold( )) is displayed on the screen as the application first starts.Wait, what? What are Widgets?
Widgets are the building blocks of the UI that you have on the screen for your application. Widgets describe what the various components on your screen should look like. In Flutter, a Text, a Button, an Icon is nothing but a Widget. Unlikely to usual Android components like Activities or Fragments, in Flutter, Widgets are the main components.
Hence, just as you can use the paints to make up something on the Canvas, you use Widgets provided by MaterialApp class to make your UI.
One of the frequently used Widgets is Scaffold. It corresponds to your board of Canvas itself. That is to say, Scaffold is the outer boundary and inside of which you have your Widgets.
Scaffold widget provides API to show appbar, drawers, snack bars, and bottom sheets and other stuff of material design. It is used to set the appbar, body, backgroundColor, floatingActionButton, etc. all by using various other widgets.
The AppBar widget inside Scaffold is used to display the bar at the top of the screen. The body of the Scaffold comprises the major part of the screen which in the above example, contains a Container widget. Inside the Container (parent widget), we have placed a Column widget (child of Container) so as to arrange the components on the screen vertically aligned with each other. It further contains two Row widgets (children of Column; vertically placed), where the first Row widget contains Icon widget and Text widget (both are children of Row; horizontally placed). Similarly, the other Row widget can contain any widget to build the desired UI onto the screen.
This hierarchy follows as per the layout desired, and different combinations of multiple widgets inside Row widget and Column widget can be made until you have the cherry on your cake!
What I mean by this can be visualized better by looking at the Widget Tree in visual demo attached above.
Here is main.dart file for the above demo
Have a look at the example below of how these widgets are placed into one another.
What can we conclude from this?
Certain widgets can contain a Single child as the Container widget, Center widget etc. while some others can contain Multiple children as the Column widget, Row widget, ListView widget etc. You can know more about the list of widgets from here.
