Understanding Flutter Widgets: The Basics
Understanding Flutter Widgets: The Basics
In Flutter, everything is a widget—from the layout structures to the elements like text, buttons, and images. Widgets are the building blocks of a Flutter app’s user interface.
🔹 What is a Widget in Flutter?
A widget is a reusable, declarative UI component that describes part of the app's interface. Rather than modifying the UI directly, Flutter rebuilds widgets in response to changes in state.
🧱 Types of Widgets
Widgets in Flutter fall into two main categories:
1. Stateless Widgets
Do not store mutable state.
Used when the UI doesn’t change after it’s built.
Example: Text, Icon, RaisedButton (deprecated in favor of ElevatedButton)
dart
Copy
Edit
class MyTextWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('Hello, Flutter!');
}
}
2. Stateful Widgets
Maintain state that can change during the widget’s lifecycle.
Example: Forms, animations, interactive components
dart
Copy
Edit
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int count = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Count: $count'),
ElevatedButton(
onPressed: () {
setState(() {
count++;
});
},
child: Text('Increment'),
),
],
);
}
}
🔹 Common Built-in Flutter Widgets
Widget Description
Text Displays a string of text
Image Displays images from assets or URLs
Row Displays widgets horizontally
Column Displays widgets vertically
Container Adds padding, margins, borders, etc.
Scaffold Provides structure: app bar, body, etc.
ListView Creates a scrollable list of items
ElevatedButton A material design button
🧩 Widgets Compose Other Widgets
Widgets are nested inside each other in a tree-like structure. For example:
dart
Copy
Edit
Scaffold(
appBar: AppBar(title: Text('My App')),
body: Center(
child: Text('Welcome to Flutter!'),
),
)
Here:
Scaffold is the layout structure.
AppBar is the top bar of the app.
Center centers the child.
Text displays content.
🔁 How Widgets Update
When state changes in a StatefulWidget, you call setState() to trigger a rebuild. Flutter then efficiently updates only the parts of the UI that changed.
📐 Custom Widgets
You can create your own reusable widgets to keep code clean and organized:
dart
Copy
Edit
class CustomCard extends StatelessWidget {
final String title;
CustomCard(this.title);
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: EdgeInsets.all(16),
child: Text(title),
),
);
}
}
Use it like:
dart
Copy
Edit
CustomCard('Hello World');
✅ Key Takeaways
Everything is a widget in Flutter.
Use StatelessWidget when the UI doesn’t change.
Use StatefulWidget when the UI changes dynamically.
Widgets are composed to create flexible layouts.
Custom widgets improve code reusability and readability.
Learn Flutter Training in Hyderabad
Read More
Comments
Post a Comment