Flutter is a modern development framework created by Google to help developers quickly create beautiful, high-performance mobile apps. One of its most powerful features is the ability to create custom widget layouts with ease. Widgets are the building blocks of any Flutter app, and they come in a variety of shapes and sizes. In this article, we’ll explore the different types of widget layouts available in Flutter and some real-world examples of each type.
Stack Widgets
The Stack widget is one of the most commonly used widgets in Flutter. It allows for the nesting of widgets in a vertical or horizontal sequence. The stack widget is essential for creating complex, layered layouts that require precise positioning of elements.
For example, a Stack widget might be used to create a two-column layout, where the first column contains a list of items and the second column contains a detailed description.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stack Widget Demo by CodeZi.pro',
theme: ThemeData(
primarySwatch: Colors.blueGrey,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Stack Widget Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 200.0,
height: 200.0,
color: Colors.lightGreen,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
Container(
width: 50.0,
height: 50.0,
color: Colors.yellow,
),
],
),
),
);
}
}Row and Column Widgets
The Row and Column widgets are used to create linear layouts with multiple child widgets. The Row widget will arrange its child widgets in a horizontal list, while the Column widget arranges its child widgets in a vertical list. Both widgets are very useful for creating layouts with multiple elements of the same size, such as a row of buttons or a list of text boxes.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Row and Column Widgets',
home: Scaffold(
appBar: AppBar(
title: Text('Row and Column Widgets'),
),
body: Center(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text('Hello'),
Text('World'),
],
),
Row(
children: <Widget>[
Text('Goodbye'),
Text('World'),
],
),
],
),
),
),
);
}
}Container Widgets
The Container widget is a useful tool for creating more complex layouts. It can be used to create a box with a specific size and color, and it can also be used to add padding to a widget. This widget is especially useful for creating responsive designs that adapt to different screen sizes.
For example, a Container widget might be used to create a card-like layout with a title and description. The Container widget can also be used to create a responsive grid layout with a variable number of columns.
import 'package:flutter/material.dart';
//Main Function
void main() {
runApp(MyApp());
}
//MyApp class
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Container(
color: Colors.white,
margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 100.0,
color: Colors.red,
),
Container(
width: 100.0,
color: Colors.blue,
),
Container(
width: 100.0,
color: Colors.green,
),
],
),
Container(
height: 100.0,
width: 100.0,
color: Colors.yellow,
),
Container(
height: 100.0,
width: 100.0,
color: Colors.purple,
child: Center(
child: Text(
'Hello',
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
Container(
width: double.infinity,
color: Colors.pink,
child: Text(
'Goodbye',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
),
),
),
),
);
}
}Expanded Widgets
The Expanded widget is used to expand a single widget to fill the available space. This is useful for creating layouts with multiple elements of varying sizes. For example, a Row widget with two Expanded widgets can be used to create a two-column layout with a variable number of elements.
Flex Widgets
The Flex widget is similar to the Expanded widget, but it is more flexible and allows for more complex layouts. The Flex widget can be used to create layouts with multiple elements of varying sizes, and it can also be used to create responsive designs that adapt to different screen sizes.
For example, a Flex widget can be used to create a responsive grid layout with a variable number of columns.
import 'package:flutter/material.dart';
class FlexWidgetExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Flex(
direction: Axis.horizontal,
children: [
Expanded(
child: Container(
color: Colors.red,
height: 100,
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.green,
height: 100,
),
),
Expanded(
child: Container(
color: Colors.blue,
height: 100,
),
),
],
),
Flex(
direction: Axis.vertical,
children: [
Expanded(
child: Container(
color: Colors.red,
height: 100,
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.green,
height: 100,
),
),
Expanded(
child: Container(
color: Colors.blue,
height: 100,
),
),
],
),
],
);
}
}Conclusion
The Flutter framework is a powerful tool for creating beautiful, modern mobile apps. Its flexibility and ease of use make it a great choice for developers of all skill levels. One of its most powerful features is the ability to create custom widget layouts with ease. In this article, we explored the different types of widget layouts available in Flutter and some real-world examples of each type.