Flutter child and children Properties Explained
In Flutter, widgets use the child property when they are designed to contain a single widget, and the children property when they support multiple widgets. This is foundational in creating flexible layouts in your app.
1. child Property
The child property is used when a widget can only have one child.
Container(
color: Colors.blue,
child: Text('This is a child widget'),
)
Full Example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Child Widget Example')),
body: Center(
child: Align(
alignment: Alignment.center,
child: Container(
color: Colors.blue,
padding: EdgeInsets.all(16.0),
child: Text(
'This is a child widget',
style: TextStyle(fontSize: 24, color: Colors.white),
),
),
),
),
),
);
}
}
2. children Property
The children property is used for widgets like Column and Row that can hold multiple widgets.
Column(
children: [
Text('First child'),
Text('Second child'),
Text('Third child'),
],
)
Full Example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Multiple Child Widgets Example')),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.blue,
padding: EdgeInsets.all(16.0),
child: Text('This is the first child widget',
style: TextStyle(fontSize: 24, color: Colors.white)),
),
SizedBox(height: 16),
Container(
color: Colors.green,
padding: EdgeInsets.all(16.0),
child: Text('This is the second child widget',
style: TextStyle(fontSize: 24, color: Colors.white)),
),
SizedBox(height: 16),
Container(
color: Colors.red,
padding: EdgeInsets.all(16.0),
child: Text('This is the third child widget',
style: TextStyle(fontSize: 24, color: Colors.white)),
),
],
),
),
),
);
}
}
3. Row Widget
The Row widget displays its children horizontally.
Row(
children: [
Text('First child'),
Text('Second child'),
Text('Third child'),
],
)
Full Example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Row Widget Example')),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('First child', style: TextStyle(fontSize: 24, color: Colors.red)),
SizedBox(width: 20),
Text('Second child', style: TextStyle(fontSize: 24, color: Colors.green)),
SizedBox(width: 20),
Text('Third child', style: TextStyle(fontSize: 24, color: Colors.blue)),
],
),
),
),
);
}
}
4. Column Widget
The Column widget displays its children vertically.
Column(
children: [
Text('First child'),
Text('Second child'),
Text('Third child'),
],
)
Full Example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Column Widget Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('First child', style: TextStyle(fontSize: 24, color: Colors.red)),
SizedBox(height: 20),
Text('Second child', style: TextStyle(fontSize: 24, color: Colors.green)),
SizedBox(height: 20),
Text('Third child', style: TextStyle(fontSize: 24, color: Colors.blue)),
],
),
),
),
);
}
}
5. crossAxisAlignment
Used to align children on the cross axis (horizontal for Column, vertical for Row).
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('First child'),
Text('Second child'),
Text('Third child'),
],
)
Full Example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('CrossAxisAlignment Example')),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('First child', style: TextStyle(fontSize: 24, color: Colors.red)),
Text('Second child', style: TextStyle(fontSize: 24, color: Colors.green)),
Text('Third child', style: TextStyle(fontSize: 24, color: Colors.blue)),
],
),
),
),
);
}
}
6. margin
Creates space outside the widget’s boundary.
Container(
margin: EdgeInsets.all(10.0),
color: Colors.blue,
child: Text('This container has margin'),
)
Full Example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Margin Property Example')),
body: Center(
child: Container(
margin: EdgeInsets.all(10.0),
padding: EdgeInsets.all(16.0),
color: Colors.blue,
child: Text('This container has margin',
style: TextStyle(fontSize: 20, color: Colors.white)),
),
),
),
);
}
}
7. padding
Creates space inside the widget’s boundary.
Container(
padding: EdgeInsets.all(10.0),
color: Colors.blue,
child: Text('This container has padding'),
)
Full Example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Padding Property Example')),
body: Center(
child: Container(
padding: EdgeInsets.all(10.0),
color: Colors.blue,
child: Text('This container has padding',
style: TextStyle(fontSize: 20, color: Colors.white)),
),
),
),
);
}
}
✅ Summary
- child – For single child widgets.
- children – For multiple children (list of widgets).
- Row and Column – Horizontal and vertical layouts.
- crossAxisAlignment – Align children across the cross axis.
- margin – Space outside the widget.
- padding – Space inside the widget.