
Use crossAxisAlignment: CrossAxisAlignment.stretch to fill the height of a Row (width of a Column), i.e. to stretch along the CrossAxis.
Use Expanded widgets to fill the space along the MainAxis The flex attributes will determine the proportion of each widget.
For the trailing widget, just use a Center widget to center it.
In order to have your Row inside a ListView, stretching to the height of the tallest child, put the Row inside an IntrinsicHeight widget.
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Row and Column',
home: Scaffold(
body: ListView(
children: [
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: MyWidget()),
Expanded(
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
MyTextWidget(
text:
'I like to believe that science is becoming mainstream.',
),
MyTextWidget(
text:
'There is no known objects accounting for most of the effective gravity in the universe.',
),
MyTextWidget(
text: "Let's explore because it's fun.",
),
],
),
),
Expanded(
child: Center(
child: SizedBox(height: 40.0, child: MyWidget()),
),
),
],
),
),
Spacer(),
],
),
),
),
);
}
class MyTextWidget extends StatelessWidget {
final String text;
const MyTextWidget({Key key, this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: const EdgeInsets.all(4.0),
color: Colors.blueGrey,
child: Text(text),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(color: Colors.blueGrey),
);
}
}
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Row and Column',
home: Scaffold(
body: ListView(
children: [
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: MyWidget()),
Expanded(
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
MyTextWidget(
text:
'I like to believe that science is becoming mainstream.',
),
MyTextWidget(
text:
'There is no known objects accounting for most of the effective gravity in the universe.',
),
MyTextWidget(
text: "Let's explore because it's fun.",
),
],
),
),
Expanded(
child: Center(
child: SizedBox(height: 40.0, child: MyWidget()),
),
),
],
),
),
Spacer(),
],
),
),
),
);
}
class MyTextWidget extends StatelessWidget {
final String text;
const MyTextWidget({Key key, this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: const EdgeInsets.all(4.0),
color: Colors.blueGrey,
child: Text(text),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(color: Colors.blueGrey),
);
}
}