flutter-レイアウト-container

Container:使用する

1.      
2.     :    ,   ,  
3.    padding margin

demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('     - Container'),
        ),
        body: Container(
          key: Key('yuotng.com'), //        key
//          color: Colors.yellowAccent, //   
          decoration: BoxDecoration( //            
            color: Colors.green, //   
            image: DecorationImage(
              image: NetworkImage('http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg'),
              colorFilter: ColorFilter.mode(Colors.white, BlendMode.multiply), //   
              fit: BoxFit.fitWidth, //     
//              centerSlice: Rect.fromLTRB(0, 0, 0, 0),
              repeat: ImageRepeat.repeat,
              matchTextDirection: false,
            ),
            borderRadius: BorderRadius.all( Radius.circular(20.0)),
            boxShadow: [
              BoxShadow(
                offset: Offset(6, 6),
                color: Colors.red,
              ),
              BoxShadow(
                offset: Offset(6, 10),
                color: Colors.green,
              ),
              BoxShadow(
                offset: Offset(6, 14),
                color: Colors.black45,
              ),
            ],
            border: Border.all(
              color: Colors.red,
              width: 4,
              style: BorderStyle.solid,
            ),
          ),
        width: 400.0, //container   ，   double.infinity          ，   ，   child          
        height: 400.0, //container   ，   double.infinity          
        child: Text(
            'content',
            style: TextStyle(
              backgroundColor: Colors.red,
            ),
        ),
        padding: EdgeInsets.all(90.0),
        margin: EdgeInsets.all(20.0),
        constraints: BoxConstraints.expand( //    width  height
          width: 180,
          height: 180,
        ),
        alignment: Alignment.topLeft,
        transform: Matrix4.rotationZ(0.3), //    
//          foregroundDecoration: BoxDecoration(  //    child     
//            color: Colors.red,
//          ),
        ),
      ),
    );
  }
}

1.1   

Container     ：

     child  ；
child      padding  ；
       constraints  ；
    margin。
Container        ：

     transform  ；
    decoration；
    child；
    foregroundDecoration。
Container            ：

Container      （children）   ，         。  constraints unbounded  ，      ，Container         。
     Container，              ，  Container         width、height  constraints，                   。

1.2     

  Container       widget，  widget         ，  Container              。

     ，Container            ：

  （alignment）；
           ；
  width、height  constraints  ；
          ；
        。
    ：

       、    width、height  constraints，         unbounded   ，Container          。
       、    （alignment），     width、height  constraints，  Container             ，         。
       、width、height、constraints  alignment，        bounded  ，  Container         ，         。
   alignment，      unbounded  ，  Container           child；
   alignment，        bounded  ，  Container          （        ），   child  alignment    ；
  child，    width、height、constraints  alignment，Container      constraints   child，    child    。
  ，margin  padding         。

    

key：Container     ，      。

alignment：  child     ，  container  container       child   ，          ，        。

padding：decoration       ，   child  ，child  padding  。padding margin       ，padding    content ， margin      ，        ，padding     ， margin      。

color：    container   ，  foregroundDecoration    ，     color  。

decoration：   child     ，   decoration  ，     color  ，     ，     decoration        。

foregroundDecoration：   child     。

width：container   ，   double.infinity          ，   ，   child          。

height：container   ，   double.infinity          。

constraints：   child        。

margin：   decoration child       ，       。

transform：  container     ，   Matrix4。

child：container    widget。