The document discusses Android development using Flutter, highlighting its advantages as a customizable, open-source toolkit that supports various platforms from a single codebase. It introduces Dart, the programming language associated with Flutter, and explains fundamental concepts such as widgets, navigators, and the structure of Flutter applications. Key takeaways emphasize Flutter's efficiency and flexibility in building responsive apps with features like widgets and state management.

1. ANDROID DEVELOPMENT
with FLUTTER
GDG TECH WINTER BREAK

2. OPEN
SOURCE
Customizable
and
Widely
supported.
MARKET
SHARE
Powers over 70%
of smartphones
globally.
VERSATILE
Used in phones,
tablets, TVs,
cars, fridges, etc.
Write your
topic or idea
WHY LEARN
ANDROID DEVELOPMENT?

3. Native Development
and Challenges Faced
• Native Development means developing for a specific platform.
• Developers use Java/Kotlin for Android and Swift/Objective-C for iOS.
• But it is TIME INTENSIVE, RESOURCE INTENSIVE and DIFFICULT TO
MANAGE.

4. Enter FLUTTER
The Game Changer
What is Flutter?
• Google's open-source UI toolkit for building natively
compiled apps.
• Works for Android, iOS, Web, and Desktop from a single
codebase.

5. Faster development with Hot Reload.
1
Multi-platform UI.
2
Flutter’s Widgets > Static XML designs.
4
Directly compiles to ARM/x64 code.
3
Backed by Google.
5
Why
Choose
Flutter?

6. Introduction to Dart
A beginner’s guide to Dart language.

7. Dart is a client-optimized programming language for developing fast apps on
any platform.
Features:
- Developed by Google.
- Open-source.
- Used for mobile, web, and desktop applications.
- Closely associated with Flutter for UI development.
What is Dart?

8. Why Learn Dart?
Advantages:
• - Easy to learn, similar to C++ style languages.
• - Supports object-oriented programming.
• - Flexible: Can be compiled into native code or JavaScript.
• - Excellent support for reactive programming.

9. Dart Syntax Basics
•Hello, World! Example:
void main() {
print('Hello, World!');
}
•Variable Declaration:
var name = 'Dart';
int age = 10;

10. Summary and Next Steps
Summary:
- Dart is versatile, easy to learn, and powerful for app
development.
- Key concepts: syntax, data types, functions, control flow.
Next Steps:
- Explore Dart further: classes, asynchronous programming and
Flutter integration.

11. flutter.dev
INSTALLING FLUTTER
Hardware Requirements:

12. FLUTTER
WIDGETS
Learning basics of widgets

13. What is a Widget?
• A widget is the basic building block of a
Flutter app.
• Widgets describe what their view should
look like and are used to define the UI and
its behavior.
• Widgets are combined in a tree-like
structure to build complex UIs.

14. TYPES OF WIDGETS
Stateless
Widget
Stateful
Widget
• Has an immutable
state.
• Can’t change over
time.
• Has a mutable
state.
• Changes appearance
dynamically.

15. How is a
Widget-
Tree
made?

16. MaterialApp
• MaterialApp is the core widget in Flutter for building apps using
Material Design.
• It acts as a wrapper that provides navigation, structure, and basic
app configuration.
• Typically, it defines the app's entry point and manages routes for
screen navigation.

17. Scaffold is a foundational widget in Flutter for implementing Material Design
layouts. It provides:
1.AppBar: A top navigation bar for titles, actions, and more.
2.Body: The main content area.
3.FloatingActionButton: A circular button for primary actions.
4.Drawer: A slide-in navigation menu.
5.BottomNavigationBar: For navigating between major app sections.
Scaffold simplifies the process of creating a consistent and responsive UI.
Scaffold

18. What a
basic
Scaffold
looks like?

19. FLEX LAYOUT WIDGETS
ROW COLUMN STACK
1 2 3

20. BASIC CONCEPTS OF FLEX
Key Properties of Flex Widgets:
• Main Axis: The primary direction (horizontal for Row, vertical for
Column).
• Cross Axis: Perpendicular to the main axis.
Alignment of Flex Widgets:
• MainAxisAlignment: Controls how space is distributed along
main axis.
• CrossAxisAlignment: Controls alignment along cross axis.
:

21. SCROLLABLE WIDGETS
SingleChildScrollView ListView
• Used to make a single
child scrollable
• Used when content is
overflowing the current
screen.
• Renders all at once.
• Can’t make dynamic lists.
• Displays a scrollable
list of items.
• Ideal for dynamic content.
• Can handle long lists.

22. NAVIGATOR 1.0
How Navigation 1.0 Works:
• Screens are added or removed from the stack.
⚬ Push: Add a new screen to the stack.
⚬ Pop: Remove the top screen from the stack.
Core Methods:
• Navigator.push(): Navigate to a new screen.
• Navigator.pop(): Go back to the previous screen.

23. STATEFUL WIDGET
What is a Stateful Widget?
• A widget that can change its state during its lifetime.
• Rebuilds its UI when the state is updated.
Why Use Stateful Widgets?
• For dynamic content that changes based on user interaction or
data updates.
• Examples: Counters, toggle buttons, forms.

24. RESOURCES
Dart Tutorials Dart Basics
Flutter Widgets Flutter Navigato
r

25. Thank you!