ListTile inside ListView is causing an error - flutter

Question

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/weather_provider.dart';
class BottomListView extends StatelessWidget {
const BottomListView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final weatherData = Provider.of<WeatherProvider>(context).weatherData;
final isLandscape =
MediaQuery.of(context).orientation == Orientation.landscape;
final height = (MediaQuery.of(context).size.height -
50 -
MediaQuery.of(context).padding.top);
return Container(
decoration: const BoxDecoration(
border: Border(
top: BorderSide(width: 0.3, color: Colors.white),
),
color: Color.fromRGBO(255, 255, 255, 0.2),
),
height: isLandscape ? height * 0.35 : null,
child: Row(
children: [
Expanded(
child: SizedBox(
width: 200,
child: ListView(
scrollDirection: Axis.horizontal,
children: [ListTile(title: Text('Hello'))]),
),
),
],
));
}
}
I want to have horizontal scrollable listView with ListTiles. But without ListTile it works fine . With ListTile it is causing an error.How to solve it? I tried giving it the width but didn't work.
Error:
BoxConstraints forces an infinite width.
These invalid constraints were provided to RenderParagraph's layout() function by the following function, which probably computed the invalid constraints in question:

Answer 1

ListTiles needs to be defined with width params explicitly using SizedBox or Container.
If you dont define width, it will throw infinite width error.
So Wrap your ListTile inside a SizedBox or Container.
Since, ListView's scrollDirection is set to Horizontal, you dont need to place it inside of a row i.e. it will show children horizontally.
If scrollDirection is set to vertical, it will show children in a Column i.e. Vertically
Also you can't do both, Use expanded and give width to a child of a row.
Using Expanded means the child will take maximum size available to it w.r.t to its parent.
Try the below code snippet
Container(
decoration: const BoxDecoration(
border: Border(
top: BorderSide(width: 0.3, color: Colors.white),
),
color: Color.fromRGBO(255, 255, 255, 0.2),
),
// height: isLandscape ? height * 0.35 : null,
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: 200,
child: ListTile(
title: Text('Hello'),
),
),
SizedBox(
width: 200,
child: ListTile(
title: Text('Hello'),
),
),
SizedBox(
width: 200,
child: ListTile(
title: Text('Hello'),
),
),
SizedBox(
width: 200,
child: ListTile(
title: Text('Hello'),
),
),
],
),
),