**Course Title:** Flutter Development: Build Beautiful Mobile Apps **Section Title:** Flutter Widgets and Layouts **Topic:** Using layout widgets: Column, Row, Stack, and Container In the previous topic, we explored the basics of Flutter widgets and layouts. In this topic, we will dive deeper into the world of layout widgets, which are essential for building responsive and visually appealing user interfaces. We will cover four fundamental layout widgets: Column, Row, Stack, and Container. **Layout Widgets: The Building Blocks of Flutter UIs** Layout widgets are the foundation of Flutter UIs. They help you arrange widgets in a way that is both aesthetically pleasing and functional. In this topic, we will explore four essential layout widgets that you should know: 1. **Column**: A Column widget is used to stack widgets vertically. It is ideal for creating a list of items, a navigation bar, or a footer. 2. **Row**: A Row widget is used to arrange widgets horizontally. It is perfect for creating a navigation bar, a header, or a footer. 3. **Stack**: A Stack widget is used to stack widgets on top of each other. It is useful for creating a card layout, a modal dialog, or a tooltip. 4. **Container**: A Container widget is used to create a rectangular box that can contain other widgets. It is ideal for creating a button, a card, or a badge. **Column Widget** The Column widget is used to stack widgets vertically. It is a flexible widget that can be used to create a list of items, a navigation bar, or a footer. ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Column Widget Demo', home: Scaffold( appBar: AppBar( title: Text('Column Widget Demo'), ), body: Column( children: [ Text('Item 1'), Text('Item 2'), Text('Item 3'), ], ), ), ); } } ``` In this example, we create a Column widget and add three Text widgets as children. The Column widget stacks the Text widgets vertically, creating a list of items. **Row Widget** The Row widget is used to arrange widgets horizontally. It is a flexible widget that can be used to create a navigation bar, a header, or a footer. ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Row Widget Demo', home: Scaffold( appBar: AppBar( title: Text('Row Widget Demo'), ), body: Row( children: [ Text('Item 1'), Text('Item 2'), Text('Item 3'), ], ), ), ); } } ``` In this example, we create a Row widget and add three Text widgets as children. The Row widget arranges the Text widgets horizontally, creating a navigation bar. **Stack Widget** The Stack widget is used to stack widgets on top of each other. It is a flexible widget that can be used to create a card layout, a modal dialog, or a tooltip. ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Stack Widget Demo', home: Scaffold( appBar: AppBar( title: Text('Stack Widget Demo'), ), body: Stack( children: [ Container( color: Colors.blue, height: 200, ), Container( color: Colors.red, height: 200, ), ], ), ), ); } } ``` In this example, we create a Stack widget and add two Container widgets as children. The Stack widget stacks the Container widgets on top of each other, creating a card layout. **Container Widget** The Container widget is used to create a rectangular box that can contain other widgets. It is a flexible widget that can be used to create a button, a card, or a badge. ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Container Widget Demo', home: Scaffold( appBar: AppBar( title: Text('Container Widget Demo'), ), body: Container( width: 200, height: 200, color: Colors.blue, child: Center( child: Text('Container Widget Demo'), ), ), ), ); } } ``` In this example, we create a Container widget and add a Text widget as a child. The Container widget creates a rectangular box that contains the Text widget, creating a button. **Practical Takeaways** * Use the Column widget to create a list of items, a navigation bar, or a footer. * Use the Row widget to create a navigation bar, a header, or a footer. * Use the Stack widget to create a card layout, a modal dialog, or a tooltip. * Use the Container widget to create a button, a card, or a badge. **Conclusion** In this topic, we explored four essential layout widgets in Flutter: Column, Row, Stack, and Container. We learned how to use these widgets to create responsive and visually appealing user interfaces. We also saw practical examples of how to use these widgets in real-world scenarios. With this knowledge, you can now build beautiful mobile apps using Flutter. **Leave a comment or ask for help if you have any questions or need further clarification on any of the topics covered in this topic.**