Flutter Widgets & Layouts Part2

In this post we will explore more widgets with flutter

Text Widget

We have already seen text widget in our app before, let’s see it more in detail

https://api.flutter.dev/flutter/widgets/Text-class.html

right now we won’t go further detail in this as its not required

Row, Column

https://api.flutter.dev/flutter/widgets/Row-class.html

This is to arrange display in rows . Let’s see it in action in our code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: Text('Deliver features faster', textAlign: TextAlign.center),
        ),
        Expanded(
          child: Text('Deliver features faster', textAlign: TextAlign.center),
        )
      ],
    );
  }
}

When you deploy this code you will get this error I/flutter (28496): The following assertion was thrown building Text(“Deliver features faster”, textAlign: center):

To fix we need to add text directions to components.so updated code is

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      textDirection: TextDirection.ltr,
      children: <Widget>[
        Expanded(
          child: Text('Deliver features faster', textAlign: TextAlign.center, textDirection: TextDirection.ltr,),
        ),
        Expanded(
          child: Text('Deliver features faster', textAlign: TextAlign.center, textDirection: TextDirection.ltr),
        )
      ],
    );
  }
}

This is mainly because the parent components don’t have any text directions. So we need to provide it to child components.

No on your phone you should see two rows

There are many more things to Row class, read more details in its documentation.

Also above we use another Widget:

Expanded

What this does it automatically take all available space. https://api.flutter.dev/flutter/widgets/Expanded-class.html

Let’s see how the ui looks without expanded classes

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      textDirection: TextDirection.ltr,
      children: <Widget>[
        Text('Deliver features faster', textAlign: TextAlign.center, textDirection: TextDirection.ltr,),
        Expanded(
          child: Text('Deliver features faster', textAlign: TextAlign.center, textDirection: TextDirection.ltr),
        )
      ],
    );
  }
}

We have another option called “Flexible” https://api.flutter.dev/flutter/widgets/Flexible-class.html lets see what it does . Try it out yourself and see the difference

Next lets’ see Column class

https://api.flutter.dev/flutter/widgets/Column-class.html

Let’s just change Row to Column in our code and see what happens

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      textDirection: TextDirection.ltr,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Text(
          'Deliver features faster2',
          textAlign: TextAlign.center,
          textDirection: TextDirection.ltr,
        ),
        Text('Deliver features faster3',
            textAlign: TextAlign.center, textDirection: TextDirection.ltr),
      ],
    );
  }
}

Here we see that we see two lines of text, but its at the absolute top. Which is not good. Let’s see how we can center it.

First approach try out this “Expanded”

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      textDirection: TextDirection.ltr,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Expanded(
          child: Text('Deliver features faster2', textAlign: TextAlign.center, textDirection: TextDirection.ltr,),
        ),
        Expanded(
          child: Text('Deliver features faster3', textAlign: TextAlign.center, textDirection: TextDirection.ltr),
        )
      ],
    );
  }
}

When you try this it out you will see you only see the second text in center of screen. Problem is that “Expanded” takes all available space and vertically we don’t have any fixed constraints. If you do “Flexible” it will also not solve the problem. Let’s see other options which we have.

To fix this we need to use properties ” crossAxisAlignment ” , ” mainAxisAlignment “. It’s also important to read things yourself from flutter documentation as you will find lot of information there

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      textDirection: TextDirection.ltr,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Flexible(
          child: Text('Deliver features faster2', textAlign: TextAlign.center, textDirection: TextDirection.ltr,),
        ),
        Flexible(
          child: Text('Deliver features faster3', textAlign: TextAlign.center, textDirection: TextDirection.ltr),
        )
      ],
    );
  }
}

Now in the output you will see the text vertically aligned.

We can also nest columns/row to make a complex grid structure.

Simple try out a code yourself to make 3×3 grid structure and display some text in the boxes. (try yourself first!) and then see my code.

https://gist.github.com/excellencetechnologies/b980fccbd4d22d19e3983d98dba1688e

Try out more layouts yourself using row/column to get a better understanding.

Container

https://api.flutter.dev/flutter/widgets/Container-class.html

Container class provide us with more features ” The Container widget lets you create a rectangular visual element. A container can be decorated with a BoxDecoration, such as a background, a border, or a shadow. A Container can also have margins, padding, and constraints applied to its size. In addition, a Container can be transformed in three dimensional space using a matrix. “

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: const EdgeInsets.all(10.0),
        color: Colors.amber[600],
        width: 48.0,
        height: 48.0,
      ),
    );
  }
}

Stack

This is used to put containers or widgets on top of each other. similar to position absolute in css.