Flutter：使用 ListView.builder() 和 ListTile 显示长部件列表

Question

I have a Widget list with millions of widgets and some of them are wider than screen.

I need to use ListView.builder() and ListTile to save time while running like this:

ListView.builder(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      controller: scrollController,
      itemCount: widgetList.length,
      itemBuilder: (context, i) => 
         ListTile(
           title: widgetList[i]
           )
      );

But when I run it, those ListTile that their title is wider than screen will overflow on the right because ListView.builder() not wide enough.

If I assign a big width to ListView.builder() like this will works fine but will remain a lot of blank even if all widgets in list are short:

ListView(
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      children: [
          Container(
             width: 2000,
             child: ListView.builder(
               scrollDirection: Axis.vertical,
               shrinkWrap: true,
               controller: scrollController,
               itemCount: widgetList.length,
               itemBuilder: (context, i) => 
                  ListTile(
                    title: widgetList[i]
                    )
               ))]);

Any idea to improve this function?

---------------update-----------

My widgetList contains Column/Row etc.

But let's start with only one Text().

Example:

ListView.builder(
    restorationId: 'sampleItemListView',
    itemCount: 1000000,
    itemBuilder: (BuildContext context, int index) {
      return ListTile(
        title: Text(
          "abcdefghijklmnopqrstuvwxyz"
          "abcdefghijklmnopqrstuvwxyz"
          "abcdefghijklmnopqrstuvwxyz",
          maxLines: 1,
        ),
      );
    },
  )

The text is too long but I don't want it change line.

What can I do to read full text?

Answer 1

Use like below, do not specify the hight and width for the widgets

@override
  Widget build(BuildContext context) {
    var items = List<SampleItem>.generate(
        1000,
        (i) => const SampleItem(
              '范植勝',
              'Showing long widget list using ListView.builder() and ListTile',
              Icons.favorite,
            ));
    return Scaffold(
      body: ListView.builder(
        restorationId: 'sampleItemListView',
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          final item = items[index];
          return ListTile(
              title: Text(item.name),
              subtitle: Text(item.decsription),
              leading: Icon(item.icons),
              onTap: () {
                Navigator.restorablePushNamed(
                  context,
                  SampleItemDetailsView.routeName,
                );
              });
        },
      ),
    );
  }