Chapter 2 Using Container Widgets

1. Basic structure

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: "Component learning",
      home: Scaffold(
        body: Center(
            child: Container(
              child: new Text(
                "Hello Container component",
                style: TextStyle(
                  fontSize: 40.0,
                ),
              ),
              alignment: Alignment.center,// Alignment
              width: 500.0,
              height: 400.0, color: Colors.lightBlue, ), ), ), ); }}Copy the code

2. Effect display

3. Attribute interpretation

• BottomCenter: Align the bottom in the middle.

• BotomLeft: Align bottom left.

• BottomRight: align the bottomRight.

• Center: align vertically and horizontally in both directions.

• CenterLeft: vertically centered and horizontally aligned to the left.

• CenterRight: vertically centered horizontally aligned to the right.

• TopLeft: topLeft aligned.

• TopCenter: topCenter aligned.

• TopRight: Left-aligned at the top.