In this post, you will learn how to render a list of rows or a ListView inside a Column. When implementing a ListView inside a Column, you might encounter errors. Using the examples below, you can understand how to avoid them.
Let’s get started.
Contents
In this first example, I will implement list of row texts inside Column.
List of Row Inside A Column Example – I
- I have used a For loop to generate Row’s childrens.
- The for loop creates 50 rows inside the Column, if it exceeds the screen height. You will get the renderflex errors.
- To avoid yellow & black renderflex overflow errors, You can use ListView or SingleChildScrollView around the Column.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'List of Row Inside A Column',
home: Scaffold(
appBar: AppBar(
title: const Text('List of Row Inside A Column'),
),
body:
// SingleChildScrollView(
// child:
Column(
children: [
for (int i = 1; i <= 50; i++)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'text $i',
style: const TextStyle(
fontSize: 18,
),
),
const SizedBox(
width: 20,
),
Text(
'content $i',
style: const TextStyle(
fontSize: 18,
),
),
],
),
],
),
//),
),
);
}
}
List of Row Inside a Column in Flutter - II
This example is really useful for those who are making form inside a column. Here, I have used a TextField inside Row.
If you are making any login or signin form, recommended to use Form and TextFormField.
- You must aware that TextField or TextFormField inside a Row can create InputDecorator unbound width error. This is due to TextFormField does not have intrinsic width (natural width), and row wants it's childs intrinsic size and that's makes the problem
- So either Use Expanded, Flexible or SizedBox with width property around the TextField or TextFormField.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'List of Row Inside A Column',
home: Scaffold(
appBar: AppBar(
title: const Text('List of Row Inside A Column'),
),
body: SingleChildScrollView(
child: Column(
children: [
for (int i = 1; i <= 50; i++)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
SizedBox(width: 10),
Text('Name : '),
SizedBox(width: 10),
Flexible(
child: TextField(
decoration: InputDecoration(hintText: 'name'),
),
)
],
),
],
),
),
),
);
}
}
How to use ListView inside Column In Flutter?
When you place ListView inside column, it ends with an exception most of the time. because both ListView and Column tries to expand in the main axis direction (here I am talking above Vertical direction). Flutter needs to know how much space ListView and Column needed.
Using Expanded
- Use Expanded widget around the ListView - Recommended.
- It expands the listview to take the available space inside the column.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: Text('ListView Inside Column Using Expanded'),
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: const Text(
'ListView Inside Column Using Expanded',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
),
Expanded(
child: ListView(
padding: EdgeInsets.all(8),
children: [
for (int i = 0; i < 50; i++)
Align(
alignment: Alignment.center,
child: Text('Item $i'),
),
],
),
),
],
),
),
);
}
}
Using shrinkWrap property
- By setting, shrinkWrap:true, ListView will take as much as space only the children needed.
- Actually, it will compute the size of the entire content in ListView.
- But setting shrinkWrap:true can make performance hit. So avoid it as much as you can.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: Text('ListView Inside Column Using shrinkWrap Property'),
),
body: Column(
children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'ListView Inside Column Using shrinkWrap Property',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
),
ListView(
shrinkWrap: true,
padding: EdgeInsets.all(8),
children: [
for (int i = 0; i < 30; i++)
Align(
alignment: Alignment.center,
child: Text('Item $i'),
),
],
),
],
),
),
);
}
}
Using SizedBox
- Use SizedBox around the ListView with a specific height value.
- Height of the listview turns to SizedBox height.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: Text('ListView Inside Column Using SizedBox'),
),
body: Column(
children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'ListView Inside Column Using SizedBox',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
),
SizedBox(
height: 500,
child: ListView(
padding: EdgeInsets.all(8),
children: [
for (int i = 0; i < 50; i++)
Align(
alignment: Alignment.center,
child: Text('Item $i'),
),
],
),
),
],
),
),
);
}
}
That's all for now. If you like this post, please share it with your family and friends.
Thanks.