Flutter Fundamentals Explained
1. Stateless vs Stateful Widgets
Stateless Widget � (Immutable)
A widget that cannot change its state once built.
class MyText extends StatelessWidget {
final String text;
const MyText({required [Link]});
@override
Widget build(BuildContext context) {
return Text(text);
}
}
Characteristics:
● Immutable (once created, can't change)
● No internal state
● Builds UI based on constructor parameters only
● Efficient and lightweight
When to use: For static content that doesn't change (text, icons, images)
Stateful Widget � (Mutable)
A widget that can change its state and rebuild when needed.
class Counter extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int count = 0;
void increment() {
setState(() {
count++;
});
}
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: increment,
child: Text('Count: $count'),
);
}
}
Characteristics:
● Mutable (can change over time)
● Maintains internal state
● Rebuilds when setState() is called
● More complex than Stateless
When to use: For dynamic content that changes (counters, forms, animations)
2. Main Function in Flutter
The entry point of every Flutter app - similar to main() in other languages.
void main() {
runApp(MyApp());
}
Purpose:
● First function that executes
● Initializes the Flutter framework
● Calls runApp() with the root widget
3. runApp() Function
Purpose: Attaches the given widget to the screen as the root of the widget tree.
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('My App')),
body: Center(child: Text('Hello World')),
),
),
);
}
What it does:
● Makes the widget the root of the hierarchy
● Inflates the widget tree
● Attaches to the screen
● Starts the rendering process
4. MaterialApp Widget
Provides Material Design components and styling to your app.
MaterialApp(
title: 'My App',
theme: ThemeData(primarySwatch: [Link]),
home: MyHomePage(),
routes: {
'/details': (context) => DetailsPage(),
},
)
Key features:
● Theme management
● Navigation/routing
● Localization
● Scaffold messaging
● Material Design components
Why needed: Without it, you can't use Material Design widgets like AppBar, Scaffold,
etc.
5. Build Function
Purpose: Describes how to display the widget based on its current state.
@override
Widget build(BuildContext context) {
return Container(
child: Text('Hello World'),
);
}
Characteristics:
Called automatically when widget needs to rebuild
Must return a widget
Should be pure (no side effects)
Fast and efficient
6. Scaffold
A layout structure that implements Material Design visual layout.
Scaffold(
appBar: AppBar(title: Text('My Page')),
body: Center(child: Text('Content')),
drawer: Drawer(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon([Link]),
),
bottomNavigationBar: BottomNavigationBar(
items: [/* ... */],
),
)
Provides:
● App bar
● Body content
● Drawer
● Floating action button
● Bottom navigation
● Snackbars
7. AppBar
A top bar that follows Material Design guidelines.
AppBar(
title: Text('My App'),
actions: [
IconButton(icon: Icon([Link]), onPressed: () {}),
IconButton(icon: Icon([Link]), onPressed: () {}),
],
backgroundColor: [Link],
elevation: 4.0,
)
Common properties:
● title: Main title widget
● actions: Right-side buttons
● backgroundColor: App bar color
● elevation: Shadow depth
● leading: Left-side widget (back button, menu)
Complete Example
import 'package:flutter/material. ';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
Text('You have pushed the button this many times:'),
Text('$_counter', style:
[Link](context).textTheme.headline4),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon([Link]),
),
);
}
}
This example shows all the concepts working together:
● main() and runApp()
● MaterialApp for theme and routing
● StatefulWidget for mutable state
● Scaffold for layout structure
● AppBar for the top bar
● build() method for rendering