Flutter UI #28: Fun with Pull To Refresh in Flutter


Flutter UI #28: Fun with Pull To Refresh in Flutter

Tutorial and code of Pull To Refresh in Flutter. Copy and paste the below code as per your requirements.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pull To Refresh',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const HomePage(),
    );
  }
}
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late GlobalKey<ScaffoldState> _scaffoldKey;
  late List<String> _demoData;
  @override
  void initState() {
    _demoData = [
      "Content 1",
      "Content 2",
      "Content 3",
      "Content 4"
    ];
    _scaffoldKey = GlobalKey();
    super.initState();
  }
  @override
  void dispose() {
    // disposing states
    _scaffoldKey?.currentState?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: const Center(child: Text('Pull To Refresh'),)
        ),
        body: RefreshIndicator(
          child: ListView.builder(
            itemBuilder: (ctx, idx) {
              return Card(
                child: ListTile(
                  title: Text(_demoData[idx]),
                ),
              );
            },
            itemCount: _demoData.length,
            physics: const AlwaysScrollableScrollPhysics(),
          ),
          onRefresh: () {
            return Future.delayed(
              const Duration(seconds: 1),
                  () {
                setState(() {
                  _demoData.addAll(["Content 5", "Content 6"]);
                });
                _scaffoldKey.currentState?.showSnackBar(
                  const SnackBar(
                    content: Text('Page Refreshed'),
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

Leave a Reply

Your email address will not be published.