Container` widget in Flutter is a versatile and commonly used widget that can contain other widgets and provide additional functionality such as padding, margins, borders, and background colors. It is a foundational building block for creating UI layouts.
Here's an explanation of its properties and usage, followed by some examples:
### Properties of `Container`
- **child**: The widget that this container holds.
- **alignment**: Aligns the child within the container.
- **padding**: Adds padding inside the container around the child.
- **color**: Sets the background color of the container.
- **decoration**: Provides more customization like borders, gradients, shadows, etc.
- **width and height**: Sets the width and height of the container.
- **margin**: Adds margin outside the container.
- **constraints**: Additional constraints on the container's size.
- **transform**: Applies a transformation to the container.
### Basic Example
A simple `Container` with a background color, padding, and a child text widget.
```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('Container Widget Example'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(16.0),
color: Colors.blue,
child: Text(
'Hello, Flutter!',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
);
}
}
```
### Container with Margin, Border, and Alignment
Here we add margin, border, and align the text within the container.
```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('Container Widget Example'),
),
body: Center(
child: Container(
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.black, width: 2),
borderRadius: BorderRadius.circular(12),
),
alignment: Alignment.center,
child: Text(
'Hello, Flutter!',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
);
}
}
```
### Container with Gradient Background
This example shows how to apply a gradient background to the container.
```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('Container Widget Example'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.green],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(12),
),
alignment: Alignment.center,
child: Text(
'Hello, Flutter!',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
);
}
}
```
### Container with BoxShadow
Adding shadow to a container for a more elevated look.
```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('Container Widget Example'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
borderRadius: BorderRadius.circular(12),
),
alignment: Alignment.center,
child: Text(
'Hello, Flutter!',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
);
}
}
```
### Transforming a Container
Applying transformations like scaling or rotating the container.
```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('Container Widget Example'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(16.0),
color: Colors.blue,
alignment: Alignment.center,
transform: Matrix4.rotationZ(0.1),
child: Text(
'Hello, Flutter!',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
);
}
}
```
Contact us for software training, education or development
.png)
0 Comments