Regras de layout de vibração que todos devem saber

Quando um recém-chegado a Flutter pergunta por que um widget width: 100não tem 100 pixels de largura, geralmente ele diz para envolvê-lo Center, certo?

Não faça isso

Em caso afirmativo, responderão novamente, perguntando por que alguns deles FittedBoxnão funcionam, por que este está Columnlotado ou como funciona IntrinsicWidth.

, Flutter HTML (, -), , :

. () .

, , , - Flutter .

:

• . "" — 4 : , .
• . , ( ), , "" .
• ( x y) .
• , , ( , ).

, , , :

: , ?

: 90 300 30 85 .

: , 5 , 290 75 .

: , 0 290 0 75 .

: , 290 20 .

: , , 55 .

: , , 0 290 0 55 .

: , 140 30 .

: . x: 5 y: 5, – x: 80 y: 25.

: , , 300 60 .

Flutter :

• , . , , .
• , .
• , , , , .

, , :

• CodePen ( Run Pen, Rerun, );
• DartPad;
• GitHub.

1

Container(color: Colors.red)

"" Container. Container , "".

, Container , .

. , "screen" , -

ConstrainedBox( 
    constraints: BoxConstraints.tightFor(width: double.infinity, height: double.infinity), 
    child: example
)

. "", ConstrainedBox.
ConstrainedBox .

.

import 'package:flutter/material.dart';
void main() => runApp(ExampleTest());
class ExampleTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red
    );
  }
}

.

2

Container(width: 100, height: 100, color: Colors.red)

Container 100 × 100, , "" .
, Container .

3

Center(
   child: Container(width: 100, height: 100, color: Colors.red)
)

"" Center . , Center "".
Center Container, , "". Container 100 × 100.

4

Align(
   alignment: Alignment.bottomRight,
   child: Container(width: 100, height: 100, color: Colors.red),
)

Align Center.

Align Container, , , Container, .

5

Center(
   child: Container(
      color: Colors.red,
      width: double.infinity,
      height: double.infinity,
   )
)

"" Center . , Center .
Center Container, , "". Container , "", "".

6

Center(child: Container(color: Colors.red))

"" Center . , Center .
Center Container, , "". Container , , , "".

Container ? , , Container. -, Container, , .

7

Center(
   child: Container(
      color: Colors.red,
      child: Container(color: Colors.green, width: 30, height: 30),
   )
)

"" Center . , Center "".
Center Container, , "". Container , , , , .

Container , , "".

Container, 30 × 30. , Container , 30 × 30. , Container Container.

8

Center(
   child: Container(
     color: Colors.red,
     padding: const EdgeInsets.all(20.0),
     child: Container(color: Colors.green, width: 30, height: 30),
   )
)

Container , (padding). Container 30 × 30 . , Container , .

9

ConstrainedBox(
   constraints: BoxConstraints(
      minWidth: 70, 
      minHeight: 70,
      maxWidth: 150, 
      maxHeight: 150,
   ),
   child: Container(color: Colors.red, width: 10, height: 10),
)

, Container 70 150 , . ConstrainedBox , .

"" ConstrainedBox , Container "", .

10

Center(
   child: ConstrainedBox(
      constraints: BoxConstraints(
         minWidth: 70, 
         minHeight: 70,
         maxWidth: 150, 
         maxHeight: 150,
      ),
      child: Container(color: Colors.red, width: 10, height: 10),
   )    
)

Center ConstrainedBox , "". ConstrainedBox constraints.

, Container 70 150 . 10 , () 70.

11

Center(
  child: ConstrainedBox(
     constraints: BoxConstraints(
        minWidth: 70, 
        minHeight: 70,
        maxWidth: 150, 
        maxHeight: 150,
        ),
     child: Container(color: Colors.red, width: 1000, height: 1000),
  )  
)

Center ConstrainedBox , "". ConstrainedBox constraints.

, Container 70 150 . 1000 , () 150.

