SlideShare a Scribd company logo
1 of 17
Introduction to FLutter:
Widgets
GDSC UoN Mobile Track
What Is Flutter
Flutter is a framework that allows developers to create
applications that run on different platforms e.g Android,
IOS, Web, Windows, Linux e.t.c from one codebase.
It uses the Dart programming language.
Why Use Flutter
Previously if one wanted to create an app that would be on
both Android and IOS for example one would have needed to
write two separate apps on two different codebases with 2
different languages.
This made is difficult to ensure that the apps work and feel
the same on both platforms and it would be difficult to
update the app on the different platforms.
Why Use Flutter
With Flutter you can now define the interface of your
application from one codebase using one language.
This makes it easier to make your application look the same
on different platforms because its all from the same code.
This makes it easier to make changes to the application
because you are only looking at one codebase.
Install Flutter
To install go to: https://docs.flutter.dev/get-
started/install
Select the platform you will be building the Flutter apps on
and follow the instructions.
Verify if flutter has installed correctly by running flutter
doctor -v on the terminal or command prompt
You’ll need a text editor like VS Code or an IDE like Android
Studio to write and run Flutter
Flutter doctor -v output if you’ve installed flutter correctly
Possible Install Issues
If you can’t run flutter doctor -v because the flutter
command is not known a possible issue is that you have not
added flutter to your PATH correctly. The solution is to try
adding flutter to your path again.
If you have issues with the Android SDK the easiest solution
is to install Android Studio and from Android Studio install
the required SDK.
If there is a problem with android licences run the command
that is recommended by flutter doctor
Possible Install Issues
If you don’t have chrome installed flutter doctor would
return some issues. Install chrome
How To Create A Flutter Project On VS Code
How To Make Apps On FLutter
In Flutter everything that is shown on the screen is a
Widget. Widgets can be thought of as the parts of the UI of
your application.
ExaMPLES
Types Of Widgets
There are largely 3 types of widgets:
1. Widgets that show something on the screen like text or an
image.
2. Widgets that arrange things on the screen. These are
called Layout Widgets.
3. Widgets that add style like color or space between
things.
Widgets That Display Content
You can find a list of useful widgets at:
https://docs.flutter.dev/ui/widgets
Some common widgets include:
1. Text() - for adding text
2. Image() - for placing images
3. ElevatedButton() - for buttons
4. Form() - for creating forms
Layout Widgets
You can find an exhaustive list of Flutter’s layout widgets
at https://docs.flutter.dev/ui/widgets/layout
Some common layout widgets are:
1. Row() - for displaying items as a row
2. Column() - for displaying items as a column
3. ListView() - for displaying items as a scrollable column
or row
4. GridView() - to place items in a grid
5. Container() - it is used to group related widgets
Widgets That Add Style To A Widget
Some widgets that affect the style of your app include:
1. Color() - to give something a Color
2. Padding() - to give a padding to child element
3. Center() - to center widgets
4. Align() - to align widgets in a parent widget
DEMO

More Related Content

Similar to Introduction To Flutter - Widgets.pptx

flutter-general-report.docx
flutter-general-report.docxflutter-general-report.docx
flutter-general-report.docx
KuntalSasmal1
 
Android installation guide
Android installation guideAndroid installation guide
Android installation guide
magicshui
 

Similar to Introduction To Flutter - Widgets.pptx (20)

Flutter Development Company
Flutter Development CompanyFlutter Development Company
Flutter Development Company
 
flutter-general-report.docx
flutter-general-report.docxflutter-general-report.docx
flutter-general-report.docx
 
DSC IIITL Flutter Workshop
DSC IIITL Flutter WorkshopDSC IIITL Flutter Workshop
DSC IIITL Flutter Workshop
 
Android software development – the first few hours
Android software development – the first few hoursAndroid software development – the first few hours
Android software development – the first few hours
 
How does flutter cuts app development cost?
How does flutter cuts app development cost?How does flutter cuts app development cost?
How does flutter cuts app development cost?
 
Android
AndroidAndroid
Android
 
Build run first web application using flutter for web
Build run first web application using flutter for webBuild run first web application using flutter for web
Build run first web application using flutter for web
 
