Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article describes how to refresh a Flutter with a background image by pulling it

Pull refresh “is a common task for mobile applications that display lists of dynamic data. Today we’ll pull to refresh using the pull_to_refresh package and create a custom Collapsible header using Slivers

Set up the

We will first add the pull_TO_REFRESH package to our project

Pull_to_refresh: ^ 1.4.5Copy the code

We can then use the aMaterialApp and a Home widget for basic Settings.

class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp(title: 'Flutter Demo', home: Home()); } } class Home extends StatelessWidget { final RefreshController _refreshController = RefreshController(); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey[700], body: Container(), ); }}Copy the code

We will then create a function that returns the list of widgets we will use to display in the list. We will display rounded rectangles of height 100 below each other.

 List<Widget> buildList() {
    return List.generate(
        15,
        (index) => Container(
              height: 100,
              margin: const EdgeInsets.symmetric(
                vertical: 10,
                horizontal: 15,
              ),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
              ),
            ));
  }
Copy the code

perform

Now we can continue to add the PullToRefresh functionality. We’ll import the package and then create our controller as the final variable. We will make our scaffold body a SmartRefresher to receive our controller.

import 'package:pull_to_refresh/pull_to_refresh.dart'; class Home extends StatelessWidget { final RefreshController _refreshController = RefreshController(); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey[700], body: SmartRefresher( controller: _refreshController, enablePullDown: true, header: defaultHeader, onRefresh: () async { await Future.delayed(Duration(seconds: 1)); _refreshController.refreshCompleted(); }, child: CustomScrollView( slivers: [ SliverList(delegate: SliverChildListDelegate(buildList())) ], ), ), ); }... }Copy the code

Above we enabled the pull-down, we provided the default header that came with the package, and we wanted to delay the refresh and then indicate that the refresh was complete. We also set our List in a CustomScrollView. Because we knew we were adding a foldable toolbar, we knew that slivers would be involved. This code alone lets you refresh without any background or collapsible application bar.

Add collapsible AppBars and images

To add RefreshBackground, we will create a new widget with a SliverAppBar as its root level.

class RefreshBackground extends StatelessWidget { @override Widget build(BuildContext context) { return SliverAppBar( ExpandedHeight: 200.0, flexibleSpace: FlexibleSpaceBar(Background: Image.network( "Https://images.unsplash.com/photo-1541701494587-cb58502866ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0c21b1ac3066ae4 d354a3b2e0064c8be&auto=format&fit=crop&w=500&q=60", fit: BoxFit.cover, )), ); }}Copy the code

Now we can add it to our list, and that’s the tutorial.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[700],
      body: SmartRefresher(
        controller: _refreshController,
        enablePullDown: true,
        header: defaultHeader,
        onRefresh: () async {
          await Future.delayed(Duration(seconds: 1));
          _refreshController.refreshCompleted();
        },
        child: CustomScrollView(
          slivers: [
            RefreshBackground(), // <== Add AppBack background
            SliverList(delegate: SliverChildListDelegate(buildList()))
          ],
        ),
      ),
    );
  }
Copy the code

If you run this code, you should see giFs in the introduction. The only difference is the color of the application bar when folding. You can change it.