Flutter Expanded Examples

Learn the Expanded component in flutter using simple examples.

Example 1: Expanded Example

This example will comprise the following files:

• expanded_example.dart

Step 1: Create Project.

1. Open your favorite Flutter IDE.
2. Go to File-->New-->Project to create a new project.

Step 2: Dependencies.

No external dependencies are needed for this project.

Step 4: Write Dart Code

Write your code as follows:

*(a). expanded_example.dart

Create a file Dart named expanded_example.dart

Here is the full code

import 'package:flutter/material.dart';
class ExpandedExample extends StatelessWidget {
  final String title;
  const ExpandedExample(this.title);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Container(
                color: Colors.yellow,
                width: 50,
                height: 50,
              ),
              Expanded(
                child: Container(
                  color: Colors.purple,
                  height: 50,
                  width: 50,
                ),
              ),
              Container(
                color: Colors.yellow,
                width: 50,
                height: 50,
              ),
            ],
          ),
          Expanded(
            child: Row(
              children: <Widget>[
                Container(
                  color: Colors.purple,
                  width: 50,
                ),
                Expanded(
                  child: Container(
                    color: Colors.yellow,
                    width: 50,
                  ),
                ),
                Container(
                  color: Colors.purple,
                  width: 50,
                ),
              ],
            ),
          ),
          Row(
            children: <Widget>[
              Container(
                color: Colors.yellow,
                width: 50,
                height: 50,
              ),
              Expanded(
                child: Container(
                  color: Colors.purple,
                  height: 50,
                  width: 50,
                ),
              ),
              Container(
                color: Colors.yellow,
                width: 50,
                height: 50,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Run

Simply copy the source code into your Flutter Project, Build and Run.

Reference.

Download code here.
Follow code author here.