12

Center(
   child: ConstrainedBox(
      constraints: BoxConstraints(
         minWidth: 70, 
         minHeight: 70,
         maxWidth: 150, 
         maxHeight: 150,
      ),
      child: Container(color: Colors.red, width: 100, height: 100),
   ) 
)

Center ConstrainedBox , "". ConstrainedBox constraints.

, Container 70 150 . 100 , , 70 150.

13

UnconstrainedBox(
   child: Container(color: Colors.red, width: 20, height: 50),
)

"" UnconstrainedBox . , UnconstrainedBox Container , 20 × 50.

14

UnconstrainedBox(
   child: Container(color: Colors.red, width: 4000, height: 50),
)

"" UnconstrainedBox . , UnconstrainedBox Container (4000 × 50).

, Container 4000 , UnconstrainedBox, UnconstrainedBox " " (... OVERFLOWED BY ... PIXELS).

15

OverflowBox(
    minWidth: 0.0,
    minHeight: 0.0,
    maxWidth: double.infinity,
    maxHeight: double.infinity,
    child: Container(color: Colors.red, width: 4000, height: 50),
)

"" OverflowBox . , OverflowBox Container (4000 × 50).

OverflowBox UnconstrainedBox, , , .

Container 4000 , OverflowBox, OverflowBox , , - .

16

UnconstrainedBox(
   child: Container(
      color: Colors.red, 
      width: double.infinity, 
      height: 100,
   )
)

, .

UnconstrainedBox , , , Container (width: double.infinity).

Flutter , : Box Constraints forces an infinite width.

17

UnconstrainedBox(
   child: LimitedBox(
      maxWidth: 100,
      child: Container( 
         color: Colors.red,
         width: double.infinity, 
         height: 100,
      )
   )
)

. , LimitedBox UnconstrainedBox, 100.

, UnconstrainedBox Center, LimitedBox ( , LimitedBox "" ), Container 100.

LimitedBox ConstrainedBox.

18

FittedBox(
    child: Text('Some Example Text.', textDirection: TextDirection.ltr),
)

. , textDirection: TextDirection.ltr Text, , Text , . MaterialApp, Text textDirection.

"" FittedBox . Text ( intrinsic width), , ..

FittedBox Text , , , Text FittedBox, FittedBox , .

19

Center(
    child: FittedBox(
        child: Text('Some Example Text.', textDirection: TextDirection.ltr,),
    )
)

, FittedBox Center? Center FittedBox , , .

FittedBox Text, Text , . FittedBox, Text , .

20

Center(
    child: FittedBox(
        child: Text('This is some very very very large text that is too big to fit a regular screen in a single line.', textDirection: TextDirection.ltr,),
    )
)

, , FittedBox Center, Text , ?

FittedBox , Text, "". "" Text , "".

21

Center(
    child: Text('This is some very very very large text that is too big to fit a regular screen in a single line.', textDirection: TextDirection.ltr,),
)

, FittedBox, Text "" , "".

22

FittedBox(
   child: Container(
      height: 20.0, 
      width: double.infinity,
   )
)

. FittedBox , ( ). , : RenderConstrainedBox object was given an infinite size during layout..

23

Row(textDirection: TextDirection.ltr, children: <Widget>[
    Container(
        color: Colors.red,
        child: Text(
            'Hello!',
            textDirection: TextDirection.ltr,
        )),
    Container(
        color: Colors.green,
        child: Text(
            'Goodbye!',
            textDirection: TextDirection.ltr,
        )),
]);

"" Row .

, UnconstrainedBox, Row , , . Row , .

24

Row(textDirection: TextDirection.ltr, children: <Widget>[
    Container(
        color: Colors.red,
        child: Text(
            'This is a very long text that won’t fit the line.',
            textDirection: TextDirection.ltr,
        )),
    Container(
        color: Colors.green,
        child: Text(
            'Goodbye!',
            textDirection: TextDirection.ltr,
        )),
]);

