Search code examples
flutterflutter-layout

How to expand Container color widget, without children, in Row / Column?


Is there a way to fill the remaining space in a Row with a Column using a Container widget? I have tried using Expanded but the container will not take up available space.

The desired Row design is similar to this:

Desired design with filled container

In my app, this Row is wrapped in a Column and the Container is not filling space when using Expanded.

Sample app screenshot without filled container

Sample app:

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(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Column(
          children: [
            const Text("Some text"),
            Row(
              children: [
                const Text("Flutter"),
                Expanded(
                  child: Container(color: Colors.pink),
                ),
              ],
            ),
            const Text("Some more text"),
          ],
        ),
      ),
    );
  }
}

As shown in the sample app, the expanded container does not show with its pink background.


Solution

  • Try wrapping the row with IntrinsicHeight.

     Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text("Some text"),
          IntrinsicHeight(
            child: Row(
              children: [
                const Text('Flutter'),
                Expanded(
                  child: Container(
                    color: Colors.pink,
                  ),
                ),
              ],
            ),
          ),
          const Text("Some more text"),
        ],
      ),
    

    enter image description here