Widgets are the fundamental building blocks of a Flutter user interface. In Flutter, the user interface is created by combining widgets together to form a hierarchical structure called the widget tree. Text, images, buttons, layouts, spacing, application bars, screens, and many other parts of an application are represented using widgets.
Flutter's official documentation describes a widget as an immutable description of part of a user interface. Widgets are composed together to create the complete UI, and when relevant state changes, Flutter rebuilds the necessary parts of the widget tree.
For professional Flutter training and practical learning, visit: JustAcademy Flutter Training
To register for a Flutter course demo: Register for Flutter Course Demo
A widget is a reusable building block that describes a part of the user interface or application structure. Flutter applications are created by composing many widgets together.
For example, if you want to create a simple screen containing a heading, an image, and a button, you can use several widgets:
Screen
|
└── Column
|
├── Text
├── Image
└── ElevatedButtonEach element in this structure is represented using a widget.
const Text(
'Hello Flutter',
)Here, Text is a widget responsible for displaying text.
Widgets are important because Flutter uses a widget-based architecture. Instead of creating UI elements using separate markup languages and platform-specific UI components, Flutter developers describe the interface by composing Dart widgets.
One of the most important ideas for beginners is that Flutter uses widgets for both visible UI elements and many structural elements.
For example:
Text displays text.Image displays an image.Icon displays an icon.Row arranges widgets horizontally.Column arranges widgets vertically.Padding adds spacing around a child.Center controls alignment.Container provides layout and decoration capabilities.Therefore, widgets are not limited to things that users can directly see on the screen. Layout and structural behavior can also be represented using widgets.
Widgets are arranged hierarchically. This hierarchy is known as the widget tree. A widget can contain another widget as its child, or a collection of widgets as its children.
MaterialApp
|
└── Scaffold
|
├── AppBar
| └── Text
|
└── Center
|
└── Column
|
├── Text
├── Icon
└── ElevatedButtonIn this example, MaterialApp is at the top of the application hierarchy, while smaller widgets are nested inside other widgets.
Widgets are often described as parent and child widgets. A parent widget contains or controls one or more child widgets.
Center(
child: Text(
'Hello Flutter',
),
)In this example:
Center is the parent widget.Text is the child widget.Some widgets can contain multiple children.
Column(
children: [
Text('Name'),
Text('Email'),
Text('Course'),
],
)Here, Column is the parent and the three Text widgets are its children.
Flutter provides a very large collection of widgets. They can be understood according to their purpose, such as displaying content, arranging content, accepting input, handling interaction, scrolling, styling, and more.
StatelessWidget is used when a widget does not need to manage mutable state internally. Its UI is determined by its configuration and the values supplied to it.
import 'package:flutter/material.dart';
class WelcomeText extends StatelessWidget {
const WelcomeText({super.key});
@override
Widget build(BuildContext context) {
return const Text(
'Welcome to Flutter',
);
}
}void main() {
runApp(
const MaterialApp(
home: Scaffold(
body: Center(
child: WelcomeText(),
),
),
),
);
}The WelcomeText widget simply describes what should be displayed.
A StatefulWidget is used when the UI needs to respond to changing state. Examples include counters, switches, checkboxes, selected tabs, loading indicators, and forms.
class CounterWidget extends StatefulWidget {
const CounterWidget({super.key});
@override
State createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State {
int count = 0;
void increment() {
setState(() {
count++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
'Count: $count',
style: const TextStyle(fontSize: 24),
),
ElevatedButton(
onPressed: increment,
child: const Text('Increase'),
),
],
);
}
}When setState() is called, Flutter knows that the state has changed and can rebuild the relevant widget subtree.
| Feature | StatelessWidget | StatefulWidget |
|---|---|---|
| Mutable state | Does not manage mutable state internally | Works with mutable state through a State object |
| State object | Not required | Uses a separate State object |
| UI changes | Based on configuration and external changes | Can respond to state changes |
| Typical use | Labels, static cards, reusable display components | Counters, forms, switches, interactive screens |
| Example | Text widget | Counter application |
The Text widget displays a string of text.
const Text(
'Hello Flutter',
)const Text(
'Flutter Widgets',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
)const Text(
'Flutter is a UI toolkit.',
textAlign: TextAlign.center,
)The Icon widget displays icons from an icon set.
const Icon(
Icons.home,
size: 40,
)const Icon(
Icons.favorite,
size: 50,
color: Colors.red,
)The Image widget is used to display images.
Image.asset(
'assets/images/logo.png',
)Image.network(
'https://example.com/image.jpg',
)For production applications, network images should generally be handled with appropriate loading, error handling, caching, and accessibility considerations.
Container is a commonly used convenience widget that can combine sizing, positioning, padding, alignment, and decoration.
Container(
width: 200,
height: 100,
color: Colors.blue,
child: const Center(
child: Text(
'Flutter',
style: TextStyle(
color: Colors.white,
),
),
),
)Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(15),
boxShadow: const [
BoxShadow(
blurRadius: 8,
offset: Offset(0, 4),
),
],
),
child: const Text(
'Welcome',
),
)BoxDecoration is used to visually decorate a box, including backgrounds, borders, rounded corners, gradients, and shadows.
Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.grey,
),
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
blurRadius: 10,
offset: Offset(0, 4),
),
],
),
)colorborderborderRadiusboxShadowgradientshapeRow arranges multiple children horizontally.
Row(
children: [
const Icon(Icons.person),
const SizedBox(width: 10),
const Text('John'),
],
)Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('Profile'),
ElevatedButton(
onPressed: () {},
child: const Text('Edit'),
),
],
)Column arranges children vertically.
Column(
children: [
const Text('Name'),
const Text('Email'),
const Text('Course'),
],
)Column(
children: [
const Text('Name'),
const SizedBox(height: 10),
const Text('Email'),
const SizedBox(height: 10),
const Text('Flutter Developer'),
],
)The Center widget positions its child in the center of the available space.
Center(
child: Text(
'Hello Flutter',
),
)Center(
child: Icon(
Icons.flutter_dash,
size: 80,
),
)Padding adds space around its child.
Padding(
padding: const EdgeInsets.all(20),
child: const Text(
'Hello Flutter',
),
)Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 10,
),
child: const Text(
'Flutter',
),
)SizedBox can provide a fixed width or height and is commonly used to create spacing between widgets.
Column(
children: [
const Text('First'),
const SizedBox(height: 20),
const Text('Second'),
],
)Expanded allows a child of a Flex layout such as Row or Column to occupy available space.
Row(
children: [
Expanded(
child: Container(
height: 100,
color: Colors.blue,
),
),
Expanded(
child: Container(
height: 100,
color: Colors.green,
),
),
],
)In this example, the two expanded children share the available horizontal space.
Flexible allows a child in a Flex layout to occupy available space without necessarily forcing it to fill all remaining space in the same way as Expanded.
Row(
children: [
Flexible(
child: Text(
'This is a long piece of text that can adapt to the available space.',
),
),
],
)Stack allows widgets to overlap each other.
Stack(
children: [
Container(
width: 200,
height: 200,
color: Colors.blue,
),
const Positioned(
bottom: 20,
left: 20,
child: Text(
'Flutter',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
],
)Scaffold provides a basic Material Design screen structure. It commonly contains an app bar, body, floating action button, drawer, and bottom navigation bar.
Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: const Center(
child: Text('Welcome'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
)MaterialApp is commonly used as the root widget of a Material Design Flutter application.
MaterialApp(
title: 'Student App',
home: Scaffold(
body: Center(
child: Text('Student Dashboard'),
),
),
)titlehomethemeroutesdebugShowCheckedModeBannerAppBar is commonly used at the top of a Material screen to display a title, navigation controls, and actions.
AppBar(
title: const Text('Flutter App'),
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.search),
),
],
)Flutter provides different button widgets for different interaction and visual requirements.
ElevatedButton(
onPressed: () {
print('Clicked');
},
child: const Text('Submit'),
)TextButton(
onPressed: () {},
child: const Text('Learn More'),
)OutlinedButton(
onPressed: () {},
child: const Text('Cancel'),
)IconButton(
onPressed: () {},
icon: const Icon(Icons.favorite),
)Flutter provides widgets for receiving information from users.
TextField(
decoration: InputDecoration(
labelText: 'Enter your name',
hintText: 'John',
border: OutlineInputBorder(),
),
)Checkbox(
value: true,
onChanged: (value) {
print(value);
},
)Switch(
value: true,
onChanged: (value) {
print(value);
},
)Interactive widgets respond to user actions such as taps, selections, text input, and gestures.
GestureDetector(
onTap: () {
print('Widget tapped');
},
child: Container(
width: 150,
height: 100,
color: Colors.blue,
child: const Center(
child: Text(
'Tap Me',
style: TextStyle(
color: Colors.white,
),
),
),
),
)ListView is used to display a scrollable list of widgets.
ListView(
children: [
ListTile(
leading: const Icon(Icons.person),
title: const Text('Rahul'),
),
ListTile(
leading: const Icon(Icons.person),
title: const Text('Priya'),
),
ListTile(
leading: const Icon(Icons.person),
title: const Text('Amit'),
),
],
)ListView.builder is useful for creating lists from data, particularly when the number of items can be large.
ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(
title: Text('Student ${index + 1}'),
);
},
)GridView displays widgets in a two-dimensional grid.
GridView.count(
crossAxisCount: 2,
children: [
Container(
color: Colors.blue,
child: const Center(
child: Text('Item 1'),
),
),
Container(
color: Colors.green,
child: const Center(
child: Text('Item 2'),
),
),
Container(
color: Colors.orange,
child: const Center(
child: Text('Item 3'),
),
),
Container(
color: Colors.purple,
child: const Center(
child: Text('Item 4'),
),
),
],
)Card is useful for presenting related information in a visually grouped surface.
Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
const Text(
'Student Profile',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
const Text('Flutter Developer'),
],
),
),
)ListTile provides a convenient structure for displaying related information in a row-like format.
ListTile(
leading: const CircleAvatar(
child: Icon(Icons.person),
),
title: const Text('Rahul Sharma'),
subtitle: const Text('Flutter Developer'),
trailing: const Icon(Icons.arrow_forward),
onTap: () {},
)Flutter provides widgets that can control visual appearance and layout.
ContainerPaddingAlignCenterDecoratedBoxOpacityClipRRectTransformThemeFlutter provides widgets for implementing animations and transitions.
AnimatedContainer(
duration: const Duration(seconds: 1),
width: 200,
height: 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(20),
),
)When supported properties change, AnimatedContainer can animate between the old and new values.
The Theme system allows an application to define consistent colors, typography, and other visual properties.
MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
),
),
home: const HomePage(),
)Widgets below the application's theme can access theme information through the surrounding context.
Text(
'Hello',
style: Theme.of(context).textTheme.headlineMedium,
)Flutter also provides Cupertino widgets for interfaces following Apple's platform design language.
import 'package:flutter/cupertino.dart';
void main() {
runApp(
const CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('iOS Style'),
),
child: Center(
child: Text('Hello'),
),
),
),
);
}Flutter's SDK includes both Material and Cupertino design systems.
Developers can create their own widgets instead of using only Flutter's built-in widgets. Custom widgets help make application code reusable and easier to maintain.
class ProfileTitle extends StatelessWidget {
final String name;
const ProfileTitle({
super.key,
required this.name,
});
@override
Widget build(BuildContext context) {
return Text(
name,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
);
}
}ProfileTitle(
name: 'Rahul Sharma',
)Custom widgets can accept constructor parameters so that the same widget can be reused with different data.
Flutter encourages composition. Complex widgets are usually created by combining smaller widgets.
Card
|
└── Padding
|
└── Column
|
├── CircleAvatar
├── SizedBox
├── Text
├── Text
└── ElevatedButtonEach small component has a focused responsibility, while the complete composition produces a more complex UI.
Widgets are configured using constructor parameters called properties or arguments.
Container(
width: 200,
height: 100,
color: Colors.blue,
alignment: Alignment.center,
child: const Text('Hello'),
)Here, the widget receives properties such as:
widthheightcoloralignmentchildFlutter widgets commonly use either child or children.
Use child when a widget accepts one child.
Center(
child: Text('Hello'),
)Use children when a widget accepts multiple child widgets.
Column(
children: [
Text('One'),
Text('Two'),
Text('Three'),
],
)Flutter widgets are immutable descriptions of the UI. This means a widget's configuration does not change after the widget object is created.
When application state changes, Flutter can create new widget descriptions and efficiently update the underlying UI structures.
const Text(
'Hello Flutter',
)Instead of modifying the existing widget object, Flutter uses updated widget configurations during rebuilding.
A widget generally describes its UI through the build() method. The method returns another widget, which becomes part of the widget tree.
class Greeting extends StatelessWidget {
const Greeting({super.key});
@override
Widget build(BuildContext context) {
return const Text(
'Welcome to Flutter',
);
}
}The build() method should focus on describing the UI and should generally avoid expensive work and unrelated side effects.
Flutter uses a reactive UI model. When relevant configuration or state changes, Flutter rebuilds the affected portions of the widget tree.
State Changes
↓
Widget Rebuild
↓
build()
↓
New Widget Description
↓
Flutter Updates Required UIThis model allows developers to describe what the UI should look like for the current state rather than manually changing every visual element.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Widget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.flutter_dash,
size: 80,
),
const SizedBox(height: 20),
const Text(
'Flutter Widgets',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
debugPrint('Button pressed');
},
child: const Text('Learn More'),
),
],
),
),
),
);
}
}MyApp
|
└── MaterialApp
|
└── Scaffold
|
├── AppBar
| └── Text
|
└── Center
|
└── Column
|
├── Icon
├── SizedBox
├── Text
├── SizedBox
└── ElevatedButton
└── Text| Widget | Purpose |
|---|---|
Text |
Displays text. |
Image |
Displays images. |
Icon |
Displays icons. |
Container |
Provides sizing, alignment, spacing, and decoration capabilities. |
Row |
Arranges children horizontally. |
Column |
Arranges children vertically. |
Stack |
Places children on top of one another. |
Center |
Centers its child. |
Padding |
Adds space around a child. |
SizedBox |
Provides a specific size or spacing. |
Expanded |
Expands a child within available Flex space. |
Flexible |
Allows a child to flex within available space. |
ListView |
Creates a scrollable list. |
GridView |
Creates a scrollable grid. |
Card |
Groups related content in a visual surface. |
Scaffold |
Provides a standard Material screen structure. |
AppBar |
Displays a top application bar. |
TextField |
Accepts text input. |
ElevatedButton |
Provides a prominent Material button. |
GestureDetector |
Detects gestures and user interaction. |
AnimatedContainer |
Animates changes to supported container properties. |
Complex interfaces are created by combining smaller widgets.
Widgets form a parent-child hierarchy known as the widget tree.
Widget objects describe UI configuration and are immutable.
Widgets commonly implement build() to describe their UI.
Stateful widgets can respond to changing application state.
Custom widgets can be created and reused throughout an application.
The UI is described according to the current configuration and state, and Flutter updates the necessary parts when those inputs change.
const where appropriate.build() method.Flutter widgets are not simply HTML tags. They are Dart objects that participate in Flutter's widget, element, and rendering architecture.
Putting an entire application's UI into one enormous widget can make the code difficult to maintain. Divide complex screens into reusable custom widgets.
A widget with child accepts one child, while a widget with children generally accepts multiple widgets.
Expanded is intended for use inside Flex layouts such as Row, Column, and Flex.
The build() method may be called repeatedly, so expensive calculations and unrelated side effects should not be placed there unnecessarily.
Create a Flutter application containing the following widgets:
MaterialAppScaffoldAppBarColumnTextIconContainerElevatedButtonMaterialApp
↓
Scaffold
↓
AppBar
↓
Center
↓
Column
├── Icon
├── Text
├── Container
│ └── Text
└── ElevatedButtonCreate a simple Student Profile screen containing a student icon, student name, course name, short description, and a button.
import 'package:flutter/material.dart';
void main() {
runApp(const StudentApp());
}
class StudentApp extends StatelessWidget {
const StudentApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Student Profile',
home: Scaffold(
appBar: AppBar(
title: const Text('Student Profile'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(20),
child: Card(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const CircleAvatar(
radius: 40,
child: Icon(
Icons.person,
size: 45,
),
),
const SizedBox(height: 20),
const Text(
'Rahul Sharma',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
const Text(
'Flutter Developer',
),
const SizedBox(height: 20),
const Text(
'Learning Dart and Flutter application development.',
textAlign: TextAlign.center,
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
debugPrint('Profile opened');
},
child: const Text('View Profile'),
),
],
),
),
),
),
),
),
);
}
}MaterialAppScaffoldAppBarCenterPaddingCardColumnCircleAvatarIconTextSizedBoxElevatedButtonA widget is an immutable description of part of a Flutter user interface. Widgets are composed together to build the application UI.
The widget tree is the hierarchical structure formed when widgets are nested inside parent widgets.
StatelessWidget is used for widgets that do not manage mutable state internally.
StatefulWidget is used when a widget needs to work with changing state during its lifetime.
The build() method describes the widget's UI by returning another widget.
child is generally used for a single child widget, while children is used when a widget accepts multiple child widgets.
Custom widgets make complex UI easier to organize and allow components to be reused with different data.
Expanded allows a child inside a Flex layout such as Row or Column to occupy available space.
Scaffold provides a standard Material Design structure for a screen.
Widget composition allows developers to build complex interfaces from small, focused, reusable components.
| Concept | Meaning |
|---|---|
| Widget | Immutable description of part of the UI. |
| Widget Tree | Hierarchy of parent and child widgets. |
| StatelessWidget | Widget that does not manage mutable state internally. |
| StatefulWidget | Widget used when UI responds to changing state. |
| build() | Describes the widget's UI. |
| MaterialApp | Root-level Material application configuration. |
| Scaffold | Basic Material screen structure. |
| Row | Horizontal layout. |
| Column | Vertical layout. |
| Stack | Overlapping layout. |
| Container | Layout, sizing, alignment, and decoration. |
| Expanded | Uses available Flex space. |
| ListView | Scrollable list. |
| Custom Widget | Reusable widget created by the developer. |
child and children.build() method.JustAcademy Flutter Training: https://www.justacademy.co/course-detail/flutter-training
Register for Course Demo: https://www.justacademy.co/register-for-course-demo
Flutter Official Widget Documentation: Flutter Widget Catalog
Flutter Widget Fundamentals: Create Widgets
Flutter Basic Widgets: Basic Widgets
Widgets are the foundation of Flutter application development. They describe the structure and appearance of the user interface and are composed together to form a widget tree. Flutter uses the same fundamental widget concept for many UI, layout, interaction, styling, and structural requirements.
Beginners should first become comfortable with commonly used widgets such as Text, Container, Row, Column, Center, Padding, SizedBox, Image, Icon, Scaffold, and MaterialApp.
After learning these basic widgets, the next important concepts are StatelessWidget, StatefulWidget, state, widget composition, reusable custom widgets, user interaction, navigation, scrolling, animations, and responsive layouts.
The core idea to remember is: Flutter applications are built by composing widgets into a widget tree.
