Flutter Single child layout widgets
Flutter’s widget system provides numerous single child layout widgets that serve different purposes in your app’s UI architecture. Whether you’re working with Container, Padding, Center, or Align widgets, these Flutter single child layout widgets give you precise control over your widget positioning and styling.
Container Widget - The Most Versatile Single Child Layout Widget
The Container widget is arguably the most popular among Flutter single child layout widgets. This single child layout widget acts as a rectangular visual element that can contain decoration, padding, margins, and constraints for its child widget.
Container Properties
Width and Height: Control the exact dimensions of your container
Container(
width: 200,
height: 100,
child: Text('Fixed Size Container'),
)
Color and Decoration: Apply background colors and visual decorations
Container(
color: Colors.blue,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.red, Colors.orange]),
borderRadius: BorderRadius.circular(10),
),
child: Text('Styled Container'),
)
Padding and Margin: Add internal and external spacing
Container(
padding: EdgeInsets.all(16),
margin: EdgeInsets.symmetric(horizontal: 20),
child: Text('Spaced Container'),
)
The Container widget among Flutter single child layout widgets provides alignment through its alignment property, allowing you to position the child widget precisely within the container bounds.
Padding Widget - Essential Spacing Control
The Padding widget is one of the simplest yet most useful Flutter single child layout widgets. This single child layout widget adds empty space around its child widget, creating visual breathing room in your Flutter layouts.
Padding Configuration Options
All Sides Padding: Apply uniform padding on all edges
Padding(
padding: EdgeInsets.all(24.0),
child: Text('Uniformly Padded Widget'),
)
Symmetric Padding: Apply different padding for horizontal and vertical axes
Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Icon(Icons.star),
)
Custom Edge Padding: Define specific padding for each edge
Padding(
padding: EdgeInsets.fromLTRB(10, 20, 10, 5),
child: Image.network('https://example.com/image.jpg'),
)
Unlike other Flutter single child layout widgets, Padding focuses solely on spacing without adding visual elements or constraints to the child widget.
Center Widget - Perfect Alignment Solution
The Center widget is one of the most straightforward Flutter single child layout widgets for centering content. This single child layout widget automatically centers its child both horizontally and vertically within the available space.
Center Widget Behavior
The Center widget expands to fill available space and positions its child at the exact center point. When used as one of the Flutter single child layout widgets, it provides a simple solution for centered layouts without requiring complex alignment calculations.
Center(
child: Text(
'Perfectly Centered Text',
style: TextStyle(fontSize: 18),
),
)
The Center widget among Flutter single child layout widgets is particularly useful in scenarios where you need quick centering without additional styling or constraints.
Align Widget - Precise Positioning Control
The Align widget offers more granular control compared to other Flutter single child layout widgets. This single child layout widget allows you to position its child at any point within the available space using alignment values.
Alignment Property Options
Predefined Alignments: Use built-in alignment constants
Align(
alignment: Alignment.topRight,
child: Icon(Icons.close),
)
Custom Alignment: Define precise positioning with coordinate values
Align(
alignment: Alignment(0.5, -0.8), // Custom position
child: FloatingActionButton(onPressed: () {}),
)
Fractional Alignment: Position using fractional coordinates
Align(
alignment: FractionalOffset(0.2, 0.3),
child: Text('Custom Positioned'),
)
The Align widget stands out among Flutter single child layout widgets by providing mathematical precision in child positioning.
SizedBox Widget - Dimension Control Specialist
The SizedBox widget is one of the most utility-focused Flutter single child layout widgets. This single child layout widget enforces specific width and height constraints on its child widget or creates empty space when used without a child.
SizedBox Usage Patterns
Fixed Dimensions: Force specific size constraints
SizedBox(
width: 150,
height: 50,
child: ElevatedButton(
onPressed: () {},
child: Text('Fixed Size Button'),
),
)
Spacing Creation: Generate empty space between widgets
SizedBox(height: 20) // Vertical spacing
SizedBox(width: 10) // Horizontal spacing
Infinite Constraints: Allow maximum expansion
SizedBox.expand(
child: Container(color: Colors.grey),
)
Among Flutter single child layout widgets, SizedBox excels at dimension management and spacing creation in your Flutter layouts.
AspectRatio Widget - Maintaining Proportions
The AspectRatio widget ensures consistent proportional relationships among Flutter single child layout widgets. This single child layout widget maintains a specific width-to-height ratio for its child widget regardless of screen size or parent constraints.
AspectRatio Implementation
AspectRatio(
aspectRatio: 16 / 9, // Widescreen ratio
child: Container(
color: Colors.green,
child: Center(child: Text('16:9 Aspect Ratio')),
),
)
The AspectRatio widget among Flutter single child layout widgets is essential for creating responsive designs that maintain visual consistency across different device sizes.
FittedBox Widget - Scaling and Fitting Solution
The FittedBox widget provides intelligent scaling capabilities among Flutter single child layout widgets. This single child layout widget automatically scales and positions its child to fit within the available space while maintaining aspect ratio.
FittedBox Fit Options
BoxFit.contain: Scale to fit entirely within bounds
FittedBox(
fit: BoxFit.contain,
child: Text('Scaled to Fit', style: TextStyle(fontSize: 50)),
)
BoxFit.cover: Scale to fill entire space
FittedBox(
fit: BoxFit.cover,
child: Icon(Icons.star, size: 100),
)
BoxFit.fill: Stretch to fill exactly
FittedBox(
fit: BoxFit.fill,
child: Image.asset('assets/logo.png'),
)
The FittedBox widget distinguishes itself among Flutter single child layout widgets by providing automatic scaling intelligence.
ConstrainedBox Widget - Constraint Management
The ConstrainedBox widget applies additional constraints to its child among Flutter single child layout widgets. This single child layout widget allows you to set minimum and maximum width and height constraints.
Constraint Types
Minimum Constraints: Set minimum dimensions
ConstrainedBox(
constraints: BoxConstraints(minWidth: 100, minHeight: 50),
child: ElevatedButton(onPressed: () {}, child: Text('Min Size')),
)
Maximum Constraints: Limit maximum dimensions
ConstrainedBox(
constraints: BoxConstraints(maxWidth: 200),
child: Text('This text will wrap at 200 pixels width'),
)
The ConstrainedBox widget provides essential constraint control among Flutter single child layout widgets for responsive design requirements.
Complete Example: Flutter Single Child Layout Widgets in Action
Here’s a comprehensive example demonstrating various Flutter single child layout widgets working together in a practical Flutter application:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Single Child Layout Widgets Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: SingleChildLayoutDemo(),
);
}
}
class SingleChildLayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Single Child Layout Widgets'),
centerTitle: true,
),
body: SingleChildScrollView(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Container Widget Example
Container(
width: double.infinity,
height: 120,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.purple, Colors.blue],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 5,
offset: Offset(0, 3),
),
],
),
padding: EdgeInsets.all(20),
margin: EdgeInsets.only(bottom: 20),
child: Center(
child: Text(
'Container Widget\nwith Gradient & Shadow',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
// Padding Widget Example
Padding(
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: Card(
elevation: 4,
child: Padding(
padding: EdgeInsets.all(20),
child: Text(
'Padding Widget Example\nCreates spacing around content',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16),
),
),
),
),
SizedBox(height: 20),
// Center Widget Example
Container(
height: 100,
color: Colors.grey[200],
child: Center(
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
child: Text(
'Centered Button',
style: TextStyle(fontSize: 16),
),
),
),
),
SizedBox(height: 20),
// Align Widget Example
Container(
height: 120,
color: Colors.amber[100],
child: Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: Icon(Icons.star, color: Colors.orange, size: 30),
),
Align(
alignment: Alignment.topRight,
child: Icon(Icons.favorite, color: Colors.red, size: 30),
),
Align(
alignment: Alignment.center,
child: Text(
'Align Widget Demo',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Icon(Icons.thumb_up, color: Colors.blue, size: 30),
),
],
),
),
SizedBox(height: 20),
// SizedBox Widget Example
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
width: 80,
height: 80,
child: Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text('80x80', style: TextStyle(color: Colors.white)),
),
),
),
SizedBox(
width: 120,
height: 80,
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text('120x80', style: TextStyle(color: Colors.white)),
),
),
),
SizedBox(
width: 100,
height: 80,
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text('100x80', style: TextStyle(color: Colors.white)),
),
),
),
],
),
SizedBox(height: 20),
// AspectRatio Widget Example
AspectRatio(
aspectRatio: 16 / 9,
child: Container(
decoration: BoxDecoration(
color: Colors.teal,
borderRadius: BorderRadius.circular(12),
image: DecorationImage(
image: NetworkImage('https://via.placeholder.com/400x225'),
fit: BoxFit.cover,
),
),
child: Center(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.black54,
borderRadius: BorderRadius.circular(8),
),
child: Text(
'16:9 Aspect Ratio',
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
),
),
),
SizedBox(height: 20),
// FittedBox Widget Example
Container(
height: 60,
width: 200,
color: Colors.pink[100],
child: FittedBox(
fit: BoxFit.contain,
child: Text(
'FittedBox scales this long text to fit',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
),
SizedBox(height: 20),
// ConstrainedBox Widget Example
ConstrainedBox(
constraints: BoxConstraints(
minHeight: 100,
maxHeight: 150,
minWidth: double.infinity,
),
child: Container(
color: Colors.indigo[100],
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'ConstrainedBox Example',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 8),
Text(
'Min Height: 100, Max Height: 150',
style: TextStyle(fontSize: 14, color: Colors.grey[600]),
),
],
),
),
),
SizedBox(height: 20),
// Complex Layout Combination
Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 1,
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: Column(
children: [
Text(
'Complex Layout Example',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
SizedBox(height: 16),
Row(
children: [
Expanded(
child: AspectRatio(
aspectRatio: 1,
child: Container(
decoration: BoxDecoration(
color: Colors.orange[300],
borderRadius: BorderRadius.circular(8),
),
child: FittedBox(
child: Padding(
padding: EdgeInsets.all(8),
child: Icon(Icons.widgets, size: 50),
),
),
),
),
),
SizedBox(width: 16),
Expanded(
flex: 2,
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: 80),
child: Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(8),
),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'This demonstrates how multiple Flutter single child layout widgets work together to create complex, responsive layouts.',
style: TextStyle(fontSize: 14),
),
),
),
),
),
],
),
],
),
),
],
),
),
);
}
}
This comprehensive example showcases how Flutter single child layout widgets can be combined to create sophisticated user interfaces. Each widget serves its specific purpose while working harmoniously with other Flutter single child layout widgets to achieve the desired layout structure.
The example demonstrates practical usage of Container for styling and spacing, Padding for content spacing, Center for alignment, Align for precise positioning, SizedBox for dimension control, AspectRatio for proportional layouts, FittedBox for content scaling, and ConstrainedBox for constraint management.
Understanding these Flutter single child layout widgets and their properties enables you to build responsive, well-structured Flutter applications that adapt beautifully across different screen sizes and device orientations. Master these single child layout widgets in Flutter to elevate your mobile app development skills and create professional-quality user interfaces.