Fluent Container component - Container

Into the Flutter

As the most popular cross platform technology framework, Flutter is being used by more and more developers and organizations, and it is completely free and open source. First, let's take a look at the Flutter plug-in.

What is Flutter?

Flutter is a set of open-source cross platform UI framework launched by Google. It is a mobile application development framework developed with Dart language. It can quickly build high-quality native user interface on Android, iOS and Web platforms. At the same time, flutter is the default development kit for Google's newly developed Fuchsia operating system. Flutter is one of the hottest front-end technologies. In short, flutter is a mobile application SDK, including framework, controls and some tools. It can build Android and iOS applications with a set of code at the same time, and the performance can reach the same performance as the native application.

Flutter frame structure

The following figure is the structure diagram of the Flutter framework. For most developers, the most commonly used is the Widgets layer. The visible and invisible elements on the screen are implemented by the Widgets layer. It has two out of the box Widget Libraries - Material and Cupertino.

Main features of Flutter framework

1. Rapid development

The hot overload of Flutter can test, reconstruct UI and fix bug quickly and conveniently. Experience sub second level reloading on the simulator and Android hardware without losing state.

2. Cross platform

Flutter can span at least 5 platforms and even support embedded development. We often use Mac OS, Windows, Linux, Android, IOS, and even Google's latest operating system Fuchsia.

3. Responsive framework

Through the Reactive framework of Flutter, rich platform layout and basic components, user interface can be built quickly and easily. Use powerful and flexible apis to solve 2D, animation, gesture, effect and other problems.

4. Gorgeous UI

Through the beautiful texture design and Cupertino built in Flutter, rich animation api and platform perception, users are satisfied with the interface design.

Meet Container

There is a very important core concept in Flutter: everything is a component, and all elements of Flutter are composed of components. Container is a common control, which is composed of several controls responsible for layout, painting, positioning and size adjustment. Specifically, container is composed of LimitedBox, ConstrainedBox, Align, Padding, DecoratedBox and Transform controls, rather than subclassing the container to produce custom effects.

Details of main parameters of Container

attribute explain
padding padding
margin Margin
decoration Decoration BoxDecoration type
width Container width
height Container height
constraints Additional constraints applied to child elements
child Container child element
color Background color
topCenter Align top center
topLeft Align top left
topRight Align top right
center Align horizontally and vertically
centerLeft Vertical center horizontal left
centerRight Vertical center horizontal right
bottomCenter Align bottom center
bottomLeft Align bottom left
bottomRight Align bottom right

The above attributes are applied as follows:

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    var imgUrl =
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Container",
      home: Scaffold(
        appBar: new AppBar(
          title: new Text("Container"),
        body: new Container(
          //Outer margin, value is an EdgeInsets object
          margin: EdgeInsets.all(30.0),
          //Inner spacing, value is an EdgeInsets object
          padding: EdgeInsets.fromLTRB(30.0, 0, 0, 0),
          //Alignment.topLeft : vertical top horizontal left alignment.
          //Alignment.topCenter : align vertically and horizontally to the top.
          //Alignment.topRight : vertical top horizontal right alignment.
          //Alignment.centerLeft : vertical center horizontal left alignment.
          //Alignment.center : align the vertical and horizontal centers.
          //Alignment.centerRight : vertical center horizontal right alignment.
          //Alignment.bottomLeft : vertical bottom horizontal left alignment.
          //Alignment.bottomCenter : align vertically and horizontally to the bottom.
          //Alignment.bottomRight : vertical bottom horizontal right alignment.
          alignment: Alignment.centerLeft,
          //Decoration, background border, etc. cannot be set at the same time as the color attribute, and will be covered by child
          decoration: new BoxDecoration(
              color: new Color(0xFFFF0000),
              //Background border
              border: new Border.all(
                  color: new Color(0xFFFFFF00),
                  width: 5),
              //Border fillet
              borderRadius: new BorderRadius.only(
                  topLeft: new Radius.circular(5.0),
                  topRight: new Radius.circular(10.0),
                  bottomLeft: new Radius.circular(15.0),
                  bottomRight: new Radius.circular(20.0)),
              //Gradient effect, overlay color
              gradient: new LinearGradient(colors: [
                new Color(0xFFFFDEAD),
                new Color(0xFF98FB98),
                new Color(0xFF6495ED)
              //Shadow effect
              boxShadow: [new BoxShadow(color:Color(0xFFFF0000),blurRadius: 5.0)],
              //Background mixed mode
              backgroundBlendMode: BlendMode.color,
          constraints: new BoxConstraints(maxWidth: 300.0, maxHeight: 400.0),
          //Shape transformation is used in animation
          transform: new Matrix4.skewY(0.3),
          child: new Text(
            "Hello World",
            textDirection: TextDirection.ltr,
            style: new TextStyle(color: new Color(0xFFFFFFFF), fontSize: 40.0),

The operation results are as follows:

You can see that the various properties we set for Container are presented, including the border, fillet, gradient background, matrix transformation and a series of properties that make its effect richer.

Tags: Android Google iOS Mobile

Posted on Thu, 04 Jun 2020 18:55:26 -0700 by Sinister747