Search This Blog

Wednesday, November 28, 2018

Flutter - Pull to refresh widget.

Pull to Refresh or Swipe Down is a common feature of all big mobile Application. You might have seen it in a lot of mobile apps like Twitter and Facebook provides a feature to swipe or pull down to refresh its content. When you swipe from top to bottom of the screen. After that, a loader will be shown and will disappear once the new content is loaded.

In this post, we are going to build a Flutter Application to achieve it. Flutter SDK providing us RefreshIndicator to apply a pull to refresh on any screen. To apply a pull to refresh on any screen, we have to wrap the root widget of the screen inside of RefreshIndicator. 

In this example, we'll wrap a ListView inside of RefreshIndicator. When user will pull down it triggers a refresh event. We catch this event to refresh the list. The final output will look like below:


Creating a New Project
1. Create a new project from File ⇒ New Flutter Project with your development IDE and add english_words: ^3.1.4. We'll use this lib for display content in the list when we perform pull to refresh on the list.
2. Open main.dart file and modifying it. As we have set our theme and remove debug banner property of Application.

import 'package:flutter/material.dart'; import 'package:flutter_pull_to_refresh/pull_to_refresh.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: new ThemeData( primaryColor: const Color(0xFF02BB9F), primaryColorDark: const Color(0xFF167F67), accentColor: const Color(0xFF167F67), ), home: PullToRefresh(), ); } }

3. Now, let's create another dart file pull_to_refresh.dart. In this file, we'll write our main logic of pull to refresh. On the top of widget, we have created array "final _words = <WordPair>[];". It'll keep a list of items that we used to display in the list. As you can see below, we have wrapped listview inside of RefreshIndicator.
import 'dart:async'; import 'package:english_words/english_words.dart'; import 'package:flutter/material.dart'; class PullToRefresh extends StatefulWidget { @override State<StatefulWidget> createState() { return _SwipeToRefreshState(); } } class _SwipeToRefreshState extends State<PullToRefresh> { final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey = new GlobalKey<RefreshIndicatorState>(); final _words = <WordPair>[]; @override void initState() { super.initState(); //initializing list _words.addAll(generateWordPairs().take(20)); } @override Widget build(BuildContext context) {
//It'll create a item of list.
 Widget _buildRow(WordPair pair) { return new Column( children: <Widget>[ new ListTile( title: new Text( pair.asPascalCase, ), ), new Divider(), ], ); } Widget _buildSuggestions() { return new ListView.builder( padding: const EdgeInsets.all(16.0), itemCount: _words.length, itemBuilder: (context, i) { return _buildRow(_words[i]); }); } return Scaffold( appBar: AppBar( title: Text( "Pull To Refresh", style: new TextStyle(color: Colors.white), ), ), //wraping listview inside of RefreshIndicator body: RefreshIndicator( key: _refreshIndicatorKey, onRefresh: _refresh, child: _buildSuggestions()), ); } //Trigger method after pull to down. Future<Null> _refresh() async { //Holding pull to refresh loader widget for 2 sec. //You can fetch data from server. await new Future.delayed(const Duration(seconds: 2)); _words.clear(); setState(() => _words.addAll(generateWordPairs().take(20))); return null; } }

If you have followed the article carefully, you can see the app running very smoothly as shown in the above. But if you are facing any problem or you have any quires, please feel free to ask it from below comment section and you can ask it on SLACK.



Post a Comment


Facebook Gruop


  • Cover art Blend

    Blend app is very advanced app there are lots of features like shayari, status, chat, feed....