CODEWITHSUNDEEP
flutterflutter-layout
Max
Max

Reputation: 93

ScrollBar to infinity ListView

I have an infinite ListView, how do I add a ScrollBar to it? I tried to wrap the ListView in a ScrollBar, but because there is no exact length in the ListView, the ScrollBar does not attach to it and is set at 0 position

ScrollBar(
 child:
  ListView.builder(
    itemBuilder: (context, i) {
      if (i >= Items.length - 1) {
        Items.add(generateItem());
      }
      return Card(item: Items[i]);
    })
)

Upvotes: 1

Views: 418

Answers (2)

user12227098
user12227098

Reputation:

1st remove the scrollbar

and try this:

ListView.builder(
          itemCount: _listViewData.length,
          shrinkWrap: true,
          controller: _scrollController,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_listViewData[index]),
            );
          },
        ),

adding shrinkWrap may help

Upvotes: 0

chunhunghan
chunhunghan

Reputation: 54365

Use ListView with itemCount and load more data when scroll to maxScrollExtent
You can see full code below

code snippet 

Scrollbar(
        child: ListView.builder(
          itemCount: _listViewData.length,
          controller: _scrollController,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_listViewData[index]),
            );
          },
        ),
      ),

enter image description here

full code

import 'package:flutter/material.dart';
import 'package:infinite_listview/infinite_listview.dart';

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: InfiniteScrollListView(),
    );
  }
}

class InfiniteScrollListView extends StatefulWidget {
  _InfiniteScrollListViewState createState() => _InfiniteScrollListViewState();
}

class _InfiniteScrollListViewState extends State<InfiniteScrollListView> {
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        _loadMore();
      }
    });
  }

  _loadMore() {
    setState(() {
      print('loading more,...');
      //if we're at the end of the list, add more items
      _listViewData..addAll(List<String>.from(_listViewData));
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  List<String> _listViewData = [
    "Inducesmile.com",
    "Flutter Dev",
    "Android Dev",
    "iOS Dev!",
    "React Native Dev!",
    "React Dev!",
    "express Dev!",
    "Laravel Dev!",
    "Angular Dev!",
    "Adonis Dev!",
    "Next.js Dev!",
    "Node.js Dev!",
    "Vue.js Dev!",
    "Java Dev!",
    "C# Dev!",
    "C++ Dev!",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Infinite Scroll in ListView Example'),
      ),
      body: Scrollbar(
        child: ListView.builder(
          itemCount: _listViewData.length,
          controller: _scrollController,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_listViewData[index]),
            );
          },
        ),
      ),
    );
  }
}

Upvotes: 1

Related Questions