Flutter. Project Structure. Create a simple app
On the previous lesson, we learn how to set up our environment to build apps with Flutter SDK. In this lesson, we will create a simple app to get a little bit deeper with Flutter. As the IDE I will use Visual Studio Code but you feel free to use any other IDE that you want. So let’s begin our journey.
Open visual studio code. Then click to View at the toolbar and then open Command Palette you can also use the shortcut Ctrl+Shift+P to open it. Type flutter. You should see a variety of possible things that you can do
At this stage, we will not use other commands, and simply just click to Flutter: New Project. After this Visual Studio Code asks you to select the location where should project create. Then IDE will start to create the Sample Flutter Project. After IDE is finished, your project structure should look like this.
Let’s look what’s in our project folder:
android — This folder contains an Android project with one Activity which runs our Flutter project
ios — This folder contains an IOS project which runs our Flutter project
So android and ios are platform-specific folders which used to run the app on the specific platform
lib — Folder which contains .dart files. It’s the main folder in our project which contains files that Flutter use to build our app.
pubspec.yaml — It is the file which contains our project’s settings, also there you can add other libraries to your project. If you are familiar with Android Development pubspec.yaml is similar to build.gradle.
Now open main.dart file which is in the lib folder, and we will look at it more carefully.
On the first line, we can see :
import ‘package:flutter/material.dart’;It tells to Flutter import material library from Flutter SDK. All components in this project such as Stateful and Stateless Widgets, MaterialApp, AppBar, Scaffold all of these components are from material.dart
Then we can see the line with this code
void main() => runApp(MyApp());which tells to Flutter that it should run MyApp class. Every app in Flutter has the main method and it should call runApp in it.
Class MyApp extends StatelessWidget and overrides build method which requires return Widget. In Flutter everything is Widget, Text, Buttons and so on. Unlikely to usual Android components like Activities or Fragments in Flutter Widgets are the main components. We can see a build method, it returns the MaterialApp widget which allows us to use material design components. If you look at it constructor you will see that it receives a lot of arguments. But at this time we will use just a couple of them.
title — It is your app title, which you show in your toolbar
theme — There you can style your app and change your app appearance, now we just set the color which will use in our toolbar
home — The default Widget that will show when the app starts. There we call MyHomePage with 1 argument.
MyHomePage extends StatefulWidget and as you can see we do not override build method in this class. That’s the main difference between StatelessWidget and StatefulWidget.
The difference between them is that StatelessWidget cannot change itself, it’s immutable. Otherwise, Statefulwidget can have state and change it when you want. As you can see classes that extend StatefulWidget must override createState(). It necessary because you tell the app, which class will manage the state of your Widget. In our case, it is _MyHomePageState which extends State<MyHomePage>. In this class, you should override build method as you do in StatelessWidget. Let’s look at it more detailly.
We returning Scaffold Widget which is one of the main widgets which provide API to show drawers, snack bars, and bottom sheets and other stuff of material design. Our Scaffold widget has appBar which takes AppBar widget as an argument.
AppBar widget has a title argument which receives widget. In our case, it was Text widget with one parameter in its constructor where we pass our MaterialApp title using widget.title .
Body element which receives Center widget which also has widgets in it. And we have FloatingActionButton. It has an onPressed parameter which takes void as an argument and in our case, we pass to it _incrementCounter method. This method increments our _counter variable and calls the setState method. setState notifies Flutter that this widget should be updated, and the build method will run again and our Text widget will use the new incremented value in its text.
Let’s run our app and see how it works. To do it open Debug>Start Debugging or use shortcut Ctrl+F5
In this lesson, we learn of what a Flutter project consist, and basic things such as StatefullWidget and StatelessWidgets and also how flutter builds our app. In the next lesson, we will create a new page with many widgets and try to make them work together.
Follow me on Twitter: https://twitter.com/a_rasul98
Github: https://github.com/agarasul
Source code: https://github.com/agarasul/SampleNewsApp
