Fltter basics

✨ Credits

I will be following this YT video from freecodecamp.

Additional links:

• Author’s blog post
• Installing on mac
• Installing on win
• App that we will be building

💖 Introduction (summary)

Todo: (in the end)

1. Layout in flutter

blog

Layouts control the way content is displayed dynamically.

For example, Container is same as div in html which stores content.

Usage:

Scaffold(
    ...
    body: Container(
        // `decoration` defines how container
        // is presented to user.
        decoration: BoxDecoration( // keys: https://api.flutter.dev/flutter/painting/BoxDecoration-class.html
            color: Colors.red, // (or) Color.fromRGBO(38, 38, 38, 0.4)
        )

        // `child` is the contents
        child: Text('Content of a container.') 
    )
)

Note: Container cannot exist all by itself. It needs to be added into children of Column or Row. And we have to define the axis keys like mainAxisAlignment: MainAxisAlignment.start and crossAxisAlignment: CrossAxisAlignment.strech

see the whole code in blog page.

There are two types of body widgets - Row and Column. We will be mostly using column because of landscape orientation.

Types of axes: Axes are lines along screen. These are keys to Column or Row widget.

• mainAxisAlignment: vertical line from top to bottom.
• crossAxisAlignment: horizontal line from left to right.

We do the following inside body to get a successful view:

• Define body widget (Row, Column etc.)
• Add axis alignment
• Add child or children

see the code below.

body: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
    Container(
        decoration: BoxDecoration(
        color: Colors.red,
        ),
        child: Text('hi'),
    ),
        Container(
        decoration: BoxDecoration(
        color: Colors.green,
        ),
        child: Text('hi'),
    ),
        Container(
        decoration: BoxDecoration(
        color: Colors.blue,
        ),
        child: Text('hi'),
    ),
    ],
));