Search code examples
flutterdartpull-to-refresh

Why is the refreshing pull in the App not working?


I'm building my app with Flutter 2.10.5 and Dart 2.16.2. When i try to refresh the demo content whith a pull, nothing happens. I have multiple navigation routes for different content. So the demo is a litte bit complex.

The main.dart includes the basic code for the app. I use the NavDrawer Widget to build the different pages. Every route is defined in the navigation.dart file, which reference to the content widgets.

My code so far is:

import 'dart:core';
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() async {
  runApp(const MyApp());
}

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

  // This widget is the root of the application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo Company',
      theme: ThemeData(),
      debugShowCheckedModeBanner: false,
      home: const HomePage(title: 'Demo Company'),
    );
  }
}

class _HomePageState extends State<HomePage> {
  @override
  initState() {
    super.initState();
  }

  Widget _infoTile(String title, String subtitle) {
    return ListTile(
      title: Text(title),
      subtitle: Text(subtitle.isEmpty ? 'Not set' : subtitle),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const NavDrawer(),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            _infoTile('App name', 'Demo App....'),
            // Multiple Liste Tiles...
          ],
        ),
      ),
    );
  }
}

//----------------------------------------------------------------------
// navigation.dart
//----------------------------------------------------------------------

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

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const <Widget>[
                Text(
                  'Navigation',
                  style: TextStyle(color: Colors.white, fontSize: 30),
                ),
                SizedBox(height: 30.0),
                Text('Firstname', style: TextStyle(color: Colors.black, fontSize: 15)),
                Text('Accountname', style: TextStyle(color: Colors.black, fontSize: 15)),
              ],
            ),
          ),
          ListTile(
            leading: const Icon(Icons.notifications),
            title: const Text('Demo'),
            onTap: () {
              Navigator.push(
                context,
                Demo.route(),
              );
            },
          ),
          // Multiple Navigation List Tiles...
        ],
      ),
    );
  }
}


//----------------------------------------------------------------------
// demo.dart
//----------------------------------------------------------------------

class HomePage extends StatefulWidget {
  const HomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<HomePage> createState() => _HomePageState();
}

class Demo extends StatefulWidget {
  const Demo({Key? key}) : super(key: key);

  static Route route() {
    return CupertinoPageRoute(builder: (_) => const Demo());
  }

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

class _DemoState extends State<Demo> {
  final _data = <WordPair>[];

  @override
  void initState() {
    super.initState();
    _data.addAll(generateWordPairs().take(20));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Woolha.com Flutter Tutorial'),
      ),
      body: _buildList(),
    );
  }

  Widget _buildList() {
    return RefreshIndicator(
      onRefresh: _refreshData,
      child: ListView.builder(
        padding: const EdgeInsets.all(20.0),
        itemBuilder: (context, index) {
          WordPair wordPair = _data[index];

          return _buildListItem(wordPair.asString, context);
        },
        itemCount: _data.length,
      ),
    );
  }

  Widget _buildListItem(String word, BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(word),
      ),
    );
  }

  Future _refreshData() async {
    await Future.delayed(const Duration(seconds: 3));
    _data.clear();
    _data.addAll(generateWordPairs().take(20));

    setState(() {});
  }
}

class ShowMessages extends StatelessWidget {
  final String type;
  final Color color;

  const ShowMessages({Key? key, required this.type, required this.color}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
        //color: color,
        physics: const AlwaysScrollableScrollPhysics(),
        children: [
          ListTile(
            title: Text(
              type,
              style: Theme.of(context).textTheme.bodyText1,
            ),
          ),
        ]);
  }
}

Copy this code to DartPad

What is wrong?


Solution

  • Well for me this code... works I copied it into Dartpad, then Dev Tools in browser (F12) > Device Emulation > Responsive. And you can use pull to refresh. Of course this doesn't work using web view and mouse. I believe this gesture is not supported. enter image description here