Why Should Windows Users Turn Their Attention To Flutter 2.10_.pdf
Why Should Windows Users Turn Their Attention To Flutter 2.10_.pdfWhy Should Windows Users Turn Their Attention To Flutter 2.10_.pdf
Why Should Windows Users Turn Their Attention To Flutter 2.10_.pdf
 
Top Benefits of Flutter App Development Services - An Insightful Blog
Top Benefits of Flutter App Development Services - An Insightful BlogTop Benefits of Flutter App Development Services - An Insightful Blog
Top Benefits of Flutter App Development Services - An Insightful Blog
 
How Can Flutter App Benefit Your Business Processes.pdf
How Can Flutter App Benefit Your Business Processes.pdfHow Can Flutter App Benefit Your Business Processes.pdf
How Can Flutter App Benefit Your Business Processes.pdf
 
Getting started with android dev and test perspective
Getting started with android   dev and test perspectiveGetting started with android   dev and test perspective
Getting started with android dev and test perspective
 
Flutter enable windows desktop apps for developers
Flutter enable windows desktop apps for developersFlutter enable windows desktop apps for developers
Flutter enable windows desktop apps for developers
 
Mobile Application Development class 001
Mobile Application Development class 001Mobile Application Development class 001
Mobile Application Development class 001
 
Why is Flutter now Trendsetter in mobile app development .
Why is Flutter now Trendsetter in mobile app development .Why is Flutter now Trendsetter in mobile app development .
Why is Flutter now Trendsetter in mobile app development .
 
Flutter Optimization Techniques to Improve Existing App Results.pdf
Flutter Optimization Techniques to Improve Existing App Results.pdfFlutter Optimization Techniques to Improve Existing App Results.pdf
Flutter Optimization Techniques to Improve Existing App Results.pdf
 
An Introduction to Universal Windows Apps
An Introduction to Universal Windows AppsAn Introduction to Universal Windows Apps
An Introduction to Universal Windows Apps
 
How Can Flutter App Benefit Your Business Processes.
How Can Flutter App Benefit Your Business Processes.How Can Flutter App Benefit Your Business Processes.
How Can Flutter App Benefit Your Business Processes.
 
How Can Flutter App Benefit Your Business Processes.pdf
How Can Flutter App Benefit Your Business Processes.pdfHow Can Flutter App Benefit Your Business Processes.pdf
How Can Flutter App Benefit Your Business Processes.pdf
 
Android installation guide
Android installation guideAndroid installation guide
Android installation guide
 
Flutter app development company USA | XcelTec
Flutter app development company USA | XcelTecFlutter app development company USA | XcelTec
Flutter app development company USA | XcelTec
 

Recently uploaded

Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
EADTU
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
中 央社
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
EADTU
 

Recently uploaded (20)

Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
 
OSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & SystemsOSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & Systems
 
e-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopale-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopal
 
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptxAnalyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
 
Book Review of Run For Your Life Powerpoint
Book Review of Run For Your Life PowerpointBook Review of Run For Your Life Powerpoint
Book Review of Run For Your Life Powerpoint
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
 
ANTI PARKISON DRUGS.pptx
ANTI         PARKISON          DRUGS.pptxANTI         PARKISON          DRUGS.pptx
ANTI PARKISON DRUGS.pptx
 
Including Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdfIncluding Mental Health Support in Project Delivery, 14 May.pdf
Including Mental Health Support in Project Delivery, 14 May.pdf
 
Trauma-Informed Leadership - Five Practical Principles
Trauma-Informed Leadership - Five Practical PrinciplesTrauma-Informed Leadership - Five Practical Principles
Trauma-Informed Leadership - Five Practical Principles
 
Basic Civil Engineering notes on Transportation Engineering & Modes of Transport
Basic Civil Engineering notes on Transportation Engineering & Modes of TransportBasic Civil Engineering notes on Transportation Engineering & Modes of Transport
Basic Civil Engineering notes on Transportation Engineering & Modes of Transport
 
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
 
An overview of the various scriptures in Hinduism
An overview of the various scriptures in HinduismAn overview of the various scriptures in Hinduism
An overview of the various scriptures in Hinduism
 
