[shutter -- layout] basic use of container

One 、 brief introduction

Container stay Flutter It's very common in . Official profile , Is a combination of drawing （painting）、 location （positioning） And size （sizing）widget Of widget.

You can get a few messages , It's a combination widget, There are drawings inside widget、 location widget、 Size widget. I saw a lot later widget , Through some more basic widget Combined .

1. effect

Used to place widget The container of , Yes padding、margin、 Location 、 Size equal parameter

• The most commonly used default layout ！ Only one can be included child:, The supporting configuration padding,margin,color, Wide and high ,decoration（ Generally configure borders and shadows ） Other configuration ,
• stay Flutter in , Not all controls have Wide and high 、padding、margin、color Equal attribute , So there is Padding、Center etc. Widget.

2. attribute

• key：Container Unique identifier , Used to find updates .

• alignment： control child The alignment of , If container perhaps container The parent node size is larger than child The size of the , This property setting will work , There are many kinds of alignment .

• padding：decoration A blank area inside , If there is child Words ,child be located padding Inside .padding And margin The difference is that ,padding Is contained in content Inside , and margin It's the outer boundary , To set the click event ,padding The area will respond , and margin The area will not respond .

• color： Used to set container Background color , If foregroundDecoration Set it up , May cover up color effect .

• decoration： Draw on child The back decoration , Set up decoration Words , You can't set color attribute , Otherwise, an error will be reported , It should be at decoration Set the color in .

• foregroundDecoration： Draw on child The front decoration .

• width：container Width , Set to double.infinity It can be forced to fill the width , Not set up , According to child Layout with both parent nodes .

• height：container Height , Set to double.infinity Can be forced to fill up at height .

• constraints： Add to child On additional constraints .

• margin： Around decoration and child A blank area outside , Not part of the content area .

• transform： Set up container The transformation matrix of , The type is Matrix4.

• child：container The content in widget.

3. Use scenarios

Container In the current project , The one most often used widget . In actual use , It will be used in the following cases Container, Of course, it's not absolute , It can also be done through other widget To achieve .

• The interval needs to be set （ In this case , If it's just a simple interval , It can also be done through Padding To achieve ）;
• You need to set the background color ;
• When you need to set rounded corners or borders （ClipRRect You can also achieve the fillet effect ）;
• Need alignment （Align It can also be realized ）;
• When you need to set the background picture （ You can also use Stack Realization ）.

Two 、 example

1. design sketch

2. Code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
  const MyApp({
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      title: 'Welcome to Flutter',

      home: Scaffold(
          appBar: AppBar(
            title: Text('Container  Basic use of '),
          ),
          body: Container (
            constraints: BoxConstraints.expand(
              height: Theme.of(context).textTheme.headline4!.fontSize! * 1.1 + 200,
            ),
            decoration: BoxDecoration(
              border: Border.all(width: 2.0,color: Colors.red),
              color: Colors.grey,
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
              image: DecorationImage(
                image: AssetImage("images/avatar.png"),
                centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0)
              ),
            ),
            padding: EdgeInsets.all(8.0),
            alignment: Alignment.center,
            child: Text('Hello Kevin',
            style: Theme.of(context).textTheme.displayMedium!.copyWith(color: Colors.black)),
            transform: Matrix4.rotationZ(0.3),

          )
      )

    );
  }
}