[shutter -- layout] detailed explanation of the use of align, center and padding

This paper mainly introduces Flutter In the layout Padding 、Align as well as Center Control .

Align

1. brief introduction

Development at other ends ,Align Generally, it is regarded as the property of a control , It is not taken out as a separate control .Align The functions implemented by itself are not complex , Set up child The alignment of , For example, center 、 On the left, on the right, etc , And according to child Adjust your own size .

2. attribute

• alignment： Alignment mode , Generally, the system default 9 Ways of planting , But it's not the only thing 9 Kind of , For example, the following definitions . The system provides 9 The two ways are only pre-defined .

• widthFactor： Width factor , If set ,Align The width of is child Multiply the width of by this value , It can't be negative .

• heightFactor： Height factor , If set ,Align The height of child Multiply the height of by this value , It can't be negative .

3. 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('Align'),
            ),
            body: Container(
              height: 120.0,
              width: 120.0,
              color: Colors.blue.shade50,
              child: Align(
                alignment: Alignment.topRight,
                child: FlutterLogo(
                  size: 60,
                ),
              ),
            )
        )
    );
  }
}

Center

1. brief introduction

Center Inherited from Align, It's just that alignment Set to Alignment.center, Other properties such as widthFactor、heightFactor, Layout behavior , Both with Align Exactly the same as , Here is no longer a separate introduction .Center Source code is as follows , No settings alignment attribute , Because Align The default alignment is centered .

class Center extends Align {
    
  /// Creates a widget that centers its child.
  const Center({
     Key key, double widthFactor, double heightFactor, Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

Padding

1. brief introduction

Padding stay Flutter There are also many in use , As a basic control , Very single function , Set... For child nodes padding attribute . Anyone who has written about other terminals knows this attribute , Is to set the inner margin property , A blank area in the inner margin , It's also widget Part of .

2. attribute

padding：padding The type of EdgeInsetsGeometry,EdgeInsetsGeometry yes EdgeInsets as well as EdgeInsetsDirectional Base class of . Internationalization is not involved in practical use , For example, it is suitable for the Arab region , It's generally used EdgeInsets.EdgeInsetsDirectional Just look at the naming, you can know that it is related to the direction , Therefore, its four margins are not limited to up, down, left and right , It depends on the direction .

3. Sample code

new Padding(
  padding: new EdgeInsets.all(8.0),
  child: const Card(child: const Text('Hello World!')),
)