How to expand fixed aspect ratio widget in row as much as possible while leaving minimum amount of space for second widget? - flutter

Question

I have two widgets I need to place side by side (will shift to vertical depending on screen size). The first widget has a fixed aspect ratio - this widget should expand as much as possible to fill the space - up until some minimum size constraint for the second widget (pixels preferred, but percentage is workable)
One, will have a fixed aspect ratio of 1 / 1.2 - for the sake of example, we'll keep it simple:
AspectRatio(
aspectRatio: 1 / 1.2,
child: ColoredBox(color: Colors.red),
)
The second widget will be a list of rows of small text items - example implementation with blue for visibility:
ColoredBox(
color: Colors.blue,
child: ListView(
children: [
Row(
children: const [
Expanded(child: Center(child: Text("small"))),
Expanded(child: Center(child: Text("text"))),
]
),
Row(
children: const [
Expanded(child: Center(child: Text("will"))),
Expanded(child: Center(child: Text("be"))),
],
),
Row(
children: const [
Expanded(child: Center(child: Text("here"))),
Expanded(child: Center(child: Text(""))), // avoid unnecessary widget tree structure changes when item is added here?
]
),
]
)
)
So, the first thing I did was just throw them in a Flex widget, wrapped in Flexible:
Flex(
direction: getDirection(),
children: [
Flexible(child: MyFixedAspectRatioWidget()),
Flexible(child: MyStringGridWidget()),
]
)
This works ok for some screen aspect ratios, but:
As the screen width is increased, I get a white bar along the right hand side.
As the width is decreased, I get white bars along the top and bottom
of the fixed aspect ratio widget.
The widgets will always have an equal width.
What I would like to happen:
As the width is increased, the string grid widget expands to fill the remaining space.
As the width is decreased, the string grid decreases in width, while the fixed aspect
ratio widget stays the same size, up until that would mean the string grid
widget would have less than some minimum size, and only then begin
to decrease the size of the aspect ratio widget (white bars on top and bottom).
What I've tried to get this behavior:
Setting a much larger flex for the fixed aspect ratio widget, while using Expanded for the string grid widget.
I was hoping that the large flex would allow it to take up as much size as it wants, while the Expanded, would cause the string grid to fill any remaining space.
At first this seemed promising - the AspectRatio grid had the behavior I wanted, filling all available space while keeping its aspect ratio, and also leaving a minimum amount of space for the string grid! The string grid however, would never expand beyond 1/10th of the width of the fixed aspect ratio widget.
Flex(
direction: getDirection(),
children: [
Flexible(flex: 10, child: MyFixedAspectRatioWidget()),
Expanded(flex: 1, child: MyStringGridWidget()),
]
);
I've tried various other combinations of flex and Expanded, but no luck improving on the initial take. Placing the ListView within Expanded just throws an exception.
Using ConstrainedBox with a very large maxWidth for the aspect ratio widget, and Expanded for the string grid widget seems to work properly when increasing the width; however, it leads to an overflow when decreasing the width, and does not save space for the grid.
I'm sure I could get this working with LayoutBuilder and SizedBox, but I was wondering if there's any built in way to get this kind of behavior.
Full example
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Example App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage()
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}): super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return const Scaffold(
body: BothWidgets()
);
}
}
Axis getDirection() => Axis.horizontal;
class BothWidgets extends StatelessWidget {
const BothWidgets({super.key});
#override
Widget build(BuildContext context) {
return Flex(
direction: getDirection(),
children: [
const Flexible(
flex: 10,
child: AspectRatio(
aspectRatio: 1 / 1.2,
child: ColoredBox(color: Colors.red),
),
),
Expanded(
flex: 1,
child: ColoredBox(
color: Colors.blue,
child: ListView(
children: [
Row(
children: const [
Expanded(child: Center(child: Text("small"))),
Expanded(child: Center(child: Text("text"))),
]
),
Row(
children: const [
Expanded(child: Center(child: Text("will"))),
Expanded(child: Center(child: Text("be"))),
],
),
Row(
children: const [
Expanded(child: Center(child: Text("here"))),
Expanded(child: Center(child: Text(""))), // avoid unnecessary widget tree structure changes when item is added here?
]
),
]
),
)
),
]
);
}
}