flutter 下拉加载+下拉加载

功能：

　1、下拉加载

　2、上拉加载

3、显示加载图标

4、更新列表数据，隐藏加载图标

flutter库：

flutter_spinkit: ^3.1.0   加载图标

其他：加载列表需要列表，基于上一节的flutter 列表展示

细节：

　1、列表构造器

　　a、绑定列表controller   // ScrollController scrollController = ScrollController();

　　b、更新LIST data

　2、controller监听是否滑动到底部

@override
  void initState() {
    super.initState();
    scrollController.addListener(() {
      if (scrollController.position.pixels ==
          scrollController.position.maxScrollExtent) {
        print('滑动到了最底部${scrollController.position.pixels}');
        setState(() {
          showMore = true;
        });
        getMoreData();  // 增加点数据
      }
    });
    getListData();   // 暂时未使用
  }

  @override
  void dispose() {
    super.dispose();
    //手动停止滑动监听
    scrollController.dispose();
  }

3、 RefreshIndicator   刷新组件

　　

new RefreshIndicator(
                child: isLoading == false   // 判断是否正在加载中
                    ? new ListView.builder(
                        controller: scrollController,
                        itemCount: storyData.length, //列表长度+底部加载中提示
                        itemBuilder: (BuildContext context, int index) {
                          // 传入MessageData返回列表项
                          return new StoryItem(storyData[index]);
                        },
                      )
                    : new Stack(
                        children: <Widget>[
                          new Padding(
                            padding:
                                new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 35.0),
                            child: new Center(
                              child: SpinKitFadingCircle(
                                color: Colors.blueAccent,
                                size: 30.0,
                              ),
                            ),
                          ),
                          new Padding(
                            padding:
                                new EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0),
                            child: new Center(
                              child: new Text('正在加载中，莫着急哦~'),
                            ),
                          ),
                        ],
                      ),
                onRefresh: _onRefresh)  // 刷新

4、部分异步函数 

  Future<void> _onRefresh() async {
    if (isLoading) {
      return;
    }
    setState(() {
      isLoading = true;
      page = ;
    });

    print('下拉刷新开始,page = $page');

    await Future.delayed(Duration(seconds: ), () {
      setState(() {
        isLoading = false;
        final arr = new StoryData(
            ,
            'images/story/03/cover.jpg',
            'episode.26',
            '放课後',
            '终於可以和自己憧憬的同学自然的说早安。正当爽子正在为这件事感动的时候,这学期代理班导的副班导荒井一市(通称:阿瓶)登场了,阿瓶正想要擅自决定谁来制作出席簿时,不想看到大家困扰的爽子就举起了手…。',
            []);
        storyData.add(arr);
        print('下拉刷新结束,page = $page');
      });
    });
  }

Future<void> getMoreData() async {
  print('xx');
  if (isLoading) {
    return;
  }
  setState(() {
    isLoading = true;
    page = 0;
  });
  print('下拉刷新开始,page = $page');

  await Future.delayed(Duration(seconds: 3), () {
    setState(() {
      isLoading = false;
      final arr = new StoryData(
          26,
          'images/story/03/cover.jpg',
          'episode.26',
          '放课後',
          '终於可以和自己憧憬的同学自然的说早安。正当爽子正在为这件事感动的时候,这学期代理班导的副班导荒井一市(通称:阿瓶)登场了,阿瓶正想要擅自决定谁来制作出席簿时,不想看到大家困扰的爽子就举起了手…。',
          []);
      storyData.add(arr);
      print('下拉刷新结束,page = $page');
    });
  });
}

-------------完整code-------------------

story.dart

import 'package:flutter/material.dart';

import 'story_data.dart';
import 'story_item.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

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

class Story extends StatefulWidget {
  @override
  _Story createState() => new _Story();
}

class _Story extends State<Story> {
  bool isLoading = false; //是否正在请求新数据
  bool showMore = false; //是否显示底部加载中提示
  bool offState = false; //是否显示进入页面时的圆形进度条
  int page = ; //暂时用不到
  ScrollController scrollController = ScrollController();
  Future<void> getMoreData() async {if (isLoading) {
      return;
    }
    setState(() {
      isLoading = true;
    });
    print('下拉刷新开始,page = $page');

    await Future.delayed(Duration(seconds: ), () {
      setState(() {
        isLoading = false;
        final arr = new StoryData(
            ,
            'images/story/03/cover.jpg',
            'episode.26',
            '放课後',
            '终於可以和自己憧憬的同学自然的说早安。正当爽子正在为这件事感动的时候,这学期代理班导的副班导荒井一市(通称:阿瓶)登场了,阿瓶正想要擅自决定谁来制作出席簿时,不想看到大家困扰的爽子就举起了手…。',
            []);
        storyData.add(arr);

      });
    });
  }

  void getListData() {}

  @override
  void initState() {
    super.initState();
    scrollController.addListener(() {
      if (scrollController.position.pixels ==
          scrollController.position.maxScrollExtent) {
        print('滑动到了最底部${scrollController.position.pixels}');
        setState(() {
          showMore = true;
        });
        getMoreData();  // 增加点数据
      }
    });
    getListData();   // 暂时未使用
  }

  @override
  void dispose() {
    super.dispose();
    //手动停止滑动监听
    scrollController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
        return Scaffold(
            body: new RefreshIndicator(
                child: isLoading == false
                    ? new ListView.builder(
                        controller: scrollController,
                        itemCount: storyData.length, //列表长度+底部加载中提示
                        itemBuilder: (BuildContext context, int index) {
                          // 传入MessageData返回列表项
                          return new StoryItem(storyData[index]);
                        },
                      )
                    : new Stack(
                        children: <Widget>[
                          new Padding(
                            padding:
                                new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 35.0),
                            child: new Center(
                              child: SpinKitFadingCircle(
                                color: Colors.blueAccent,
                                size: 30.0,
                              ),
                            ),
                          ),
                          new Padding(
                            padding:
                                new EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0),
                            child: new Center(
                              child: new Text('正在加载中，莫着急哦~'),
                            ),
                          ),
                        ],
                      ),
                onRefresh: _onRefresh));
  }

  Future<void> _onRefresh() async {
    if (isLoading) {
      return;
    }
    setState(() {
      isLoading = true;
    });

    print('下拉刷新开始,page = $page');

    await Future.delayed(Duration(seconds: ), () {
      setState(() {
        isLoading = false;
        final arr = new StoryData(
            ,
            'images/story/03/cover.jpg',
            'episode.26',
            '放课後',
            '终於可以和自己憧憬的同学自然的说早安。正当爽子正在为这件事感动的时候,这学期代理班导的副班导荒井一市(通称:阿瓶)登场了,阿瓶正想要擅自决定谁来制作出席簿时,不想看到大家困扰的爽子就举起了手…。',
            []);
        storyData.add(arr);
        print('下拉刷新结束);
      });
    });
  }
}

部分截图：

加载完成之后，列表数据会增加相同的数据，这里没有涉及到接口。

源码地址：https://github.com/ft1107949255/kiminitodoke