Flutter - the most detailed Container (container) tutorial

Container

Attributes	effect
child	Inside the configuration containerlayout
padding	Set the container's internaldistance
alignment	set the content of the containeralignment
color	set containerbackground color
margin	Set external to the containerdistance
decoration	Configure the container's externalstyle
constraints	Configure the container's externalConstraints, max width, max height
width	set the width of the container
height	Set the height of the container

• Create a container with a specified width and height

import 'package:flutter/material.dart';
class CustomContainer extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      alignment: Alignment.topLeft,
      width: 200,
      height: 200,
      color: Colors.red,
    );
  }
}

• Put a child component in the container

import 'package:flutter/material.dart';
class ContainerWithChild extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      alignment: Alignment.topLeft,
      padding: EdgeInsets.all(20),
      margin: EdgeInsets.all(10),
      width: 200,
      height: 200,
      color: Colors.grey,
      child: Icon(Icons.android),
    );
  }
}

• Bottom alignment of child component container

import 'package:flutter/material.dart';
class ContainerAlignment extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      alignment: Alignment.bottomRight,
      width: 200,
      height: 200,
      color: Colors.grey,
      child: Icon(
        Icons.android,
        color: Colors.green,
      ),
    );
  }
}

• It should be noted that when adding a layout of a decorative container
  , when the decorator is setColorbackground color, the Container'sColorAttribute cannot be used, only choose one of the two

import 'package:flutter/material.dart';
class ContainerDecoration extends StatelessWidget {
    
    

  final List<int> rainbow = [
    0xffff0000,
    0xffFF7F00,
    0xffFFFF00,
    0xff00FF00,
    0xff00FFFF,
    0xff0000FF,
    0xff8B00FF
  ];
 final List<double> stops = [0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0];
  @override
  Widget build(BuildContext context) {
    
    

    return Container(//容器
      alignment: Alignment.center,
      width: 200,
      height: 200,
      margin: EdgeInsets.all(20),
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(//添加渐变色
          gradient: LinearGradient(
              stops: stops,
              colors: rainbow.map((e) => Color(e)).toList()),
          borderRadius: BorderRadius.only(//添加圆角
              topLeft: Radius.circular(50),
              bottomRight: Radius.circular(50)),
          boxShadow: [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(1, 1),
                blurRadius: 10,
                spreadRadius: 1),
          ]),
      child: Text(
        "Container",
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}

• Layout with constrained width and height

import 'package:flutter/material.dart';
class ContainerConstraints extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      //容器
      color: Colors.blue,
      width: 200,
      height: 200,
      constraints: BoxConstraints(
          minWidth: 100, maxWidth: 150,
          minHeight: 20, maxHeight: 100),
    );
  }
}