Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money.

📝 [Flutter] learning to form a record, [programmer essential knowledge]

📔 Basic Components of Flutter [02] Container!

1. Write at the front

This article introduces the basic syntax of Flutter and concludes with the introduction of the basic components of Flutter. Today we will learn the Text of Flutter.

  • 【 Basic Grammar 】

Dart uses var, final, and const

Dart Indicates the num of the data type

Dart String of data type

Dart data type list&Map

Dart method and arrow function

Dart’s method passes optional parameters and methods as parameters

Dart, Dart, Dart, Dart

Dart classes and objects in Flutter

Dart constructor of Flutter

Dart factory constructor & singleton & Initializer list

Dart class methods and object operators for Flutter

Inheritance of Flutter Dart

Dart abstract classes and interfaces in Flutter

Dart, Dart, Dart, Dart, Dart, Dart

  • [Collection of Basic Components]

The base component of Flutter [01] Text

2. What is Container?

Container is a Container class that can be used to draw, position, and resize widgets. Everything in a Flutter is a widget.

2.1 the Container of

The innermost layer of the Container is the Child element, which is first wrapped by the padding, then adds additional constraints to the constraints, and finally adds a margin.

Container size can be adjusted in two ways: When a Container has no children, it tries to become large enough. Unless constraints are unbounded, in which case the Container will try to be small enough.

The Container of the string node resizesaccording to the size of its children, but the Container constructor resizesaccording to the parameters in the constructor if the Container constructor contains width, height, and constraints.

2.2 the Container layout

Container tries the layout in the following order:

  • Alignment: Resizes itself to fit child nodes, uses width, height, and constraints layouts, extends itself to fit parent nodes, and adjusts itself to be small enough.

  • Further: If there are no children, width, height, and constraints are not set, and the parent has no unbounded limits, the Container will adjust itself to be small enough.

  • If the Container does not have child nodes or an alignment, but provides width, height, or constraints, then the Container adjusts itself to be small enough based on its limitations and those of the parent node.

2.3 the Container property

  • Key:ContainerA unique identifier used to find updates.
  • Alignment: controlchildAlignment, ifcontainerorcontainerThe size of the parent node is greater thanchildSize, this property setting will come into play, there are many ways to align.
  • Padding:decorationInternal blank area, if anychildWords,childLocated in thepaddingInternal.paddingwithmarginThe difference is,paddingIs included in thecontentWhile the internal,marginIs the outer boundary, and if I set the click event,paddingThe region will respond, andmarginThe region is not responding.
  • Color: used to setcontainerBackground color, ifforegroundDecorationIf you set it, it might cover it upcolorThe effect.

For example, 2.4

void main(a){

  runApp(
    Container(
      margin: EdgeInsets.all(10),
      color: Colors.red,
      alignment: Alignment(0.0),
      child: Container(
        margin: EdgeInsets.all(10),
        color: Colors.brown,
        width: 250,
        height: 250,
        child: Text(
                'Hello World',
                textDirection: TextDirection.ltr,
                style: TextStyle(fontSize: 26,color: Colors.blue,backgroundColor: Colors.white),
              ),
      ),
    ),
  );

}
Copy the code
  • Code performance

More content to this API. Flutter. Dev/flutter/wid…

3. Write in the back

Follow me, more content continues to output

  • CSDN
  • The Denver nuggets
  • Jane’s book

🌹 if you like, give it a thumbs up 👍🌹

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