How to reproduce CSS flex-grow space distribution behavior in a Flutter Row/Column?

Question

I have a Row that looks like this:

SizedBox(
    height: 64,
    child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
        Expanded(
            child: Container(
            color: Colors.blue,
            child: Text("looooooooong", softWrap: false))),
        Expanded(
            child: Container(
            color: Colors.green, child: Text("short", softWrap: false)))
    ]));

As you can see the text in the blue container gets cut of.

Building the same thing with CSS look like this:

#container {
  width: 100px;
  height: 64px;
  display: flex;
  align-items: stretch;
}

#first {
  flex-grow: 1;
  background-color: blue;
}

#second {
  flex-grow: 1;
  background-color: green;
}

<div id="container">
  <div id="first">looooooooong</div>
  <div id="second">short</div>
</div>

In this case the green container leaves its unused space over to the blue container and the text in the blue container doesn't get cut of.

How am I supposed to achieve the CSS flex-box behavior in Flutter?

That's unlikely to be possible with a `Row` for performance reasons. You may want to make your own with a custom `RenderBox` — Rémi Rousselet, Mar 16 '19 at 15:15

score 1 · Answer 1 · answered Mar 21 '19 at 09:40

If I've understood your right you wanna rebuild the CSS behavior. You can just leave out the Expanded widgets. Here a short standalone example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 64,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: Text('loooooooooooong'),
                ),
                Container(
                  color: Colors.green,
                  child: Text('short'),
                ),
              ],
            ),
          ),
        ),
      )
    );
  }
}

score 0 · Answer 2 · answered Dec 17 '22 at 16:33

The Expanded widget with Flex can work for you:

import 'package:flutter/material.dart';
    
    void main() {
      return runApp(
        MaterialApp(
          home: Scaffold(
            body: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                SizedBox(
                  height: 64.0,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Expanded(
                        flex: 8,
                        child: Container(
                          color: Colors.blue,
                          child: const Text('loooooooooooong'),
                        ),
                      ),
                      Expanded(
                        flex: 2,
                        child: Container(
                          color: Colors.green,
                          child: const Text('short'),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }

How to reproduce CSS flex-grow space distribution behavior in a Flutter Row/Column?

2 Answers2