Widgets in a horizontal or vertical arrangement are `Row` and `Column`.
### Row and Column Widgets
- **Row**: A Row widget lays out its children in a horizontal direction. If the number of children exceeds the available horizontal space, the Row will either overflow or throw an error.
- **Column**: A Column widget lays out its children in a vertical direction. If the number of children exceeds the available vertical space, the Column will either overflow or throw an error.
Both `Row` and `Column` widgets accept a list of children and various properties to control their layout behavior.
### Example: Basic Row and Column
Here's a basic example to illustrate the use of Row and Column in Flutter.
```dart
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 and Column Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Column 1'),
Text('Column 2'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Row 1'),
SizedBox(width: 20), // Adds space between Row 1 and Row 2
Text('Row 2'),
],
),
Text('Column 3'),
],
),
),
),
);
}
}
```
### Detailed Explanation
- **Column**: The Column widget contains four children (three Text widgets and one Row widget).
- `mainAxisAlignment: MainAxisAlignment.center`: This centers the children of the Column vertically within the available space.
- The Column contains three Text widgets and one Row widget.
- **Row**: The Row widget contains two Text widgets.
- `mainAxisAlignment: MainAxisAlignment.center`: This centers the children of the Row horizontally within the available space.
- `SizedBox(width: 20)`: This widget adds a space of 20 logical pixels between the two Text widgets in the Row.
### Example: Advanced Row and Column with Expanded and Flexible
To manage space more effectively, especially when dealing with dynamic content or different screen sizes, we can use `Expanded` and `Flexible` widgets.
```dart
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('Advanced Row and Column Example')),
body: Center(
child: Column(
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Center(child: Text('Expanded 1')),
),
),
Expanded(
child: Container(
color: Colors.green,
child: Center(child: Text('Expanded 2')),
),
),
Row(
children: <Widget>[
Flexible(
flex: 2,
child: Container(
color: Colors.blue,
child: Center(child: Text('Flexible 1')),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.yellow,
child: Center(child: Text('Flexible 2')),
),
),
],
),
],
),
),
),
);
}
}
```
### Detailed Explanation
- **Expanded**: The Expanded widget takes up all available space within its parent Column. The two Expanded widgets in the Column will share the available vertical space equally.
- The `Container` widgets with colors red and green fill the space assigned to them by Expanded.
- **Flexible**: The Flexible widget in the Row allows its children to take up space proportionally.
- `flex: 2` for the blue Container means it takes twice the space as the yellow Container, which has `flex: 1`.
Using `Expanded` and `Flexible` widgets helps in creating responsive UIs that adjust according to the screen size and available space. This is crucial for building applications that provide a good user experience across various devices and screen orientations.
Axis Alignments
In Flutter's `Row` and `Column` widgets, the layout behavior is controlled using two key properties: `mainAxisAlignment` and `crossAxisAlignment`. Understanding these properties is essential for creating flexible and responsive layouts.
### Main Axis and Cross Axis
- **Main Axis**: The main axis is the primary direction in which the widgets are laid out.
- For a `Row`, the main axis is horizontal.
- For a `Column`, the main axis is vertical.
- **Cross Axis**: The cross axis is the perpendicular direction to the main axis.
- For a `Row`, the cross axis is vertical.
- For a `Column`, the cross axis is horizontal.
### Main Axis Alignment
`mainAxisAlignment` determines how the children are aligned along the main axis.
#### MainAxisAlignment Values:
1. **start**: Align children at the start of the main axis.
2. **end**: Align children at the end of the main axis.
3. **center**: Center the children along the main axis.
4. **spaceBetween**: Place the free space evenly between the children.
5. **spaceAround**: Place the free space evenly between the children and also before the first child and after the last child.
6. **spaceEvenly**: Place the free space evenly between the children as well as before the first child and after the last child.
### Cross Axis Alignment
`crossAxisAlignment` determines how the children are aligned along the cross axis.
#### CrossAxisAlignment Values:
1. **start**: Align children at the start of the cross axis.
2. **end**: Align children at the end of the cross axis.
3. **center**: Center the children along the cross axis.
4. **stretch**: Stretch the children to fill the cross axis.
5. **baseline**: Align the children along their text baselines (only works if the children have text).
### Example: Main Axis and Cross Axis in Row and Column
Here is an example to demonstrate the use of `mainAxisAlignment` and `crossAxisAlignment` in both `Row` and `Column` widgets.
```dart
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('Main Axis and Cross Axis Example')),
body: Column(
children: <Widget>[
// Row with MainAxisAlignment
Container(
color: Colors.grey[300],
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('Row 1'),
Text('Row 2'),
Text('Row 3'),
],
),
),
SizedBox(height: 20),
// Column with CrossAxisAlignment
Container(
color: Colors.grey[300],
height: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Column 1'),
Text('Column 2'),
Text('Column 3'),
],
),
),
],
),
),
);
}
}
```
### Detailed Explanation
- **Row with MainAxisAlignment**:
- `mainAxisAlignment: MainAxisAlignment.spaceAround`: This aligns the children of the Row with equal space around them.
- Each Text widget is spaced equally with some space before the first and after the last widget.
- **Column with CrossAxisAlignment and MainAxisAlignment**:
- `crossAxisAlignment: CrossAxisAlignment.end`: This aligns the children of the Column at the end (right side) of the cross axis.
- `mainAxisAlignment: MainAxisAlignment.spaceBetween`: This places the free space evenly between the children along the main axis (vertical direction).
These examples illustrate how you can control the alignment and distribution of child widgets within a `Row` or `Column` using `mainAxisAlignment` and `crossAxisAlignment`. By leveraging these properties, you can create complex and responsive layouts tailored to your application's needs.
Expanded and Flexible
In Flutter, `Expanded` and `Flexible` are widgets used to control how child widgets within a `Row`, `Column`, or `Flex` expand and occupy space. They are essential for creating responsive and dynamic layouts that adapt to various screen sizes and orientations.
### Expanded Widget
The `Expanded` widget expands a child of a `Row`, `Column`, or `Flex` to fill the available space along the main axis. It takes up the remaining space after all other non-flexible widgets are allocated their space.
#### Properties:
- **child**: The widget to expand.
- **flex**: An optional integer that defines the relative size of the widget compared to other `Expanded` widgets.
#### Example:
```dart
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('Expanded Example')),
body: Column(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
color: Colors.red,
child: Center(child: Text('Expanded 1')),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.green,
child: Center(child: Text('Expanded 2')),
),
),
Container(
color: Colors.blue,
height: 100,
child: Center(child: Text('Non-Expanded')),
),
],
),
),
);
}
}
```
In this example:
- The first `Expanded` widget takes up twice the space of the second `Expanded` widget because it has a `flex` value of 2.
- The third `Container` is not expanded and takes up its specified height of 100 pixels.
### Flexible Widget
The `Flexible` widget is similar to `Expanded` but with more flexibility (hence the name). It allows a child widget to occupy space based on the `flex` factor but does not force it to fill all the remaining space. Instead, it can shrink or grow to fit its content within the available space.
#### Properties:
- **child**: The widget to be made flexible.
- **flex**: An optional integer that defines the relative size of the widget compared to other `Flexible` widgets.
- **fit**: A `FlexFit` value that controls how the child should fit within the available space. It can be:
- `FlexFit.tight`: Forces the child to fill the available space (similar to `Expanded`).
- `FlexFit.loose`: Allows the child to take only as much space as it needs.
#### Example:
```dart
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('Flexible Example')),
body: Column(
children: <Widget>[
Flexible(
flex: 2,
fit: FlexFit.tight,
child: Container(
color: Colors.red,
child: Center(child: Text('Flexible Tight 1')),
),
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
color: Colors.green,
child: Center(child: Text('Flexible Tight 2')),
),
),
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Container(
color: Colors.blue,
child: Center(child: Text('Flexible Loose')),
),
),
],
),
),
);
}
}
```
In this example:
- The first `Flexible` widget with `FlexFit.tight` and a `flex` value of 2 takes up twice the space of the second `Flexible` widget with `FlexFit.tight` and a `flex` value of 1.
- The third `Flexible` widget with `FlexFit.loose` takes only as much space as it needs and does not stretch to fill the remaining space.
### When to Use Expanded vs. Flexible
- Use `Expanded` when you want a child widget to take up all the remaining space in a `Row`, `Column`, or `Flex`.
- Use `Flexible` when you want a child widget to take up space proportionally without necessarily filling all the remaining space. You can control whether it should fit tightly or loosely using the `fit` property.
By using `Expanded` and `Flexible`, you can create complex and adaptable layouts that work well on different screen sizes and orientations.
Examples
Sure! Here are the same examples with Hindu names:
### 1. Basic Header with Title and Icon
This layout creates a simple header with a title and an icon aligned to the right.
```dart
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('Header Example')),
body: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(16.0),
child: Row(
children: <Widget>[
Expanded(
child: Text(
'Shivam\'s Header',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
Icon(Icons.settings),
],
),
),
// Rest of the body
Expanded(child: Center(child: Text('Content goes here'))),
],
),
),
);
}
}
```
### 2. Two-Column Layout
This layout splits the screen into two columns of equal width.
```dart
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('Two-Column Layout')),
body: Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Center(child: Text('Krishna')),
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Center(child: Text('Radha')),
),
),
],
),
),
);
}
}
```
### 3. Bottom Navigation Bar with Flexible Space
This layout creates a bottom navigation bar with flexible space between the icons.
```dart
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('Bottom Navigation Bar')),
body: Column(
children: <Widget>[
Expanded(child: Center(child: Text('Content goes here'))),
Container(
color: Colors.grey[200],
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.home),
Flexible(child: Container()),
Icon(Icons.search),
Flexible(child: Container()),
Icon(Icons.account_circle),
],
),
),
],
),
),
);
}
}
```
### 4. Card Layout with Image and Text
This layout creates a card with an image on the left and text on the right.
```dart
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('Card Layout')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Card(
elevation: 4.0,
child: Row(
children: <Widget>[
Container(
width: 100,
height: 100,
child: Image.network('https://via.placeholder.com/100'),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Ganesha\'s Card',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 8.0),
Text('This is the description of the card.'),
],
),
),
),
],
),
),
),
),
);
}
}
```
### 5. Profile Page with Header, Content, and Footer
This layout creates a profile page with a header, main content, and a footer.
```dart
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('Profile Page')),
body: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(16.0),
color: Colors.blue,
child: Row(
children: <Widget>[
CircleAvatar(
radius: 40,
backgroundImage: NetworkImage('https://via.placeholder.com/150'),
),
SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Lakshmi Devi',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
),
Text(
'Software Developer',
style: TextStyle(color: Colors.white),
),
],
),
),
],
),
),
Expanded(
child: Center(
child: Text('Profile Content goes here'),
),
),
Container(
padding: EdgeInsets.all(16.0),
color: Colors.grey[200],
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.home),
Icon(Icons.search),
Icon(Icons.settings),
],
),
),
],
),
),
);
}
}
```
Contact us for software training, education or development
.png)
0 Comments