Scribd
Upload
3 views15 pages

Lecture 5

Flutter is an open-source UI toolkit by Google for building mobile applications from a single code base. The document outlines the steps for setting up the development environment, creating a new Flutter project, and understanding the architecture and components of Flutter applications. Key concepts include widgets, gestures, state management, and the layered structure of the Flutter framework.

Uploaded by

thereal dessy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views15 pages

Lecture 5

Flutter is an open-source UI toolkit by Google for building mobile applications from a single code base. The document outlines the steps for setting up the development environment, creating a new Flutter project, and understanding the architecture and components of Flutter applications. Key concepts include widgets, gestures, state management, and the layered structure of the Flutter framework.

Uploaded by

thereal dessy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

MOBILE APP DEVELOPMENT WITH FLUTTER

Flutter is an open-source UI toolkit developed by


Google that is used to build, network, and integrate
apps from a single code base. Following are the steps
that would take you through the process of developing,
testing and deploying a mobile application.

1
STEPS
 Set Up the Development Environment

 Create a New Flutter Project

 Build your app's interface by defining Widgets

 Implement application logic

 Add functionality and features

 Test your application

 Debug and Optimize

 Build and Deploy

20XX Pitch deck title 2


INSTALLING FLUTTER IN WINDOWS

Step 1 − Go to URL, https://flutter.dev/docs/get-started/install/windows and download the latest


Flutter SDK.
Step 2 − Unzip the zip archive in a folder, say C:\flutter\
Step 3 − Update the system path to include flutter bin directory.
Step 4 − Flutter provides a tool, flutter doctor to check that all the requirement of flutter
development is met.
Step 6 − Install the latest Android SDK, if reported by flutter doctor
Step 7 − Install the latest Android Studio, if reported by flutter doctor
Step 8 − Start an android emulator or connect a real android device to the system.
Step 9 − Install Flutter and Dart plugin for Android Studio. It provides startup template to create
new Flutter application, an option to run and debug Flutter application in the Android studio itself,
etc.

20XX Pitch deck title 3


CREATING APP IN ANDROID STUDIO

Step 1 − Open Android Studio


Step 2 − Create Flutter Project. For this, click File → New → New Flutter Project.
Step 3 − Select Flutter Application. For this, select Flutter Application and click Next
Step 4 − Configure the application as below and click Next.
•Project name: hello_app
•Flutter SDK Path: <path_to_flutter_sdk>
•Project Location: <path_to_project_folder>
•Description: Flutter based hello world application
Step 5 − Configure Project.
Set the company domain as flutterapp.tutorialspoint.com and click Finish.
Step 6 − Enter Company domain.

20XX Pitch deck title 4


COMPONENTS OF THE STRUCTURE
•android − Auto generated source code to create android application
•ios − Auto generated source code to create ios application
•lib − Main folder containing Dart code written using flutter framework
•ib/main.dart − Entry point of the Flutter application
•test − Folder containing Dart code to test the flutter application
•test/widget_test.dart − Sample code
•.gitignore − Git version control file
•.metadata − auto generated by the flutter tools
•.packages − auto generated to track the flutter packages
•.iml − project file used by Android studio
•pubspec.yaml − Used by Pub, Flutter package manager
•pubspec.lock − Auto generated by the Flutter package manager, Pub
•README.md − Project description file written in Markdown format

20XX Pitch deck title 5


FLUTTER ARCHITECTURE APP

 Widgets

 Gestures

 Concept of State

 Layers
20XX Pitch deck title 6
WIDGETS
The core concept of the Flutter framework is In Flutter, Everything is a widget.

Widgets are basically user interface components used to create the user interface of the
application.

Widgets are the primary component of any flutter application.

It acts as a UI for the user to interact with the application.

Any flutter application is itself a widget that is made up of a combination of widgets

In Flutter, the application is itself a widget.

The application is the top- level widget and its UI is build using one or more children
(widgets), which again build using its children widgets.
20XX Pitch deck title 7

This composability feature helps us to create a user interface of any complexity.


In a standard application, the root defines the structure of the application
followed by a Material App widget which basically holds its internal
components in place.

This is where the properties of the UI and the application itself is set.

The Material App has a Scaffold widget that consists of the visible
components (widgets) of the application.

The Scaffold has two primary properties namely the body and appbar.

It holds all the child widgets and this is where all its properties are defined
20XX Pitch deck title 8
20XX Pitch deck title 9
IMPORTANT POINTS
•MyApp is the user created widget and it is build using the Flutter native
widget, MaterialApp.

•MaterialApp has a home property to specify the user interface of the home page, which is
again a user created widget, MyHomePage.

•MyHomePage is build using another flutter native widget, Scaffold

•Scaffold has two properties – body and appBar

•body is used to specify its main user interface and appBar is used to specify its header
user interface

•Header UI is build using flutter native widget, AppBar and Body UI is build
using Center widget.

•The Center widget has a property, Child, which refers the actual content and it is build
20XX Pitch deck title 10
using Text widget.
Description of the widgets used are as follows

•Scaffold – Implements the basic material design visual


layout structure.

•App-Bar – To create a bar at the top of the screen.

•Text To write anything on the screen.

•Container – To contain any widget.

•Center – To provide center alignment to other widgets.


20XX Pitch deck title 11
GESTURES
Flutter widgets support interaction through a special widget, GestureDetector.

GestureDetector is an invisible widget having the ability to capture user


interactions such as tapping, dragging, etc., of its child widget.

Many native widgets of Flutter support interaction through the use


of GestureDetector.

We can also incorporate interactive feature into the existing widget by


composing it with the GestureDetector widget.

We will learn the gestures separately in the upcoming chapters.

20XX Pitch deck title 12


CONCEPT OF STATE

Flutter widgets support State maintenance by providing a special widget, StatefulWidget.


Widget needs to be derived from StatefulWidget widget to support state maintenance and all
other widget should be derived from StatefulWidget.

The states are nothing but data objects.


Flutter widgets are reactive in native.

This is similar to reactjs and StatefulWidget will be auto re- rendered whenever its internal
state is changed.

The re-rendering is optimized by finding the difference between old and new widget UI and
rendering only the necessary changes

20XX Pitch deck title 13


LAYERS
The most important concept of Flutter framework is that the framework is grouped into
multiple category in terms of complexity and clearly arranged in layers of decreasing
complexity.

A layer is build using its immediate next level layer.

The top most layer is widget specific to Android and iOS.

The next layer has all flutter native widgets.

The next layer is Rendering layer, which is low level renderer component and renders
everything in the flutter app.

Layers goes down to core platform specific code

20XX Pitch deck title 14


20XX Pitch deck title 15

You might also like