Write your first hello world app in Flutter. This is a follow along PPT for Flutter Festival Bhopal. Conducted and organized by GDSC UIT RGPV and Flutter Bhopal 2022

1. Hands on Flutter
Apoorv Pandey
Organizer: Flutter Bhopal
@apoorvpandey0
Create your first Flutter app
Week 1

2. Contents
What all we’ll cover today
1. Quick recap
2. Flutter app architecture
3. Fundamental widgets in Flutter
4. Code along session and QnA

3. • Flutter is developed by Google
• It is open sourced
• Flutter provides a wide range of
widgets for ex. Text,Image,Card
etc.
• Flutter is a cross-platform
application development framework.
• It allows us to create applications
for both Android and iOS,web,
desktop using a single codebase.

5. Objective-C
Swift
iOS

7. Skia is a 2D rendering engine written in C++ used in Google
Chrome and Mozilla Firefox. Flutter requests a window from
the underlying OS and entirely manages its own content
in Skia using Dart. This means that all UI logic such as
scrolling, touch events and animations have to be re-
implemented in Flutter.

8. v
Everything is a widget in
Flutter

9. Essential Widgets
Let’s learn some essential widgets
1. Scaffold
2. App Bar
3. Bottom nagivation bar
4. Drawer
5. Floating action button

10. App Bar
Bottom
navigation bar
Body

11. Image
Grid
Text
Stack
Row
Scaffold
MaterialApp
Switch
Divider
Icons

12. import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:
Scaffold(
appBar: AppBar(
title: Text("Hello2"),
),
body: Text("This is my first application")),
);
}
}

13. Scaffold(
appBar: AppBar(
title: Text("Hello2"),
), // Appbar closes
body: Center(
child: Text(
"This is my first application",
style: TextStyle(fontSize: 25),
) // Text closes
) // Center closes
) // Scaffold closes

14. •Text Widget properties
•String
•Style
•Font size
•Color
•Background color
•Letter spacing
•Word spacing
•Decoration
•Decoration color
•Decoration thickness
•Softwrap
•overflow
What we’ll cover in this
lecture:
Text widget

15. Scaffold(
appBar: AppBar(
title: Text(“My pet Squirrel"),
), // Appbar closes
body: Center(
child: Image.network(“URL")
) // Center closes
) // Scaffold closes

16. Column
This widget arranges its children in a vertical
direction on the screen
Main Axis
Cross Axis

17. body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.network(“url1"),
Image.network(“url2"),
],
)

18. Main Axis
Cross Axis
Row
This widget arranges its children in a horizontal
direction on the screen

19. Row and column
Nesting

20. Thank you!