[shutter -- layout] stacked layout (stack and positioned)

Flutter Use in Stack and Positioned These two components work together to achieve absolute positioning .Stack Allow subcomponents to stack , and Positioned For use in accordance with Stack Four corners to determine the location of the subcomponents .

Stack

1. brief introduction

Stack By analogy web Medium absolute, Absolute layout . Absolute layout is generally used less in mobile terminal development , But in some scenarios , It still has its function . Of course , It works Stack The absolute layout is complete , It can also be realized with other control combinations .

2. attribute

alignment： Alignment mode , The default is the upper left corner （topStart）.

textDirection： Direction of text , Most don't need to deal with .

fit： Define how to set non-positioned Node size , The default is loose.

among StackFit There are the following ：

• loose： The value of the child node is loose , It can be downloaded from min To max The size of the ;
• expand： Child nodes occupy as much space as possible , take max Size ;
• passthrough： Do not change the constraints of child nodes .

overflow： Whether the excess part is cut off （clipped）.

3. example

1. design sketch

3. 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(' Lay out in layers '),
            ),
            body: Center(
              child: Stack(
                alignment: const Alignment(0.6, 0.6),
                children: <Widget>[
                  CircleAvatar(
                    backgroundImage: AssetImage('images/avatar.png'),
                    radius: 100.0,
                  ),

                  Container(
                    decoration: BoxDecoration(
                      color: Colors.black45
                    ),
                    child: Text(
                      'KevinDev',
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  )
                ],
              ),
            )
        )
    );
  }
}

Positioned

1. brief introduction

Absolute positioning , Used to locate subcomponents

2. attribute

left、top、right、bottom： They stand for leaving Stack Left 、 On 、 Right 、 The distance between the lower four sides .

width、height： Specify the width and height of the element to be positioned .

notes ：Positioned Of width、height It's a little different from other places , It's used to match left、top 、right、 bottom To locate components ,

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(' Lay out in layers '),
            ),
            body: ConstrainedBox(
              constraints: BoxConstraints.expand(),
              child: Stack(
                alignment:Alignment.center , // Specify no or partial positioning widget The alignment of 
                children: <Widget>[
                  Container(
                    child: Text("Hello world",style: TextStyle(color: Colors.white)),
                    color: Colors.blue,
                  ),
                  Positioned(
                    left: 18.0,
                    child: Text("I am Kevin"),
                  ),
                  Positioned(
                    top: 18.0,
                    child: Text("Your friend"),
                  )
                ],
              ),
            )
        )
    );
  }
}