This document summarizes an introduction to Flutter session. It discusses that Flutter is an open-source UI toolkit created by Google that allows building cross-platform apps from a single codebase. It can be used to develop apps for Android, iOS, and web. The session introduces key Flutter concepts like widgets, which are the basic building blocks of all user interfaces. There are visible widgets that appear on screen and invisible layout widgets. It also discusses the Dart programming language and states in Flutter.

1. Welcome to Flutter
Festival Session 1
Hello Hello Hello!
F L U T T E R F E S T I V A L S E S S I O N 1
2022 01
Pratik Jadhav
@pratikjh

2. Flutter is an open-source UI software development
kit created by Google.
It is used to develop cross-platform applications for
Android, iOS, Linux, Mac, Windows, Google Fuchsia,
Web platform, and the web from a single codebase.
F L U T T E R F E S T I V A L S E S S I O N 1
2022 02
So, What is Flutter? 🤔
Okay, Now in simple words.

3. Why Flutter?
Gives you the power of designing beautiful
UI 😎.
Build native cross-platform apps📱with one
programming language and codebase.
Fast, Optimized for Performance ⏱️
.
And Most Importantly, Hot Reload and Hot
Restart 🔥. No more waiting for getting the
app rebuilt, one click is enough.
F L U T T E R F E S T I V A L S E S S I O N 1
2022 03

4. Okay, We got it! Flutter is a
kit 📚 to make apps, But...
Well, It's Dart. Dart is a programming language designed for client
development, such as for the web and mobile apps. It is
developed by Google and can also be used to build server and
desktop applications.
F L U T T E R F E S T I V A L S E S S I O N 1
2022 04
Dart
Which Programming language is
being used?

5. Essential
Terminologies
F L U T T E R F E S T I V A L S E S S I O N 1
2022 05
Widgets
1
Tree
2
State
3
Fundamentals
4

6. There's one term 🥇 often
used in Flutter..
WIDGETS
Simply defined, A Flutter app is everything made
out of Widgets. Everything you see on the screen
is a Widget.
F L U T T E R F E S T I V A L S E S S I O N 1
2022 06

7. Two Types of Widgets
Visible Widgets
F L U T T E R F E S T I V A L S E S S I O N 1
2022 07
Invisible Widgets

8. F L U T T E R F E S T I V A L S E S S I O N 1
2022 08
What are the things that we can
see on the screen??? 🤔
Well, firstly an app bar, and three boxes of
different colors. Right??
YES, You guys are right.. But here's a catch
Whatever you see on the screen are VISIBLE
WIDGETS, but the ones that you don't see are the
LAYOUT WIDGETS, which are required to layout
all the widgets that we see on the screen.

9. What are the different
Widgets?
F L U T T E R F E S T I V A L S E S S I O N 1
2022 09
Text
1
AppBar
2
Elevated Button
3
List Tile
4
Column
1
Row
2
ListView
3
Wrap
4
Container
1

10. Widgets Tree
F L U T T E R F E S T I V A L S E S S I O N 1
2022 10

11. Again, a different
term..... STATES 🤯
In General, State is Information
used by our App.
F L U T T E R F E S T I V A L S E S S I O N 1
2022 11
Okay, such as
App State
Authenticated Users
List of Posts
Widget State
Is Loading Spinner being shown?
User Input Correct?

12. Again... Two Types of States
Stateless
F L U T T E R F E S T I V A L S E S S I O N 1
2022 12
Stateful
Data
(Data can change but
externally)
Widget
UI
(UI gets re-rendered when its
restarted)
Data
(Data can change but
externally)
Widget
UI
(UI gets re-rendered when its
restarted or the local state changes)
Internal State

13. All right, Any
Questions?? 🤔
Enough with slides, Now we
will get our hands dirty with
some code...
F L U T T E R F E S T I V A L S E S S I O N 1
2022 13