Conversation

Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!

Join the discussion and share your insights now!

Comments 0

advertisement

Container Widget in Flutter

Profile Image

Zia

1 Follower

Oct 2, 2024
-
16 sec read
30
0
0
0

container in flutter❌
A Container widget is one of the most popular widgets in Flutter. It can be used to accomplish various purposes such as creating a box with color, customizing with a neat curved border, placing any other widget inside as a child, and so on. container also has properties such as padding, margin, shape, alignment, and constraints.


Properties of Container widget

The following are the properties of the Container widget:


1. child:

This property permits storing the child widget of the container.

Container(
  child: Text("Hey There!"),
);


2. color:

This property helps in setting the color of the background for the entire container.

Container(
  color: Colors.blue,
  child: Text("Hey There!"),
);


3. height and width:

This property is used for setting the height and width of the container. By default, this takes the space depending on its child widget.

Container(
  width: 200.0,
  height: 100.0,
  color: Colors.blue,
  child: Text("Hey There!"),
);


4. margin:

Used to cover the empty space throughout the container.

Container(
  width: 200.0,
  height: 100.0,
  color: Colors.blue,
  child: Text("Hey There!"),
  margin: EdgeInsets.all(10),
);


5. EdgeInsets.all:

This specifies offsets in all four directions.


6. padding:

For setting the distance between the container's border and its child widget, this property is used.

Container(
  width: 200.0,
  height: 100.0,
  color: Colors.blue,
  child: Text("Hey There!"),
  margin: EdgeInsets.all(20),
  padding: EdgeInsets.all(20),
);


7. alignment:

This property helps in setting the position of the child widget in the container.

Container(
  width: 200.0,
  height: 100.0,
  color: Colors.blue,
  child: Text("Hey There!"),
  margin: EdgeInsets.all(20),
  padding: EdgeInsets.all(20),
  alignment: Alignment.bottomRight,
);


8. decoration:

For adding decoration to the widget, this property is useful. This decorates or paints the widget behind the child. For decorating in front of the child, the foregroundDecoration parameter is used. The decoration property offers many options like colors, gradients, background images, etc.

Container(
  width: 200.0,
  height: 100.0,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text("Decorated Container!"),
);


9. transform:

This property is used for rotating the container in any direction. Additionally, it allows changing the coordinates of the container in the parent widget.

Container(
  width: 200.0,
  height: 100.0,
  color: Colors.blue,
  child: Text("Rotated Container!"),
  transform: Matrix4.rotationZ(0.2),
);


10. constraints:

For adding extra constraints to the child widget, the constraints property is utilized. This property has different constructors.

Container(
  width: 200.0,
  height: 100.0,
  color: Colors.blue,
  child: Text("Constrained Container!"),
  constraints: BoxConstraints(
    maxHeight: 150.0,
    maxWidth: 300.0,
  ),
);


Video source code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Container Widget'),
        ),
        body: Center(
          child: Container(
            height: 40.0,
            width: 80.0,
            margin: EdgeInsets.all(50.0),
            padding: EdgeInsets.all(5.0),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.teal,
              borderRadius: BorderRadius.circular(10),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  blurRadius: 10,
                  offset: Offset(2, 2),
                )
              ],
            ),
            transform: Matrix4.rotationZ(0.1),
            constraints: BoxConstraints(
              maxHeight: 150.0,
              maxWidth: 150.0,
            ),
            child: Text(
              'hey there!',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}


Flutter Container Widget - Full Guide with Examples & Key Properties!



flutter container widget flutter widgets flutter container widget container widget in flutter properties of container widget

advertisement

Profile Image

Published by: 

1 Follower

Zia

Web Developer | App Developer | Freelancer | Blogger

More From: 
Zia
semantic tags in html5
Semantic tags in HTML5 -...

Several elements and principles are used to get the desired results from ...
Profile Image
Zia
Jul 1, 2024
241
0
0
0
Laravel
What is Laravel - Features...

Laravel is an opensource PHPframework for users working onWeb application development. Considered ...
Profile Image
Zia
Mar 21, 2024
117
0
0
0
HTML 5
What is HTML5? A Comprehensive...

In the trendy virtual landscape, websites have become an integral part of ...
Profile Image
Zia
Feb 5, 2024
255
0
0
0
on page seo
Complete Guide to On-page Optimization:...

Onpage SEOis the process of optimizing individual Web pages with qualitycontent and ...
Profile Image
Zia
Apr 13, 2024
144
0
0
0
Recomended
Function and Array in PHP
Function and Array in PHP

Functions can be defined as a named section of a program that ...
Profile Image
Zia
Apr 3, 2024
127
0
0
0
Looping statement in dart
Looping Statement in Dart Programming

In Dart, looping statements are used to execute a block of code ...
Profile Image
Zia
Jun 6, 2024
204
0
0
0
SEO
What is Search Engine Optimization...

Search engine optimization SEO refers to the processof increasing the visibility of ...
Profile Image
Zia
Mar 18, 2024
177
0
0
0