Row , , , . , UnconstrainedBox, Row " ".

25

Row(textDirection: TextDirection.ltr, children: <Widget>[
    Expanded(
        child: Container(
            color: Colors.red,
            child: Text(
                'This is a very long text that won’t fit the line.',
                textDirection: TextDirection.ltr,
            ))),
    Container(
        color: Colors.green,
        child: Text(
            'Goodbye!',
            textDirection: TextDirection.ltr,
        )),
])

Row Expanded , Row .

Expanded , Expanded .

, Expanded, .

26

Row(textDirection: TextDirection.ltr, children: <Widget>[
    Expanded(
        child: Container(
            color: Colors.red,
            child: Text(
                'This is a very long text that won’t fit the line.',
                textDirection: TextDirection.ltr,
            ))),
    Expanded(
        child: Container(
            color: Colors.green,
            child: Text(
                'Goodbye!',
                textDirection: TextDirection.ltr,
            ))),
])

Row Expanded, Expanded , flex, Expanded .

27

Row(textDirection: TextDirection.ltr, children: <Widget>[
    Flexible(
        child: Container(
            color: Colors.red,
            child: Text(
                'This is a very long text that won’t fit the line.',
                textDirection: TextDirection.ltr,
            ))),
    Flexible(
        child: Container(
            color: Colors.green,
            child: Text(
                'Goodbye!',
                textDirection: TextDirection.ltr,
            ))),
])

, Flexible Expanded, , Flexible , Flexible, Expanded , Expanded.

Expanded, Flexible .

. , Flexible/Expanded Row. Row , Flexible/Expanded.

28

MaterialApp(
    home: Scaffold(
        body: Container(
            color: Colors.blue,
                child: Column(children: [
                    Text('Hello!'),
                    Text('Goodbye!'),
                ]))))

"" Scaffold . Scaffold "".

Scaffold Container, , "".

: , , , "loose" (. ) . .

29

MaterialApp(
    home: Scaffold(
        body: SizedBox.expand(
            child: Container(
                color: Colors.blue,
                child: Column(
                    children: [
                        Text('Hello!'),
                        Text('Goodbye!'),
                    ],
                )))))

, Scaffold , Scaffold, SizedBox.expand.

: , , , "tight" (. ) .

Tight × Loose

, "tight" "loose", , .

tight . , tight , , , .

box.dart Flutter BoxConstraints, :

BoxConstraints.tight(Size size)
   : minWidth = size.width,
     maxWidth = size.width,
     minHeight = size.height,
     maxHeight = size.height;

2, , "" Container , "". "" , tight Container.

loose , , /, , . , loose / :

BoxConstraints.loose(Size size)
   : minWidth = 0.0,
     maxWidth = size.width,
     minHeight = 0.0,
     maxHeight = size.height;

3, , Center Container , "". Center , loose . , Center , tight , (""), loose (Container).

, .

, , , .

, , , . , , .

, , , . , , , IDE.

:

• - Column (Ctrl-B IntelliJ). basic.dart . Column Flex, Flex ( basic.dart).
• , createRenderObject. , RenderFlex. Column. RenderFlex. flex.dart.
• , performLayout. , Column.

Simon Lightfoot .

• align_positioned
• assorted_layout_widgets

Flutter

• async_redux – Medium Async Redux: Flutter’s non-boilerplate version of Redux
• i18n_extension – Medium Mind-blowing Easy Translations and Internationalization for Flutter
• provider_for_redux
• network_to_file_image
• matrix4_transform
• back_button_interceptor
• indexed_list_view
• animated_size_and_fade

Sobre mim

• github
• Twitter
• stackoverflow

PS Ficarei feliz em ouvir todas as críticas, perguntas e sugestões para tradução em mensagens (pessoais).

PSS Mais uma vez um link para o artigo original do Flutter: A regra de layout avançado que mesmo os iniciantes precisam saber por Marcelo Glasberg