YouTip

Layout is a core concept in Flutter UI development.\\\\n\\\\nThis section will introduce the most commonly used layout Widgets, including Row, Column, Stack, and Flex.\\\\n\\\\n* * *\\\\n\\\\n## Layout Widget Overview\\\\n\\\\nFlutter provides a rich set of layout Widgets to meet various interface design requirements.\\\\n\\\\n| Widget | Usage |\\\\n| --- | --- |\\\\n| Row | Arrange child Widgets horizontally |\\\\n| Column | Arrange child Widgets vertically |\\\\n| Stack | Arrange child Widgets in an overlapping/stacked manner |\\\\n| Flex | Flexible linear layout (base class for Row/Column) |\\\\n| GridView | Grid layout |\\\\n| ListView | List layout |\\\\n\\\\n* * *\\\\n\\\\n## Row - Horizontal Layout\\\\n\\\\nRow is used to arrange child Widgets in the horizontal direction.\\\\n\\\\n## Example: Row Basic Usage\\\\n\\\\n// Arrange three icons horizontally\\\\n\\\\n Row(\\\\n\\\\n children:[\\\\n\\\\n Icon(Icons.home, color: Colors.blue),\\\\n\\\\n Icon(Icons.search, color: Colors.green),\\\\n\\\\n Icon(Icons.settings, color: Colors.grey),\\\\n\\\\n],\\\\n\\\\n)\\\\n\\\\n// Row with spacing\\\\n\\\\n Row(\\\\n\\\\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,// Main axis alignment\\\\n\\\\n children:[\\\\n\\\\n Icon(Icons.home, color: Colors.blue),\\\\n\\\\n Icon(Icons.search, color: Colors.green),\\\\n\\\\n Icon(Icons.settings, color: Colors.grey),\\\\n\\\\n],\\\\n\\\\n)\\\\n\\\\n### mainAxisAlignment - Main Axis Alignment\\\\n\\\\n| Value | Description |\\\\n| --- | --- |\\\\n| MainAxisAlignment.start | Align to the left (default) |\\\\n| MainAxisAlignment.center | Center alignment |\\\\n| MainAxisAlignment.end | Align to the right |\\\\n| MainAxisAlignment.spaceBetween | Justify with equal spacing between items |\\\\n| MainAxisAlignment.spaceEvenly | Equal spacing between items and at the edges |\\\\n| MainAxisAlignment.spaceAround | Equal spacing between items, which is greater than the spacing at the edges |\\\\n\\\\n* * *\\\\n\\\\n## Column - Vertical Layout\\\\n\\\\nColumn is used to arrange child Widgets in the vertical direction.\\\\n\\\\n## Example: Column Basic Usage\\\\n\\\\n// Arrange three texts vertically\\\\n\\\\n Column(\\\\n\\\\n children:[\\\\n\\\\n Text('First row', style: TextStyle(fontSize:20)),\\\\n\\\\n Text('Second row', style: TextStyle(fontSize:20)),\\\\n\\\\n Text('Third row', style: TextStyle(fontSize:20)),\\\\n\\\\n],\\\\n\\\\n)\\\\n\\\\n// Column with Spacing and Alignment\\\\n\\\\n Column(\\\\n\\\\n mainAxisAlignment: MainAxisAlignment.center,// Center vertically\\\\n\\\\n crossAxisAlignment: CrossAxisAlignment.start,// Horizontally left-aligned\\\\n\\\\n children:[\\\\n\\\\n Text('Title', style: TextStyle(fontSize:24, fontWeight: FontWeight.bold)),\\\\n\\\\nconst SizedBox(height:8),\\\\n\\\\n Text('Content content content'),\\\\n\\\\nconst SizedBox(height:8),\\\\n\\\\n Text('Bottom description'),\\\\n\\\\n],\\\\n\\\\n)\\\\n\\\\n### crossAxisAlignment - Cross Axis Alignment\\\\n\\\\n| Value | Description |\\\\n| --- | --- |\\\\n| CrossAxisAlignment.start | Align to the top/left |\\\\n| CrossAxisAlignment.center | Center alignment |\\\\n| CrossAxisAlignment.end | Align to the bottom/right |\\\\n| CrossAxisAlignment.stretch | Stretch to fill the parent container |\\\\n\\\\n* * *\\\\n\\\\n## Expanded and Flexible\\\\n\\\\nExpanded and Flexible are used to allow child Widgets to fill the remaining space.\\\\n\\\\n## Example: Expanded Usage\\\\n\\\\n// Fixed width + Flexible width\\\\n\\\\n Row(\\\\n\\\\n children:[\\\\n\\\\n// Fixed width 100\\\\n\\\\n Container(width:100, height:50, color: Colors.red),\\\\n\\\\n// Takes upBased on Remaining Space\\\\n\\\\n Expanded(\\\\n\\\\n child: Container(height:50, color: Colors.green),\\\\n\\\\n),\\\\n\\\\n// Fixed width 50\\\\n\\\\n Container(width:50, height:50, color: Colors.blue),\\\\n\\\\n],\\\\n\\\\n)\\\\n\\\\n// Proportional distribution\\\\n\\\\n Row(\\\\n\\\\n children:[\\\\n\\\\n// Takes up 1 year\\\\n\\\\n Expanded(\\\\n\\\\n flex:1,\\\\n\\\\n child: Container(height:50, color: Colors.red),\\\\n\\\\n),\\\\n\\\\n// Takes up 2 year\\\\n\\\\n Expanded(\\\\n\\\\n flex:2,\\\\n\\\\n child: Container(height:50, color: Colors.green),\\\\n\\\\n),\\\\n\\\\n// Takes up 1 year\\\\n\\\\n Expanded(\\\\n\\\\n flex:1,\\\\n\\\\n child: Container(height:50, color: Colors.blue),\\\\n\\\\n),\\\\n\\\\n],\\\\n\\\\n)\\\\n\\\\n* * *\\\\n\\\\n## Stack - Stacked Layout\\\\n\\\\nStack is used to stack child Widgets on top of each other, commonly used to implement floating elements, layer overlapping, and other effects.\\\\n\\\\n## Example: Stack Usage\\\\n\\\\n// Basic Stack\\\\n\\\\n Stack(\\\\n\\\\n children:[\\\\n\\\\n// Bottom layer: Background image\\\\n\\\\n Container(\\\\n\\\\n width:200,\\\\n\\\\n height:200,\\\\n\\\\n color: Colors.blue,\\\\n\\\\n),\\\\n\\\\n// Middle layer: Semi-transparent overlay\\\\n\\\\n Container(\\\\n\\\\n width:180,\\\\n\\\\n height:180,\\\\n\\\\n color: Colors.white.withOpacity(0.5),\\\\n\\\\n),\\\\n\\\\n// Top layer: Text\\\\n\\\\nconst Center(\\\\n\\\\n child: Text(\\\\n\\\\n'Overlay content',\\\\n\\\\n style: TextStyle(color: Colors.white, fontSize:24),\\\\n\\\\n),\\\\n\\\\n),\\\\n\\\\n],\\\\n\\\\n)\\\\n\\\\n// Stack with positioning\\\\n\\\\n Stack(\\\\n\\\\n children:[\\\\n\\\\n Container(color: Colors.grey),\\\\n\\\\n// Position at top right\\\\n\\\\n Positioned(\\\\n\\\\n right:10,\\\\n\\\\n top:10,\\\\n\\\\n child: Icon(Icons.close, color: Colors.red),\\\\n\\\\n),\\\\n\\\\n// Positioned at bottom-left\\\\n\\\\n Positioned(\\\\n\\\\n left:10,\\\\n\\\\n bottom:10,\\\\n\\\\n child: Text('Text at bottom left'),\\\\n\\\\n),\\\\n\\\\n],\\\\n\\\\n)\\\\n\\\\n* * *\\\\n\\\\n## Padding and Margin\\\\n\\\\nUse Padding and Margin to control the inner and outer spacing of elements.\\\\n\\\\n## Example: Padding and Margin\\\\n\\\\n// Using Padding to Set Padding\\\\n\\\\n Padding(\\\\n\\\\n padding:const EdgeInsets.all(16.0),// 16 pixels on all sides\\\\n\\\\n child: Text('Text with Padding'),\\\\n\\\\n)\\\\n\\\\n// Set each side individually\\\\n\\\\n Padding(\\\\n\\\\n padding: EdgeInsets.only(\\\\n\\\\n left:10,\\\\n\\\\n right:20,\\\\n\\\\n top:5,\\\\n\\\\n bottom:5,\\\\n\\\\n),\\\\n\\\\n child: Text('Custom Padding'),\\\\n\\\\n)\\\\n\\\\n// Using EdgeInsets.symmetric Symmetric padding\\\\n\\\\n Padding(\\\\n\\\\n padding: EdgeInsets.symmetric(horizontal:16, vertical:8),\\\\n\\\\n child: Text('Horizontal 16, Vertical 8'),\\\\n\\\\n)\\\\n\\\\n// Container Combining Margin and Padding\\\\n\\\\n Container(\\\\n\\\\n margin:const EdgeInsets.all(10),// Margin\\\\n\\\\n padding:const EdgeInsets.all(16),// Padding\\\\n\\\\n decoration: BoxDecoration(\\\\n\\\\n color: Colors.blue,\\\\n\\\\n borderRadius: BorderRadius.circular(8),\\\\n\\\\n),\\\\n\\\\n child: Text('Container content'),\\\\n\\\\n)\\\\n\\\\n* * *\\\\n\\\\n## Scaffold and AppBar\\\\n\\\\nScaffold provides the basic page structure of Material Design, and AppBar is the top application bar.\\\\n\\\\n## Example: Scaffold Basic Structure\\\\n\\\\n// Material Design Page scaffold\\\\n\\\\n Scaffold(\\\\n\\\\n// Top app bar\\\\n\\\\n appBar: AppBar(\\\\n\\\\n title:const Text('MineApplication'),\\\\n\\\\n backgroundColor: Colors.blue,\\\\n\\\\n elevation:4,// Shadow depth\\\\n\\\\n actions:[\\\\n\\\\n IconButton(\\\\n\\\\n icon:const Icon(Icons.search),\\\\n\\\\n onPressed:(){},\\\\n\\\\n),\\\\n\\\\n IconButton(\\\\n\\\\n icon:const Icon(Icons.settings),\\\\n\\\\n onPressed:(){},\\\\n\\\\n),\\\\n\\\\n],\\\\n\\\\n),\\\\n\\\\n// Page body\\\\n\\\\n body:const Center(\\\\n\\\\n child: Text('Page body content'),\\\\n\\\\n),\\\\n\\\\n// Floating action button\\\\n\\\\n floatingActionButton: FloatingActionButton(\\\\n\\\\n onPressed:(){},\\\\n\\\\n child:const Icon(Icons.add),\\\\n\\\\n),\\\\n\\\\n// Bottom navigation bar\\\\n\\\\n bottomNavigationBar: BottomNavigationBar(\\\\n\\\\n items:const[\\\\n\\\\n BottomNavigationBarItem(icon: Icon(Icons.home), label:'Home'),\\\\n\\\\n BottomNavigationBarItem(icon: Icon(Icons.search), label:'Search'),\\\\n\\\\n BottomNavigationBarItem(icon: Icon(Icons.person), label:'Mine'),\\\\n\\\\n],\\\\n\\\\n),\\\\n\\\\n)