Question 74630 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – ListView.Builder() horizontal + reverse pull to refresh does not work

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<String> cities = ['New York', 'Paris', 'Tokyo', 'London'];

  Future<void> _refresh() async {
    // your refresh logic here
    await Future.delayed(const Duration(seconds: 2));
    setState(() {});
    print('huh??');
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      child: RefreshIndicator(
        onRefresh: _refresh,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: cities.length,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: Center(
                  child: Text(cities[index]),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

I have this widget. I am trying to execute _refresh() function when I pull the side on the right. However, it does not work and I dunno what I have to add to make it work now. I also tried to pull the left side but does not work as well.

Tags:

2

Answers


  1. 0

    There is problem with your _refresh() function. Try to add new data in _refresh() function,which you want to update and its working perfectly.

    Login or Signup to reply.
  2. 0

    Here in this post’s comment. It is said that Refersh Indicator doesn’t work on Horizontal Scrolling. and another comment shows the workaround to tackle this. I made it easier for you:

    import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  const MyPage ({Key? key}) : super(key: key);

  @override
  State<MyPage > createState() => _MyPage State();
}

class _MyPageState extends State<MyPage> {

  late ScrollController _controller;

  List<String> cities = ['New York', 'Paris', 'Tokyo', 'London'];

  Future<void> _refresh() async {
    // your refresh logic here
    await Future.delayed(const Duration(seconds: 2));
    setState(() {});
    print('huh??');
    _controller.animateTo(
      _controller.position.minScrollExtent,
      curve: Curves.easeOut,
      duration: const Duration(milliseconds: 500),
    );
  }

  _scrollListener() {
    //for right end
    if (_controller.offset >= _controller.position.maxScrollExtent && !_controller.position.outOfRange) {
      _refresh();
    }

    //for left start
    if (_controller.offset <= _controller.position.minScrollExtent &&
        !_controller.position.outOfRange) {
      _refresh();
    }
  }

  @override
  void initState() {
    _controller = ScrollController();
    _controller.addListener(_scrollListener);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    _controller.removeListener(_scrollListener);
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SizedBox(
        height: 200,
        child: ListView.builder(
          controller: _controller,
          scrollDirection: Axis.horizontal,
          itemCount: cities.length,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: 200,
                height: 100,
                color: Colors.blue,
                child: Center(
                  child: Text(cities[index]),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search