iT邦幫忙

0

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.

  • Row
    Row is a widget that contains a vector with the type 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


尚未有邦友留言

立即登入留言