ListTile inside ListView is causing an error-CodePudding

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:

CodePudding user response：

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'),
              ),
            ),
          ],
        ),
      ),