SlideShare a Scribd company logo
Flutter Widgets
Sameeha moogab
2024
Outline
• What is Flutter
• Flutter Application Project
• Widgets
• The widget tree
• Code in Default Application
• Type of widgets
What is Flutter?
• Flutter is not a language (like JavaScript, for example). Flutter uses
Dart for its language.
• Flutter is Google’s mobile SDK / UI framework that enables
developers to build native apps that run on Android and iOS
devices. Developers write code in a single codebase that works on
both platforms.
• In Dart, you don’t have to develop everything from scratch. There is
a packaging system where developers can develop packages and
publish them. Other people can then use these packages.
Flutter Application Project
• The purpose of this flutter application is to take a
look at the default Flutter application, examine the
project files and how a default Flutter project is
organized.
import 'package:flutter/material.dart’;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget { // This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World Demo Application’,
theme: ThemeData( primarySwatch: Colors.blue, ),
home: MyHomePage(title: 'Home page'), );
} }
Default Flutter App
Default Flutter App
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title), ),
body:
Center(
child:
Text( 'Hello World', ) ),
); } }
the output of the application is as follows:
Whenever we build a user interface in Flutter, it is composed of
Widgets. Putting your widgets together is called Composition.
Widgets
Widgets are basically user interface components used to
create the user interface of the application.
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. This composability
feature helps us to create a user interface of any complexity.
For example, the widget hierarchy of the hello world application
Widgets
My app
(root)
MaterialApp
MyHomePage
(Property:home)
Scaffold
AppBar
The widget tree
Center
AppBar
Code in Default Application
void main() =>
runApp(MyApp());
• Every Dart app must start with a main function as a starting point. In this case the
main function creates an instance of the MyApp object, a StatelessWidget. The
method ‘runApp’ accepts an instance of a widget (in this case an instance of MyApp)
and uses it as the root Widget of the App, rendering it to fit the screen, taking up all
the available space.
 A main function
 MyApp Widget
• The MyApp object is a StatelessWidget. It sets up a Material App that contains a
MyHomePage widget. The MaterialApp widget is a built-in Flutter widget that
serves as the container for your whole app and its Widgets.
Code in Default Application
class MyApp extends StatelessWidget { // This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World Demo Application’,
theme: ThemeData( primarySwatch: Colors.blue, ),
home: MyHomePage(title: 'Home page'), ); } }
 MyHomePage Widget
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. The Center
widget has a property, Child, which refers the actual content and it is build using
Text widget.
Code in Default Application
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title), ),
body:
Center(
child:
Text( 'Hello World', ) ),);
 We can classify the widgets based on ‘state’ that means ‘data contained in the
widget’.
 The rest of the widgets are used to display something, not interact with the
user. That is stateless widgets such as Icon, IconButton, and Text are examples
of stateless widgets. Stateless widgets subclass StatelessWidget.
 A stateful widget is dynamic: for example, it can change its appearance in
response to events triggered by user interactions or when it receives data.
 Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful
widgets. Stateful widgets subclass StatefulWidget.
Type of widgets
Stateful widgets are useful when the part of the user interface you are
describing can change dynamically. User interfaces need to respond to a
variety of things:
The user doing something in the user interface.
Receiving data from another computer.
Time passing.
This is what Stateful Widgets are for. They store data (state) in an associated
State class and they can respond when that data (state) changes as the result
of the user doing something.
Stateful widgets
Stateful widgets
We can split the Flutter widget into two categories
 Visible (Output and Input)
 Invisible (Layout and Control)
