Flutter 08

So far we’ve been only adding one widget to the body. We now want to add multiple different widget to the body using the Row widget.

children: <Widget> []

Since row widget is meant to be have multiple child, the vector is called children.

In the instance below we add three different widget (Text, FlatButton, Container) to the vector.

      body: Row(    children: <Widget>[      Text('Im text'),      FlatButton(        onPressed: (){},        color: Colors.grey,        child: Text('click me'),      ),      Container(        color: Colors.amberAccent,        padding: EdgeInsets.all(30.0),        child: Text('In container'),      )    ],  ),

As we can see three object stick with each other in the body, which is a little unpleasant. In row widget, there’s a property called mainAxisAlignment that you can controll the object in main axis direction.

There are different kind of alignment.

For instance, let’s use spaceBetween then the object will have even distance between each other, but no space between the either ends.

We can apply crossAxisalignment so well which work like the previous one, except it is in CrossAxis direction now.

import 'package:flutter/material.dart';void main() => runApp(MaterialApp(  home: home(),));class home extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold( //ROOT WIDGET      appBar: AppBar(        title: Text(          'CodeForces',          style: TextStyle(            fontSize: 25.0,            letterSpacing: 2.0,            color: Colors.white,            fontFamily: 'BebasNeue',          ),        ), //SET THE TITLE TEXT        centerTitle: true,    //SET THE PROPERTIES, WHERE THE TEXT SHOWED AT THE CENTRE        backgroundColor: Colors.red,      ),      body: Row(        mainAxisAlignment: MainAxisAlignment.spaceBetween,        crossAxisAlignment: CrossAxisAlignment.end,        children: <Widget>[          Text('Im text'),          FlatButton(            onPressed: (){},            color: Colors.grey,            child: Text('click me'),          ),          Container(            color: Colors.amberAccent,            padding: EdgeInsets.all(30.0),            child: Text('In container'),          )        ],      ),      floatingActionButton: FloatingActionButton( //CREATE A FLOATING BUTTON        child: Text('click'),        backgroundColor: Colors.red[600],      ),    );  }}

Result:

Flutter Tutorial for Beginners #11 - Rows