Mobile Application Development

Flutter Project Structure

Building App from Scratch
runApp Function
 Project Structure Explained
• so flutter_learn
project the VC has
already created a set
of folders for you
when this project
was created as
shown in the vs code
image.
 Project Structure Explained
• Android Folder
– the android folder contains all the Android related code and files in this project
• IOS Folder
– the iOS folder contains all the iOS related codes and files
• Lib Folder
– the lib folder is the main folder where we have to write all of our application
code
– currently only contains the main.dart file here
• Test Folder
– This folder is used to store and manage the testing code for the application
• Below the test folder files which are present on the root directory are particularly
configuration files which are used by the IDE of your Choice.
• .gitignore
– the .gitignore file is a hidden file that an IDE uses to store the list of files which need to
be ignored when a source code is uploaded or checked into any git versioning system
like for example github
• .metadata
– a hidden file which is used by IDEs to track the properties of the particular flutter project
in question
• .packages
– which manages third party or reusable controls or components, incase of dart the
package manager calls Pub and this hidden file is used by Pub to manage the packages
for our project
• android.iml
– or in our case TravelApp_android.iml is an XML file which is used by the editor Engine
to get the configuration of Java_module which is used by this project
• pubspec.lock
– Just like the .packages this file is also used by pub package manager in order to get the
concrete versions and other identifying information for every immediate and transitive
dependency that a package relies on
• pubspec.yaml
– and this is the the only file in all these files in which we have to make
changes when we have to use any third party packages This file is
used by pub package manager again to get and load the packages that
are used in the project which can also include third party packages
• README.md
– this is a markdown file and as the name suggests its a read me file
which can contain any information that you would you would want to
mention about the project and it's an optional file This is mainly the
basic layout of how a new flutter project looks like.
– Now what flutter does for you is that whenever you create a new
flutter project it creates a demo App
• further when do we do start creating
multiscreen applications following a certain
design pattern we will have to create more
files and folders inside ‘lib’ folder
 Widget
• Widgets: Each element on a screen of
the Flutter app is a widget. The view of the
screen completely depends upon the choice
and sequence of the widgets used to build the
app
 What is Widget ?
(Widget is a description of a part of UI.)
• In flutter, Widget is a way to declare and construct UI.
• If you are familiar with the Android or iOS development then you might
make the immediate connection with the views (on Android) or UIViews
(on iOS).
• But dear just like view, Widget is not just a piece of UI. Widget is a lot
more than just structural elements like buttons, text, image, list or slider. A
widget might display Something, it might help define design, it might help
with layout, it may handle user interaction, etc.
• For example, Padding is a widget, Margin is a widget, Center is a widget,
Layout rows and columns are also widgets.
• So you can consider that a widget is a blueprint. Flutter uses these
blueprints to create views.
• Here also remember that in flutter everything is a widget. Even your app
itself is a widget. 😊
 Widget tree

• If you already have fun with flutter code then you might
notice that infinite Parent-Child tree. Yaa I agree, first time it
just scares out any beginner, but dear we all passes from the
same stage in which you are right now.

• Just give it some time, do a lot of practice and Just believe,

just like others, you can do it as well. 😉
• Widgets are arranged into a tree of parent and child widget.
• Widgets are nested inside of each other to form your app.
• The Entire widget tree forms a layout that you see on the
screen
 Types of Widgets

• Now when we know what is a widget, its time to know how many
types of widgets are there.
• Flutter has a rich set of in-built widgets like text, buttons, slider,
lists, layouts, gesture detector, animations, etc.
• Flutter team works really hard to create a set of widgets that
helps you in almost every situation. And they are continuously
adding more widgets as developers needs.
• But apart from built-in widgets, you can create your own widgets
according to your needs.
• Flutter divides widgets into two categories:
• Stateless Widgets
• Stateful Widgets
 Stateless Widgets

• In simple words, if a widget doesn’t do anything its

Stateless Widget. They are static in nature.
• Stateless widgets don’t store any state. That means they
don’t store values that might change.
• You can also say that stateless widgets are “DATALESS”
widgets. As they don’t store any real-time data.
• For example, if you have a simple Text widget on the
screen, but it doesn’t do anything then its Stateless
Widget.
• Icon, IconButton, and Text are an example of stateless
widgets.
 Stateful Widgets

• In simple words, if a widget does anything then its Stateful

Widget.
• A Stateful widget is dynamic in nature. That means it can keep
track of changes and update the UI based on those changes.
• The user can interact with a stateful widget.
• For example, If you press a button and it performs any task its
a Stateful Widget, If you are moving a slider and it does
anything then its a Stateful Widget, If you swipe item from a
list and item gets deleted then that list a Stateful Widget.
• CheckBox, Radio, Slider, InkWell, Form, and TextField are an
example of stateful widgets.
• If you are in doubt, then always remember this rule.
– If a widget changes, it’s a Stateful Widget
– If a widget is not changing, it’s a Stateless Widget.

• Recommended Reading:
– https://
stackoverflow.com/questions/50958238/what-is-a-widget-in-flutter

– https://medium.com/jay-tillu/4-what-is-widget-in-flutter-lets-clear-
the-basics-first-82f501c8d0f0#:~:text=In%20flutter%2C%20Widget
%20is%20a%20way%20to%20declare%20and%20construct
%20UI.&text=A%20widget%20might%20display%20Something,and
%20columns%20are%20also%20widgets.
 runApp
• Now that we've successfully set up flutter and seen what the
project structure looks like
• Lets understand the flow of code
– Navigating the myApp Lib
• Open main.dart file and step into the code.
• So in the beginning flutter looks for a main function to begin
execution
• It looks for main() function in the main.dart file
• which is the entry point for the code
• Lets create the function void main

• To add something to the screen

• We need to provide widget inside this main
function
• To do this we will create runApp() function
inside main()
• The runAPP() function essentailly takes a given widget and
makes it the root of widget tree.

– runApp(text”Hello World”);
• now you see that there is an error that shows that
runApp isn't defined. This is because we have called
runApp but we haven't imported it into this file

• Lets import runApp() By importing a package called

material.dart
– Import ‘package:flutter/material.dart’;
 RUN the App
• Open Terminal
– Type command
– Flutter run

• meanwhile so what this code is going to do that

is going to display 'Hello World' on the screen
on the right hand side on the android device
• Now you can see that we have actually encountered an error is mentioned in this particular
line which says that no directionality widget found
• So what a directionality widget means is that in this particular case we have described the text
that has to be displayed on screen but we have not mentioned a specific direction from which
it has to be displayed or not

• Direction can be left to right or right to left

• So we add a text direction property.
– runApp(Text(“Hello World”,textDirection: TextDirection .ltr,);

– runApp(Center (Child: Text(“Hello World”,textDirection: TextDirection .ltr,));

• You can see that hello world has been displayed in the center of the screen, this is what the
base of every flutter code looks like And we will keep building on this code in our upcoming
tutorials until then keep fluttering.