Type of widgets
The visible widgets are related to the user input and output data. Some of the
important types of this widget are:
• Text – A Text widget holds some text to display on the screen.
We can align the text widget by using textAlign property, and style property allow
the customization of Text that includes font, font weight, font style, letter spacing,
color, and many more.
The visible widgets
new Text( 'Hello, Skillologies!’,
textAlign: TextAlign.center,
style: new TextStyle(fontWeight: FontWeight.bold), )
//FlatButton Example
new FlatButton( child: Text("Click here"),
onPressed: () { // Do something here }, ),
new Icon(
Icons.add,
size: 34.0,
)
Image.network("https://media.ed.smedia.com/bmw/m3/2018/oem/2018.jpg")
Image.asset("assets/smiley.png")
The visible widgets
The invisible widgets are related to the layout and control of widgets. It provides
controlling how the widgets actually behave and how they will look onto the screen.
Some of the important types of these widgets are:
• Column
A column widget is a type of widget that arranges all its children's widgets in a
vertical alignment.
Widget build(BuildContext context) {
return Center(
child:
Column(children:
[ Text(make), Text(model), Image.network(imageSrc) ]
));
Invisible Widget
Type of Layout Widgets
Topic to Search

More Related Content

PPTX
Mobile Applications Development class 03-starting with flutter
Dr. Mazin Mohamed alkathiri
 
PPTX
FlutterArchitecture FlutterDevelopement (1).pptx
hw813301
 
PPTX
FlutterArchitecture FlutterArchitecture.ppt
KevinNemo
 
PDF
Basic Introduction Flutter Framework.pdf
PhanithLIM
 
PDF
Introduction to flutter
Wan Muzaffar Wan Hashim
 
PPTX
iOS app dev Training - Session1
Hussain Behestee
 
PPTX
Mobile Application Development class 003
Dr. Mazin Mohamed alkathiri
 
PDF
Developer Student Clubs NUK - Flutter for Beginners
Jiaxuan Lin
 
Mobile Applications Development class 03-starting with flutter
Dr. Mazin Mohamed alkathiri
 
FlutterArchitecture FlutterDevelopement (1).pptx
hw813301
 
FlutterArchitecture FlutterArchitecture.ppt
KevinNemo
 
Basic Introduction Flutter Framework.pdf
PhanithLIM
 
Introduction to flutter
Wan Muzaffar Wan Hashim
 
iOS app dev Training - Session1
Hussain Behestee
 
Mobile Application Development class 003
Dr. Mazin Mohamed alkathiri
 
Developer Student Clubs NUK - Flutter for Beginners
Jiaxuan Lin
 

Similar to App_development22222222222222222222.pptx (20)

PPTX
Mobile Application Development class 006
Dr. Mazin Mohamed alkathiri
 
PDF
Android Development using Flutter: From fundamentals to advanced
Lakshay14663
 
PPTX
Mobile Application Development class 002
Dr. Mazin Mohamed alkathiri
 
PDF
Introduction to Andriod Studio Lecture note: Android Development Lecture 1.pdf
AliyuIshaq2
 
PDF
22Flutter.pdf
dbaman
 
PPT
Android Tutorial
Fun2Do Labs
 
PDF
What Is BuildContext In Flutter And It's Importance
Andolasoft Inc
 
PPTX
Flutter vs ReactNative
Sumit Sahoo
 
PPTX
pebble - Building apps on pebble
Aniruddha Chakrabarti
 
PPTX
603848771-Lecture-1-Intro-to-Flutter-and-Dart.pptx
FarhanGhafoor7
 
PPT
View groups containers
Mani Selvaraj
 
PDF
flutteragency-com-handling-events-and-user-input-in-flutter-.pdf
RubenGray1
 
PDF
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
IMC Institute
 
DOCX
Chapter 1-Note.docx
TigistTilahun1
 
PDF
Cross Platform Mobile Development using Flutter by Wei Meng Lee at Mobile foc...
DevClub_lv
 
PPTX
Flutter Introduction and Architecture
Jenish MS
 
DOCX
Android Tutorial For Beginners Part-1
Amit Saxena
 
PPTX
Lecture -Introduction to Flutter and Dart.pptx
FarhanGhafoor7
 
PDF
Hello Flutter
rihannakedy
 
DOCX
unit 4.docx
Sadhana Sreekanth
 
Mobile Application Development class 006
Dr. Mazin Mohamed alkathiri
 
Android Development using Flutter: From fundamentals to advanced
Lakshay14663
 
Mobile Application Development class 002
Dr. Mazin Mohamed alkathiri
 
Introduction to Andriod Studio Lecture note: Android Development Lecture 1.pdf
AliyuIshaq2
 
22Flutter.pdf
dbaman
 
Android Tutorial
Fun2Do Labs
 
What Is BuildContext In Flutter And It's Importance
Andolasoft Inc
 
Flutter vs ReactNative
Sumit Sahoo
 
pebble - Building apps on pebble
Aniruddha Chakrabarti
 
603848771-Lecture-1-Intro-to-Flutter-and-Dart.pptx
FarhanGhafoor7
 
View groups containers
Mani Selvaraj
 
flutteragency-com-handling-events-and-user-input-in-flutter-.pdf
RubenGray1
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
IMC Institute
 
Chapter 1-Note.docx
TigistTilahun1
 
Cross Platform Mobile Development using Flutter by Wei Meng Lee at Mobile foc...
DevClub_lv
 
Flutter Introduction and Architecture
Jenish MS
 
Android Tutorial For Beginners Part-1
Amit Saxena
 
Lecture -Introduction to Flutter and Dart.pptx
FarhanGhafoor7
 
Hello Flutter
rihannakedy
 
unit 4.docx
Sadhana Sreekanth
 
Ad

More from sameehamoogab (10)

PPTX
App_development33333333333333333333.pptx
sameehamoogab
 
PPTX
AI444444444444444444444444444444444.pptx
sameehamoogab
 
PPTX
App_development55555555555555555555.pptx
sameehamoogab
 
PPTX
App_development44444444444444444444.pptx
sameehamoogab
 
PPTX
AI111111111111111111111111111111111.pptx
sameehamoogab
 
PPTX
App_development44444444444444444444.pptx
sameehamoogab
 
PPT
cs480-244444444444444444444444444444.ppt
sameehamoogab
 
PPTX
College Lessons with Cycle Diagrams by Slidesgo.pptx
sameehamoogab
 
PPT
Describing syntax and semantics66666.ppt
sameehamoogab
 
PPT
PL6666666666666666666666666666666666.ppt
sameehamoogab
 
App_development33333333333333333333.pptx
sameehamoogab
 
AI444444444444444444444444444444444.pptx
sameehamoogab
 
App_development55555555555555555555.pptx
sameehamoogab
 
App_development44444444444444444444.pptx
sameehamoogab
 
AI111111111111111111111111111111111.pptx
sameehamoogab
 
App_development44444444444444444444.pptx
sameehamoogab
 
cs480-244444444444444444444444444444.ppt
sameehamoogab
 
College Lessons with Cycle Diagrams by Slidesgo.pptx
sameehamoogab
 
Describing syntax and semantics66666.ppt
sameehamoogab
 
PL6666666666666666666666666666666666.ppt
sameehamoogab
 
Ad

Recently uploaded (20)

PDF
Phylum Arthropoda: Characteristics and Classification, Entomology Lecture
Miraj Khan
 
PDF
Study Material and notes for Women Empowerment
ComputerScienceSACWC
 
PDF
The Picture of Dorian Gray summary and depiction
opaliyahemel
 
PPT
Python Programming Unit II Control Statements.ppt
CUO VEERANAN VEERANAN
 
PPTX
Dakar Framework Education For All- 2000(Act)
santoshmohalik1
 
DOCX
Unit 5: Speech-language and swallowing disorders
JELLA VISHNU DURGA PRASAD
 
PPTX
An introduction to Prepositions for beginners.pptx
drsiddhantnagine
 
PPTX
CDH. pptx
AneetaSharma15
 
PDF
What is CFA?? Complete Guide to the Chartered Financial Analyst Program
sp4989653
 
PPTX
Odoo 18 Sales_ Managing Quotation Validity
Celine George
 
PDF
Sunset Boulevard Student Revision Booklet
jpinnuck
 
PDF
Virat Kohli- the Pride of Indian cricket
kushpar147
 
DOCX
Action Plan_ARAL PROGRAM_ STAND ALONE SHS.docx
Levenmartlacuna1
 
DOCX
SAROCES Action-Plan FOR ARAL PROGRAM IN DEPED
Levenmartlacuna1
 
PPTX
HISTORY COLLECTION FOR PSYCHIATRIC PATIENTS.pptx
PoojaSen20
 
PDF
RA 12028_ARAL_Orientation_Day-2-Sessions_v2.pdf
Seven De Los Reyes
 
PDF
The-Invisible-Living-World-Beyond-Our-Naked-Eye chapter 2.pdf/8th science cur...
Sandeep Swamy
 
PDF
UTS Health Student Promotional Representative_Position Description.pdf
Faculty of Health, University of Technology Sydney
 
PPTX
Care of patients with elImination deviation.pptx
AneetaSharma15
 
PPTX
Tips Management in Odoo 18 POS - Odoo Slides
Celine George
 
Phylum Arthropoda: Characteristics and Classification, Entomology Lecture
Miraj Khan
 
Study Material and notes for Women Empowerment
ComputerScienceSACWC
 
The Picture of Dorian Gray summary and depiction
opaliyahemel
 
Python Programming Unit II Control Statements.ppt
CUO VEERANAN VEERANAN
 
Dakar Framework Education For All- 2000(Act)
santoshmohalik1
 
Unit 5: Speech-language and swallowing disorders
JELLA VISHNU DURGA PRASAD
 
An introduction to Prepositions for beginners.pptx
drsiddhantnagine
 
CDH. pptx
AneetaSharma15
 
What is CFA?? Complete Guide to the Chartered Financial Analyst Program
sp4989653
 
Odoo 18 Sales_ Managing Quotation Validity
Celine George
 
Sunset Boulevard Student Revision Booklet
jpinnuck
 
Virat Kohli- the Pride of Indian cricket
kushpar147
 
Action Plan_ARAL PROGRAM_ STAND ALONE SHS.docx
Levenmartlacuna1
 
SAROCES Action-Plan FOR ARAL PROGRAM IN DEPED
Levenmartlacuna1
 
HISTORY COLLECTION FOR PSYCHIATRIC PATIENTS.pptx
PoojaSen20
 
RA 12028_ARAL_Orientation_Day-2-Sessions_v2.pdf
Seven De Los Reyes
 
The-Invisible-Living-World-Beyond-Our-Naked-Eye chapter 2.pdf/8th science cur...
Sandeep Swamy
 
UTS Health Student Promotional Representative_Position Description.pdf
Faculty of Health, University of Technology Sydney
 
Care of patients with elImination deviation.pptx
AneetaSharma15
 
Tips Management in Odoo 18 POS - Odoo Slides
Celine George
 

App_development22222222222222222222.pptx

  • 2. Outline • What is Flutter • Flutter Application Project • Widgets • The widget tree • Code in Default Application • Type of widgets
  • 3. What is Flutter? • Flutter is not a language (like JavaScript, for example). Flutter uses Dart for its language. • Flutter is Google’s mobile SDK / UI framework that enables developers to build native apps that run on Android and iOS devices. Developers write code in a single codebase that works on both platforms. • In Dart, you don’t have to develop everything from scratch. There is a packaging system where developers can develop packages and publish them. Other people can then use these packages.
  • 4. Flutter Application Project • The purpose of this flutter application is to take a look at the default Flutter application, examine the project files and how a default Flutter project is organized.
  • 5. import 'package:flutter/material.dart’; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Hello World Demo Application’, theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Home page'), ); } } Default Flutter App
  • 6. Default Flutter App class MyHomePage extends StatelessWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(this.title), ), body: Center( child: Text( 'Hello World', ) ), ); } }
  • 7. the output of the application is as follows:
  • 8. Whenever we build a user interface in Flutter, it is composed of Widgets. Putting your widgets together is called Composition. Widgets Widgets are basically user interface components used to create the user interface of the application.
  • 9. 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. This composability feature helps us to create a user interface of any complexity. For example, the widget hierarchy of the hello world application Widgets
  • 11. Code in Default Application void main() => runApp(MyApp()); • Every Dart app must start with a main function as a starting point. In this case the main function creates an instance of the MyApp object, a StatelessWidget. The method ‘runApp’ accepts an instance of a widget (in this case an instance of MyApp) and uses it as the root Widget of the App, rendering it to fit the screen, taking up all the available space.  A main function
  • 12.  MyApp Widget • The MyApp object is a StatelessWidget. It sets up a Material App that contains a MyHomePage widget. The MaterialApp widget is a built-in Flutter widget that serves as the container for your whole app and its Widgets. Code in Default Application class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Hello World Demo Application’, theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Home page'), ); } }
  • 13.  MyHomePage Widget 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. The Center widget has a property, Child, which refers the actual content and it is build using Text widget. Code in Default Application Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(this.title), ), body: Center( child: Text( 'Hello World', ) ),);
  • 14.  We can classify the widgets based on ‘state’ that means ‘data contained in the widget’.  The rest of the widgets are used to display something, not interact with the user. That is stateless widgets such as Icon, IconButton, and Text are examples of stateless widgets. Stateless widgets subclass StatelessWidget.  A stateful widget is dynamic: for example, it can change its appearance in response to events triggered by user interactions or when it receives data.  Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets. Stateful widgets subclass StatefulWidget. Type of widgets
  • 15. Stateful widgets are useful when the part of the user interface you are describing can change dynamically. User interfaces need to respond to a variety of things: The user doing something in the user interface. Receiving data from another computer. Time passing. This is what Stateful Widgets are for. They store data (state) in an associated State class and they can respond when that data (state) changes as the result of the user doing something. Stateful widgets
  • 17. We can split the Flutter widget into two categories  Visible (Output and Input)  Invisible (Layout and Control) Type of widgets
  • 18. The visible widgets are related to the user input and output data. Some of the important types of this widget are: • Text – A Text widget holds some text to display on the screen. We can align the text widget by using textAlign property, and style property allow the customization of Text that includes font, font weight, font style, letter spacing, color, and many more. The visible widgets new Text( 'Hello, Skillologies!’, textAlign: TextAlign.center, style: new TextStyle(fontWeight: FontWeight.bold), )
  • 19. //FlatButton Example new FlatButton( child: Text("Click here"), onPressed: () { // Do something here }, ), new Icon( Icons.add, size: 34.0, ) Image.network("https://media.ed.smedia.com/bmw/m3/2018/oem/2018.jpg") Image.asset("assets/smiley.png") The visible widgets
  • 20. The invisible widgets are related to the layout and control of widgets. It provides controlling how the widgets actually behave and how they will look onto the screen. Some of the important types of these widgets are: • Column A column widget is a type of widget that arranges all its children's widgets in a vertical alignment. Widget build(BuildContext context) { return Center( child: Column(children: [ Text(make), Text(model), Image.network(imageSrc) ] )); Invisible Widget
  • 21. Type of Layout Widgets Topic to Search