Expanded Fills the Row

Part of the Layout That Fits section of Coddy's Flutter journey. Lesson 1 of 30.

A Row gives each child the width it asks for. A box with no width is only as wide as its text, so the rest of the row stays empty.

Wrap a child in Expanded and it takes all the space the other children leave:

Row(
  children: [
    Container(width: 100, color: Colors.red),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

On a phone 390 pixels wide, the red box keeps its 100 pixels and the blue box gets the other 290. On a wider screen the blue box grows; the red one stays 100.

Expanded works in a Column too, where it fills the height that is left.

Challenge

Easy

The search bar is too short. Make the Search box fill the rest of the row, so it is 310 pixels wide next to the 80 pixel Menu box.

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Shop')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 80,
                  height: 56,
                  color: Colors.indigo,
                  child: const Center(
                    child: Text('Menu', style: TextStyle(color: Colors.white)),
                  ),
                ),
                Container(
                  height: 56,
                  color: Colors.indigo.shade100,
                  child: const Center(child: Text('Search')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}