Mattingly "AI & Prompt Design: Named Entity Recognition"
Mattingly "AI & Prompt Design: Named Entity Recognition"Mattingly "AI & Prompt Design: Named Entity Recognition"
Mattingly "AI & Prompt Design: Named Entity Recognition"
 
ESSENTIAL of (CS/IT/IS) class 07 (Networks)
ESSENTIAL of (CS/IT/IS) class 07 (Networks)ESSENTIAL of (CS/IT/IS) class 07 (Networks)
ESSENTIAL of (CS/IT/IS) class 07 (Networks)
 
The Story of Village Palampur Class 9 Free Study Material PDF
The Story of Village Palampur Class 9 Free Study Material PDFThe Story of Village Palampur Class 9 Free Study Material PDF
The Story of Village Palampur Class 9 Free Study Material PDF
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
 
PSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxPSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptx
 
Supporting Newcomer Multilingual Learners
Supporting Newcomer  Multilingual LearnersSupporting Newcomer  Multilingual Learners
Supporting Newcomer Multilingual Learners
 
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading RoomSternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
Sternal Fractures & Dislocations - EMGuidewire Radiology Reading Room
 

Introduction To Flutter - Widgets.pptx

  • 2. What Is Flutter Flutter is a framework that allows developers to create applications that run on different platforms e.g Android, IOS, Web, Windows, Linux e.t.c from one codebase. It uses the Dart programming language.
  • 3. Why Use Flutter Previously if one wanted to create an app that would be on both Android and IOS for example one would have needed to write two separate apps on two different codebases with 2 different languages. This made is difficult to ensure that the apps work and feel the same on both platforms and it would be difficult to update the app on the different platforms.
  • 4. Why Use Flutter With Flutter you can now define the interface of your application from one codebase using one language. This makes it easier to make your application look the same on different platforms because its all from the same code. This makes it easier to make changes to the application because you are only looking at one codebase.
  • 5. Install Flutter To install go to: https://docs.flutter.dev/get- started/install Select the platform you will be building the Flutter apps on and follow the instructions. Verify if flutter has installed correctly by running flutter doctor -v on the terminal or command prompt You’ll need a text editor like VS Code or an IDE like Android Studio to write and run Flutter
  • 6. Flutter doctor -v output if you’ve installed flutter correctly
  • 7. Possible Install Issues If you can’t run flutter doctor -v because the flutter command is not known a possible issue is that you have not added flutter to your PATH correctly. The solution is to try adding flutter to your path again. If you have issues with the Android SDK the easiest solution is to install Android Studio and from Android Studio install the required SDK. If there is a problem with android licences run the command that is recommended by flutter doctor
  • 8. Possible Install Issues If you don’t have chrome installed flutter doctor would return some issues. Install chrome
  • 9. How To Create A Flutter Project On VS Code
  • 10. How To Make Apps On FLutter In Flutter everything that is shown on the screen is a Widget. Widgets can be thought of as the parts of the UI of your application.
  • 12.
  • 13. Types Of Widgets There are largely 3 types of widgets: 1. Widgets that show something on the screen like text or an image. 2. Widgets that arrange things on the screen. These are called Layout Widgets. 3. Widgets that add style like color or space between things.
  • 14. Widgets That Display Content You can find a list of useful widgets at: https://docs.flutter.dev/ui/widgets Some common widgets include: 1. Text() - for adding text 2. Image() - for placing images 3. ElevatedButton() - for buttons 4. Form() - for creating forms
  • 15. Layout Widgets You can find an exhaustive list of Flutter’s layout widgets at https://docs.flutter.dev/ui/widgets/layout Some common layout widgets are: 1. Row() - for displaying items as a row 2. Column() - for displaying items as a column 3. ListView() - for displaying items as a scrollable column or row 4. GridView() - to place items in a grid 5. Container() - it is used to group related widgets
  • 16. Widgets That Add Style To A Widget Some widgets that affect the style of your app include: 1. Color() - to give something a Color 2. Padding() - to give a padding to child element 3. Center() - to center widgets 4. Align() - to align widgets in a parent widget
  • 17. DEMO