Layout, Screen

Screen orientation

• https://stackoverflow.com/a/56575657/3165400 For android just add this to MainActivity in Manifest

android:screenOrientation="portrait"

And for ios, set portrait orientation in XCode

Screen size, Widget size, Available space

• See LayoutBuilder https://www.youtube.com/watch?v=IYDVcriKjsw
• See MediaQuery https://www.youtube.com/watch?v=A3WrA4zAaPw

Layout

• Container or Scaffold as screen root widget will match parent.
• Row and Column (and any others which have no backgroundColor attribute) as root widgets: I don't see any way to reliably check how they draw themselves as screen root widgets since they have no backgroundColor attribute.
• Containers inside Align center inside Raw(as root screen layout) and without any size and children - wraps content, e.g. not visible as dot.

Example #1:

• Column - is aka LinearLayout with vertical orientation, wrap_content by default,
• Expanded - it's like we set weight for the child of the LinearLayout, 1 by default.
• Container
  • with width: MediaQuery.of(context).size.width we use to make both body Column and its child to match_parent by width. Column doesn't have a with attribute. Only the first child matches the parent. All others still wrap_content by default, and gravity center horizontal by default.
  • And to set a background color (Column doesn't have such an attribute).
  • To set margin, neither column nor Image doesn't have the margin attribute. In a more general case, you should wrap widget with Padding widget to set paddings. Container however has both, margin and padding attributes. Probably padding attribute just wraps child widget with Padding widget. See more https://stackoverflow.com/a/53679108/3165400

body: Column(
  children: <Widget>[
    Expanded(
      child: Container(
        child: Column(
          children: <Widget>[
            Image(
              image: AssetImage('images/logo.png'),
            ),
          ],
        ),
        margin: const EdgeInsets.only(top: 64),
        width: MediaQuery.of(context).size.width,
        color: Colors.amber.shade500,
      )
    ),
    Column(