How to display a list in flutter?

Question

Dart

An error occurs when calling the class.
This is the main page

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:testdb/models/cat.dart';
import 'package:testdb/models/product.dart';
import 'package:testdb/widgets/bottom_bar.dart';
import 'package:testdb/widgets/catalog.dart';
import 'package:testdb/widgets/catalog_list.dart';
import 'package:testdb/widgets/item_card.dart';


class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        backgroundColor: Theme.of(context).primaryColor,
        appBar: AppBar(
          title: Text("Restaurant"),
          leading: Icon(Icons.food_bank),
        ),
        body: ProductsList(),
      ),
    );
  }
}

class ProductsList extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    final productData = context.watch<ProductDataProvider>();
    // final categoryData = context.watch<CategoryDataProvider>();

    return Scaffold(
      backgroundColor: Colors.amberAccent,
      body: SafeArea(
        child: Container(
            height: MediaQuery.of(context).size.height - 85,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(35),
                  bottomRight: Radius.circular(35),
                )
            ),
            child: ListView(  
              padding: const EdgeInsets.all(10.0),
              children: <Widget>[
                Container(
                  child: ListTile(
                    title: Text(
                      'Освежающие напитки',
                      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                    ),
                    subtitle: Text(
                        'Больше чем 100 видов напитков',
                        style: TextStyle(fontSize: 16,)
                    ),
                    trailing: Icon(Icons.panorama_horizontal),
                  ),
                ),

                Container(
                  padding: const EdgeInsets.all(5.0),
                  height: 290,
                  child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: productData.items.length,
                      itemBuilder: (context, int index) =>

                          ChangeNotifierProvider.value(
                            value: productData.items[index],
                            child: ItemCard(),
                          )

                    //ItemCard(product: productData.items[index]),

                  ),
                ),
               Container( !!!!ВОТ ТУТ!!!!
                  padding: const EdgeInsets.all(5.0),
                  width: 290,
                  child: CatalogList(),
                )
                // CatalogList()
                // ...categoryData.items.map((value) {
                //   return CatalogListTile(name: value.title);
                // }).toList(),

              ],
            )
        ),
      ),
      bottomNavigationBar: BottomBar(),
    );
  }
}

Here is the widget itself from which it breaks

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:testdb/models/cat.dart';
import 'package:testdb/screens/catalog_page.dart';
import 'package:testdb/services/db.dart';

class CatalogList extends StatefulWidget {
  @override
  _CatalogListState createState() => _CatalogListState();
}

class _CatalogListState extends State<CatalogList> {

  DatabaseService db = DatabaseService();
  List<Category> category = <Category>[];
  loadData() async{
    var stream = db.getCategories();

    stream.listen((List<Category> data) {
      setState(() {
        category = data;
      });
    });
  }
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(
          // builder: (context) => ItemCatalog(imgUrl: name,),
        ));

      },
      child: Container(
        padding: const EdgeInsets.all(10.0),
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: category.length,
            itemBuilder: (BuildContext context, int index) {
              // print(category);
              final docdata = category[index].title;
              return ListTile(
                title: Text(docdata, style: TextStyle(color: Colors.black)),
              );
            }
          //ItemCard(product: productData.items[index]),
        ),
      ),
    );
  }

  @override
  void initState() {
    loadData();
    super.initState();
  }
}

if you remove it in the widget scrollDirection: Axis.horizontal, it seems to work, but I need it horizontally.

Here are the errors

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.

Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.
The relevant error-causing widget was: 
  ListView file:///H:/android/testdb/lib/widgets/catalog_list.dart:36:25
When the exception was thrown, this was the stack: 
#0      RenderViewport.computeDryLayout.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1414:15)
#1      RenderViewport.computeDryLayout (package:flutter/src/rendering/viewport.dart:1426:6)
#2      RenderBox.performResize (package:flutter/src/rendering/box.dart:2342:12)
#3      RenderObject.layout (package:flutter/src/rendering/object.dart:1763:9)
#4      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
...
The following RenderObject was being processed when the exception was fired: RenderViewport#a855f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=361.4, 0.0<=h<=Infinity)
...  size: MISSING
...  axisDirection: right
...  crossAxisDirection: down
...  offset: ScrollPositionWithSingleContext#80e97(offset: 0.0, range: null..null, viewport: null, ScrollableState, ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#656bd, ScrollDirection.idle)
...  anchor: 0.0
RenderObject: RenderViewport#a855f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=361.4, 0.0<=h<=Infinity)
  size: MISSING
  axisDirection: right
  crossAxisDirection: down
  offset: ScrollPositionWithSingleContext#80e97(offset: 0.0, range: null..null, viewport: null, ScrollableState, ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#656bd, ScrollDirection.idle)
  anchor: 0.0
...  center child: RenderSliverPadding#0efa1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: paintOffset=Offset(0.0, 0.0)
...    constraints: MISSING
...    geometry: null
...    padding: EdgeInsets.zero
...    textDirection: ltr
...    child: RenderSliverList#15c12 NEEDS-LAYOUT NEEDS-PAINT
...      parentData: paintOffset=Offset(0.0, 0.0)
...      constraints: MISSING
...      geometry: null
...      no children current live
====================================================================================================

======== Exception caught by rendering library =====================================================
RenderBox was not laid out: RenderViewport#a855f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'
The relevant error-causing widget was: 
  ListView file:///H:/android/testdb/lib/widgets/catalog_list.dart:36:25
====================================================================================================

======== Exception caught by rendering library =====================================================
RenderBox was not laid out: RenderViewport#a855f NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'
The relevant error-causing widget was: 
  ListView file:///H:/android/testdb/lib/widgets/catalog_list.dart:36:25
====================================================================================================

======== Exception caught by rendering library =====================================================
RenderBox was not laid out: RenderIgnorePointer#ad100 relayoutBoundary=up20 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'
The relevant error-causing widget was: 
  ListView file:///H:/android/testdb/lib/widgets/catalog_list.dart:36:25
====================================================================================================

Answer 1

Use Slivers