Skip to content

Add support for cross axis expansion #9075

@hundeva

Description

@hundeva

From the documentation of Expanded:

Using an [Expanded] widget makes a child of a [Row], [Column], or [Flex]
expand to fill the available space in the main axis (e.g., horizontally for
a [Row] or vertically for a [Column]).

Take this really simple example:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new Scaffold(
      appBar: new AppBar(
        title: new Text('Sample'),
      ),
      body: new ListView(
        children: [
          listItem(),
          listItem(),
          listItem(),
        ],
      ),
    ),
  ));
}

Widget listItem() {
  return new Row(
    children: [
      new Column(
        children: [
          new Text('Leading 1'),
          new Text('Leading 2'),
        ],
      ),

      new Expanded(
        child: new Container(
          color: new Color(0xffff0000),
          child: new Text('Horizontally expanded center'),
        ),
      ),

      new Column(
        children: [
          new Text('Trailing 1'),
          new Text('Trailing 2'),
        ],
      ),
    ],
  );
}

You can see that in the center of the list item, the red background is not expanded vertically, it is only centered, and there is a gap above and below it. This is working as expected, it looks like this.

What I would like to achieve is very similar, only for the cross axis, instead of the main axis. I would like to add a new item at the end of the list items, that takes up as much height as it can, with a (for example) fixed width. For example, the list item could look like this:

Widget listItem() {
  return new Row(
    children: [
      new Column(
        children: [
          new Text('Leading 1'),
          new Text('Leading 2'),
        ],
      ),

      new Expanded(
        child: new Container(
          color: new Color(0xffff0000),
          child: new Text('Horizontally expanded center'),
        ),
      ),

      new Column(
        children: [
          new Text('Trailing 1'),
          new Text('Trailing 2'),
        ],
      ),

      new CrossExpanded(
        width: 8.0,
        child: new Container(
          color: new Color(0xff00ff00),
        ),
      ),
    ],
  );
}

Obviously, this is not compiling, as there is no such class like CrossExpanded, that is the suggestion. :) Currently, I am working around this as setting a fix height for the last item of the row, but that won't work for list items that don't necessarily have the same height.

If there is a way to do this, I am happy to hear about that, I might have missed something.

ps: been trying out flutter for a week or two after years of android development, I kinda like it, keep up the good work. :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    c: new featureNothing broken; request for a new capabilityframeworkflutter/packages/flutter repository. See also f: labels.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions