Welcome to Day 6 of the "Hundred Days of Flutter" course! Today, we'll dive into Flutter's widget system, starting with the widget tree and stateless widgets. This is where we begin building actual Flutter applications!
In Flutter, everything is a widget. The widget tree is a hierarchical structure that represents your app's UI. Each widget can contain other widgets, creating a tree-like structure.
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('My First App'),
),
body: Center(
child: Text('Hello, Flutter!'),
),
),
);
}
}In this example:
MyApp is the root widgetMaterialApp provides the app's theme and navigationScaffold provides the basic app structureAppBar is the top barCenter centers its child widgetText displays textStateless widgets are widgets that don't maintain any state. They are immutable and rebuild only when their parent widget rebuilds.
class WelcomeCard extends StatelessWidget {
final String name;
const WelcomeCard({
super.key,
required this.name,
});
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Welcome, $name!',
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
// Button pressed
},
child: const Text('Get Started'),
),
],
),
),
);
}
}Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8),
),
child: const Center(
child: Text('Container'),
),
)Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star),
],
)
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('First'),
Text('Second'),
Text('Third'),
],
)Stack(
children: [
Container(
color: Colors.blue,
width: 200,
height: 200,
),
Positioned(
top: 20,
left: 20,
child: Container(
color: Colors.red,
width: 100,
height: 100,
),
),
],
)Widgets have various properties that control their appearance and behavior:
Container(
width: 200,
height: 200,
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 8,
offset: const Offset(0, 4),
),
],
),
child: const Text(
'Styled Container',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
)Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
color: Colors.red,
),
Container(
height: 100,
color: Colors.blue,
),
],
)Flutter provides two powerful features for development:
Let's test your understanding of today's concepts:
What is the main difference between StatelessWidget and StatefulWidget?
Which widget is used to create a basic app structure with an app bar and body?
What is the purpose of the build method in a StatelessWidget?
Create a profile card widget that displays a user's information:
ProfileCard stateless widgetHere's a starting point:
class ProfileCard extends StatelessWidget {
final String name;
final String bio;
final String avatarUrl;
const ProfileCard({
super.key,
required this.name,
required this.bio,
required this.avatarUrl,
});
@override
Widget build(BuildContext context) {
return Card(
margin: const EdgeInsets.all(16),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(
radius: 50,
backgroundImage: NetworkImage(avatarUrl),
),
const SizedBox(height: 16),
Text(
name,
style: Theme.of(context).textTheme.headlineSmall,
),
const SizedBox(height: 8),
Text(
bio,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyLarge,
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.facebook),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.twitter),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.instagram),
onPressed: () {},
),
],
),
],
),
),
);
}
}Tomorrow, we'll explore StatefulWidgets and learn how to create interactive UI elements!
Learn the fundamentals of Object-Oriented Programming in Dart, including classes, inheritance, interfaces, and mixins to build well-structured Flutter applications.
Start Previous DayMaster Flutter's layout widgets including Row, Column, Expanded, and Flexible to create responsive and well-structured user interfaces.
Start Next Day