一.手动添加

参考文章 https://www.jianshu.com/p/f3833677e4ee

下拉刷新

// 定义 ListView 循环列表项的数量
num itemCount = 10; 

// Widget
RefreshIndicator(
    onRefresh: _onRefresh,//下拉刷新回调
    displacement: 40,    //指示器显示时距顶部位置
    color: Colors.red,   //指示器颜色，默认ThemeData.accentColor
    backgroundColor: Colors.blue,//指示器背景颜色，默认ThemeData.canvasColor
    notificationPredicate: defaultScrollNotificationPredicate, //是否应处理滚动通知的检查（是否通知下拉刷新动作）
    child: ListView.builder(
        itemCount: itemCount,
        itemBuilder: (BuildContext context,int index){
        return Padding(
            padding: EdgeInsets.all(30),
            child: Text('${index}'),
        );
        }
    ),
)
// _onRefresh 下拉刷新回调
Future<Null> _onRefresh(){
    return Future.delayed(Duration(seconds: 5),(){   // 延迟5s完成刷新
        setState(() {
            itemCount = 10;
        });
    });
}

上拉加载更多

  num itemCount = 10;
  ScrollController _controller = new ScrollController();
  @override
   // 初始化State
  void initState(){
      super.initState();
      _controller.addListener(() {
           if (_controller.position.pixels == _controller.position.maxScrollExtent) {
               _loadMoreData();
           }
      });
  }
  //上拉加载函数
  Future<Null> _loadMoreData(){
       // 延迟1s增加数据
      return Future.delayed(Duration(seconds: 1),(){
          if(mounted){
               setState(() {
                   itemCount += 5;
               });
          }
      });
  }

 // widget
 ListView.builder(
    itemCount: itemCount,
    controller: _controller,
    itemBuilder: (BuildContext context,int index){
        return Padding(
             padding: EdgeInsets.all(30),
             child: Text('${index}'),
       );
   }
)

二.第三方框架

PullToRefresh

下拉刷新 上拉加载
PullToRefresh 是一个刷新列表组件，借助于pull_to_refresh库实现，感觉这是目前最好的一款三方刷新库，它的可定制性比较好，刷新样式多样化，已经满足大部分的开发需求。

基本用法

• 添加依赖 pull_to_refresh: ^1.5.6

• ListView包裹一层SmartRefresher

  SmartRefresher常用属性说明

• enablePullDown 允许下拉刷新

• enablePullUp 允许上拉加载

• header 下拉刷新头部样式

• footer 上拉加载底部样式

• onRefresh 下拉刷新的回调

• onLoading 上拉加载的回调

• controller 刷新控件的控制器，用来处理回调状态等

  国际化显示

  需要添加语言本地化SDK，不然刷新库头部与底部显示加载提示内容为英文
  
  添加依赖  flutter_localizations:
                sdk: flutter
                                         
  main.dart中MateriaApp里面添加以下内容
  
  localizationsDelegates: [
            // 这行是关键
            RefreshLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            GlobalMaterialLocalizations.delegate
          ],
          supportedLocales: [
            const Locale('en'),
            const Locale('zh'),
          ],
          localeResolutionCallback:
              (Locale locale, Iterable<Locale> supportedLocales) {
            //print("change language");
            return locale;
          },

全局配置

全局配置RefreshConfiguration,配置子树下的所有SmartRefresher表现,一般存放于MaterialApp的根部

RefreshConfiguration(
         headerBuilder: () => WaterDropHeader(),        // 配置默认头部指示器,假如你每个页面的头部指示器都一样的话,你需要设置这个
         footerBuilder:  () => ClassicFooter(),        // 配置默认底部指示器
         headerTriggerDistance: 80.0,        // 头部触发刷新的越界距离
         springDescription:SpringDescription(stiffness: 170, damping: 16, mass: 1.9),         // 自定义回弹动画,三个属性值意义请查询flutter api
         maxOverScrollExtent :100, //头部最大可以拖动的范围,如果发生冲出视图范围区域,请设置这个属性
         maxUnderScrollExtent:0, // 底部最大可以拖动的范围
         enableScrollWhenRefreshCompleted: true, //这个属性不兼容PageView和TabBarView,如果你特别需要TabBarView左右滑动,你需要把它设置为true
         enableLoadingWhenFailed : true, //在加载失败的状态下,用户仍然可以通过手势上拉来触发加载更多
         hideFooterWhenNotFull: false, // Viewport不满一屏时,禁用上拉加载更多功能
         enableBallisticLoad: true, // 可以通过惯性滑动触发加载更多
        child: MaterialApp(
            ........
        )
    );

@override
Widget build(BuildContext context) {
  Widget _itemBuilder(BuildContext context, int position) {
    return Card(child: this.datas[position]);
  }

  return Scaffold(
    appBar: AppBar(
      title: Text("Pulltorefresh"),
    ),
    body: SmartRefresher(
      enablePullDown: true,
      enablePullUp: true,
      header: WaterDropHeader(),
      footer: ClassicFooter(
        loadStyle: LoadStyle.ShowAlways,
        completeDuration: Duration(microseconds: 50),
      ),
      onRefresh: _onRefresh,
      onLoading: _onLoading,
      controller: _controller,
      child: ListView.builder(
          itemBuilder: _itemBuilder, itemCount: this.datas.length),
    ),
  );
}