Flutter: Issue with creating horizontal list

SreejithSree
July 29, 2023
267 views
1 vote
2 Answers

I am getting below exception when I try to create a horizontal list in flutter using ListView.

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performResize():
‘package:flutter/src/widgets/overlay.dart’: Failed assertion: line 1064 pos 12: ‘constraints.biggest.isFinite’: is not true.

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
RenderBox was not laid out: _RenderTheater#38ca4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
‘package:flutter/src/rendering/box.dart’:
Failed assertion: line 1966 pos 12: ‘hasSize’

My Code:

class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          const SizedBox(height: 10),
          UI1(),
          const SizedBox(height: 20),
          UI2(),
          const SizedBox(height: 20),
          UI3(),
          const SizedBox(height: 20),
          UI4(),
          const SizedBox(height: 20),
          HorizontalList(),
        ],
      ),
    );
  }
}

// Sample data model
class Item {
  final String name;
  final String imageUrl;

  Item({required this.name, required this.imageUrl});
}

class HorizontalList extends StatelessWidget {
  // Sample dynamic data
  final List<Item> items = [
    Item(name: "Item 1", imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTicSxi_U0sWpPLvdYfk2Z5SIPyaIAsj5zhPEwW21IY9w&s"),
    Item(name: "Item 2", imageUrl: "https://fujifilm-x.com/wp-content/uploads/2021/01/gfx100s_sample_04_thum-1.jpg"),
    Item(name: "Item 3", imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtUtMSO7bDK3mAwq60k0L1dX-21grh8R16AJtTXXfY&s"),
    // Add more items as needed
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Horizontal List with Dynamic Data')),
        body: Container(
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: items.length,
            itemBuilder: (BuildContext context, int index) {
              return buildItemCard(items[index]);
            },
          ),
        ),
      ),
    );
  }

  // Create a widget to display an individual item card
  Widget buildItemCard(Item item) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.0),
              image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(item.imageUrl),
              ),
            ),
          ),
          SizedBox(height: 8),
          Text(item.name),
        ],
      ),
    );
  }
}

There is no issue when I try this code on a new project. But when I add this on my project I am getting above exceptions and the screen is white.

Tags: flutter

Answers

You need to wrap your HorizontalListView widget with a SizedBox and give it a specific height:

class HorizontalList extends StatelessWidget {
  // Sample dynamic data
  final List<Item> items = [
    Item(name: "Item 1", imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTicSxi_U0sWpPLvdYfk2Z5SIPyaIAsj5zhPEwW21IY9w&s"),
    Item(name: "Item 2", imageUrl: "https://fujifilm-x.com/wp-content/uploads/2021/01/gfx100s_sample_04_thum-1.jpg"),
    Item(name: "Item 3", imageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtUtMSO7bDK3mAwq60k0L1dX-21grh8R16AJtTXXfY&s"),
    // Add more items as needed
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Horizontal List with Dynamic Data')),
        body: Container(
          child: SizedBox(
            height: 100,
            child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: items.length,
            itemBuilder: (BuildContext context, int index) {
              return buildItemCard(items[index]);
            },
          ),
        ),
),
      ),
    );
  }

  // Create a widget to display an individual item card
  Widget buildItemCard(Item item) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.0),
              image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(item.imageUrl),
              ),
            ),
          ),
          SizedBox(height: 8),
          Text(item.name),
        ],
      ),
    );
  }
}

This is another solution using Expanded in the List View inside HorizontalList, and you dont have to add Material or Scaffold inside HorizontalList:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<String> items = ["Item1", "Item2", "Item3", "Item4"];
  String selectedItem = "Item1";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan,
      body: Column(
        children: [HorizontalList()],
      ),
    );
  }
}

class Item {
  final String name;
  final String imageUrl;

  Item({required this.name, required this.imageUrl});
}

class HorizontalList extends StatelessWidget {
  // Sample dynamic data
  final List<Item> items = [
    Item(
        name: "Item 1",
        imageUrl:
            "https://cn.i.cdn.ti-platform.com/content/20/the-amazing-world-of-gumball/showpage/za/gumball-carousel.a94b8e60.png"),
    Item(
        name: "Item 2",
        imageUrl:
            "https://cn.i.cdn.ti-platform.com/content/20/the-amazing-world-of-gumball/showpage/za/gumball-carousel.a94b8e60.png"),
    Item(
        name: "Item 3",
        imageUrl:
            "https://cn.i.cdn.ti-platform.com/content/20/the-amazing-world-of-gumball/showpage/za/gumball-carousel.a94b8e60.png"),
        Item(
        name: "Item 4",
        imageUrl:
            "https://cn.i.cdn.ti-platform.com/content/20/the-amazing-world-of-gumball/showpage/za/gumball-carousel.a94b8e60.png")
    // Add more items as needed
  ];

  @override
  Widget build(BuildContext context) {
    return Expanded( // use Expanded here
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return buildItemCard(items[index]);
        },
      ),
    );
  }

  // Create a widget to display an individual item card
  Widget buildItemCard(Item item) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          Image.network(item.imageUrl),
          const SizedBox(height: 8),
          Text(item.name),
        ],
      ),
    );
  }
}

Why this error happens? here the answer: https://www.youtube.com/watch?v=jckqXR5CrPI

Please signup or login to give your own answer.

Click here to cancel reply.