Flutter Layouts Part3

In previous blog we saw very basic’s of layouts in flutter, now let’s see more advanced usage and more widgets

https://flutter.dev/docs/development/ui/layout

Most things in this blog are extended from above office document, go through it for sure.

Before we go further in layouts, one things needs to be understood. Flutter comes with a rich set of material ui components which make making layouts very easy. MaterialApp applies lot of default layout related setting which make it very easy to design beautiful apps. Right now we are working with more lower level components like Rows, Columns etc to understand the basics. To give an example, hello wold using material app looks like this

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

This is lot of this already predefined, background color, font, direction, etc etc and we don’t need to worry about those. You can see a rich set of widget of many different layouts and ui’s https://flutter.dev/docs/development/ui/widgets/material

But still we need to understand the basic first before using these for better understanding flutter.

Go forward we will using “MaterialApp” so that we don’t need to define many defaults. We will put our code in the “body” part of Scaffold

Let’s try out add 3 images in a row

Images

Before we add images we need to do few things https://flutter.dev/docs/development/ui/assets-and-images

I will download 3 random images from the internet and place it our app in a single row.

First to do this, create an “assets” folder in your app root and then an “images” folder under it. Put the images inside the “images” folder

Next in the pubspec.yeml file add this

Stop and start your app. Next our code looks like this

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        body: Center(
            child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Expanded(
              child: Image.asset('assets/images/1.jpeg'),
            ),
            Expanded(
              child: Image.asset('assets/images/2.webp'),
            ),
            Expanded(
              child: Image.asset('assets/images/3.jpg'),
            )
          ],
        )),
      ),
    );
  }
}

We can see the output, all 3 images a fitted in a row. mainly because we are using “Expanded” properly.

You can also try different things by making a container or stacking the images using the respective widgets.

Also the images are platform specific and resolution specific automatically. See here https://flutter.dev/docs/development/ui/assets-and-images#declaring-resolution-aware-image-assets

Also you can read this https://flutter.dev/docs/development/ui/layout#sizing-widgets i.e if image is bigger than size or we don’t use sizing we can get errors like shown.

Next, let’s see how to implement more complex layouts. For that you can see this https://flutter.dev/docs/development/ui/layout#nesting-rows-and-columns this is a very good example and show a complex implementation in detail.

We have more more pre-defined layouts

Grid View https://flutter.dev/docs/development/ui/layout#gridview

List View https://flutter.dev/docs/development/ui/layout#summary-listview

Stack View: https://flutter.dev/docs/development/ui/layout#stack

Next do this tutorial https://flutter.dev/docs/development/ui/layout/tutorial

try to do this yourself first and refer to code in tutorial when help needed

Here is my code for it https://gist.github.com/excellencetechnologies/b3ccdaa472635c60246029cfc41aae80

and the output