好租客-06 资讯页实现上下拉刷新

1、UI效果：

2、代码实现

1、引入第三方库

dependencies:
  flutter:
    sdk: flutter
  # 安装第三方的路由管理页面
  fluro: "^1.5.1"
  flutter_swiper: ^1.1.4  
  pull_to_refresh: ^1.5.0    #用于上下拉刷新
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

2、new-item控件，news-data-item数据实现

1、news-data-item.dart 文件内容

class InfoItem {
  final String title;
  final String imageUrl;
  final String source;
  final String time;
  final String navigatorUrl;

  InfoItem(
      {this.title, this.imageUrl, this.source, this.time, this.navigatorUrl});
}

2、news-item.dart 文件内容

import 'package:flutter/material.dart';
import 'package:flutter_hook_up_rent/model/news-data-item.dart';

class NewsItem extends StatelessWidget {
  final InfoItem infoItem;
  NewsItem({this.infoItem});

  @override
  Widget build(BuildContext context) {
    var item = this.infoItem;
    var row = Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
      Padding(padding: EdgeInsets.all(5)),
      Image(height: 100, image: NetworkImage(item.imageUrl)),
      Container(
          child: Expanded(
        child: Container(
          padding: EdgeInsets.all(10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(item.title,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: 18)),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(item.source,
                      style: TextStyle(fontSize: 14, color: Colors.grey[400])),
                  Text(item.time,
                      style: TextStyle(fontSize: 14, color: Colors.grey[400]))
                ],
              )
            ],
          ),
        ),
      ))
    ]);
    return Container(
        margin: EdgeInsets.only(bottom: 10),
        width: double.infinity,
        height: 120,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6),
          color: Color(0xffffffff),
        ),
        child: row);
  }
}

3、资讯页面 index-news.dart文件内容

/*
 * @Description: 
 * @Version: 1.0
 * @Autor: in hengqi by mengze 
 * @Date: 2021-05-31 16:43:43
 * @LastEditors: in hengqi by mengze
 * @LastEditTime: 2021-06-02 17:22:46
 */
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:flutter_hook_up_rent/model/news-data-item.dart';
import 'package:flutter_hook_up_rent/pages/components/common/news-item.dart';

class NewsPage extends StatefulWidget {
  final String title;
  NewsPage({this.title});
  @override
  _NewsPageState createState() => _NewsPageState();
}

class _NewsPageState extends State<NewsPage> {
  List dataSource = [
    InfoItem(
        title:
            '置业选择 | 安贞西里 三室一厅 河间的古雅别院置业选择 | 安贞西里 三室一厅 河间的古雅别院置业选择 | 安贞西里 三室一厅 河间的古雅别院',
        imageUrl:
            'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',
        source: '新华网',
        time: '两天前',
        navigatorUrl: 'login'),
    InfoItem(
        title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',
        imageUrl:
            'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',
        source: '新华网',
        time: '两天前',
        navigatorUrl: 'login'),
    InfoItem(
        title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',
        imageUrl:
            'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',
        source: '新华网',
        time: '两天前',
        navigatorUrl: 'login'),
    InfoItem(
        title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',
        imageUrl:
            'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',
        source: '新华网',
        time: '两天前',
        navigatorUrl: 'login'),
    InfoItem(
        title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',
        imageUrl:
            'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',
        source: '新华网',
        time: '两天前',
        navigatorUrl: 'login'),
    InfoItem(
        title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',
        imageUrl:
            'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',
        source: '新华网',
        time: '两天前',
        navigatorUrl: 'login'),
    InfoItem(
        title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',
        imageUrl:
            'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',
        source: '新华网',
        time: '两天前',
        navigatorUrl: 'login'),
    InfoItem(
        title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',
        imageUrl:
            'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',
        source: '新华网',
        time: '两天前',
        navigatorUrl: 'login'),
    InfoItem(
        title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',
        imageUrl:
            'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',
        source: '新华网',
        time: '两天前',
        navigatorUrl: 'login'),
    InfoItem(
        title: '置业选择 | 安贞西里 三室一厅 河间的古雅别院',
        imageUrl:
            'https://pic1.ajkimg.com/display/anjuke/93a4d6ef27858b8b1e41c77c1049ca50/240x180c.jpg?t=1&srotate=1',
        source: '新华网',
        time: '两天前',
        navigatorUrl: 'login')
  ];
  List dataList = [];

  RefreshController _refreshController =
      RefreshController(initialRefresh: true);

  //下拉刷新的事件响应
  void _onRefresh() async {
    dataList = [];
    await Future.delayed(Duration(milliseconds: 3000), () {
      setState(() {
        dataList = dataSource.toList();
      });
    });
    _refreshController.refreshCompleted();
  }

  //上拉刷新的事件响应
  void _onLoading() async {
    await Future.delayed(Duration(milliseconds: 3000));
    dataList.addAll(dataSource);
    setState(() {
      dataList = dataList;
    });
    _refreshController.loadComplete();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title), centerTitle: true),
      body: SafeArea(
          child: SmartRefresher(
        controller: _refreshController,
        enablePullDown: true,
        enablePullUp: true,
        onRefresh: _onRefresh,
        onLoading: _onLoading,
        child: ListView.builder(
            itemExtent: 100.0,
            itemCount: dataList.length,
            itemBuilder: (context, index) {
              var item = dataList[index];
              return NewsItem(infoItem: item);
            }),
        header: WaterDropHeader(),
        footer: CustomFooter(builder: (context, mode) {
          Widget body;
          if (mode == LoadStatus.idle) {
            body = Text("pull up laod");
          } else if (mode == LoadStatus.loading) {
            body = CupertinoActivityIndicator();
          } else if (mode == LoadStatus.failed) {
            body = Text("Loading Failed! Click retry!");
          } else {
            body = Text("NO more Data");
          }
          return Container(
            height: 55.0,
            child: Center(
              child: body,
            ),
          );
        }),
      )),
    );
  }
}