-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
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. :)