Add fetch more example

gonuit · gonuit · commit ede238f764ee · 2022-04-02T15:06:43.000+02:00
diff --git a/example/lib/indicators/swipe_action.dart b/example/lib/indicators/swipe_action.dart
@@ -0,0 +1,84 @@
+import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
+import 'package:example/widgets/example_app_bar.dart';
+import 'package:flutter/material.dart';
+
+class FetchMoreIndicator extends StatelessWidget {
+  final Widget child;
+  final VoidCallback onAction;
+
+  const FetchMoreIndicator({
+    Key? key,
+    required this.child,
+    required this.onAction,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    const height = 150.0;
+    return CustomRefreshIndicator(
+      onRefresh: () async => onAction(),
+      reversed: true,
+      trailingScrollIndicatorVisible: false,
+      leadingScrollIndicatorVisible: true,
+      child: child,
+      builder: (
+        BuildContext context,
+        Widget child,
+        IndicatorController controller,
+      ) {
+        return AnimatedBuilder(
+            animation: controller,
+            builder: (context, _) {
+              final dy = controller.value.clamp(0.0, 1.25) *
+                  -(height - (height * 0.25));
+              return Stack(
+                children: [
+                  Transform.translate(
+                    offset: Offset(0.0, dy),
+                    child: child,
+                  ),
+                  Positioned(
+                    bottom: -height,
+                    left: 0,
+                    right: 0,
+                    height: height,
+                    child: Container(
+                      transform: Matrix4.translationValues(0.0, dy, 0.0),
+                      padding: const EdgeInsets.only(top: 30.0),
+                      constraints: const BoxConstraints.expand(),
+                      child: Column(
+                        children: [
+                          if (controller.isLoading)
+                            Container(
+                              margin: const EdgeInsets.only(bottom: 8.0),
+                              width: 16,
+                              height: 16,
+                              child: const CircularProgressIndicator(
+                                color: appContentColor,
+                                strokeWidth: 2,
+                              ),
+                            )
+                          else
+                            const Icon(
+                              Icons.keyboard_arrow_up,
+                              color: appContentColor,
+                            ),
+                          Text(
+                            controller.isLoading
+                                ? "Fetching..."
+                                : "Pull to fetch more",
+                            style: const TextStyle(
+                              color: appContentColor,
+                            ),
+                          )
+                        ],
+                      ),
+                    ),
+                  ),
+                ],
+              );
+            });
+      },
+    );
+  }
+}
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 
 import 'indicators/simple_indicator.dart';
 import 'screens/example_indicator_screen.dart';
+import 'screens/fetch_more_screen.dart';
 import 'screens/ice_cream_indicator_screen.dart';
 import 'screens/plane_indicator_screen.dart';
 import 'screens/check_mark_indicator_screen.dart';
@@ -29,10 +30,11 @@ class MyApp extends StatelessWidget {
       routes: {
         '/example': (context) => const ExampleIndicatorScreen(),
         '/plane': (context) => const PlaneIndicatorScreen(),
-        '/ice_cream': (context) => const IceCreamIndicatorScreen(),
+        '/ice-cream': (context) => const IceCreamIndicatorScreen(),
         '/presentation': (context) => const PresentationScreen(),
         '/check-mark': (context) => const CheckMarkIndicatorScreen(),
         '/warp': (context) => const WarpIndicatorScreen(),
+        '/fetch-more': (context) => const FetchMoreScreen(),
         '/programmatically-controlled': (context) =>
             const ProgrammaticallyControlled(),
       },
@@ -57,7 +59,7 @@ class MainScreen extends StatelessWidget {
               child: Container(
                 height: 50,
                 alignment: Alignment.center,
-                child: const Text("Presentation"),
+                child: const Text("Controller presentation"),
               ),
               onPressed: () => Navigator.pushNamed(
                 context,
@@ -111,15 +113,15 @@ class MainScreen extends StatelessWidget {
               ),
               onPressed: () => Navigator.pushNamed(
                 context,
-                '/ice_cream',
+                '/ice-cream',
               ),
             ),
             const SizedBox(height: 15),
             ElevatedButton(
               child: Container(
                 height: 50,
                 alignment: Alignment.center,
-                child: const Text("Check mark"),
+                child: const Text("Witch complete state"),
               ),
               onPressed: () => Navigator.pushNamed(
                 context,
@@ -151,6 +153,18 @@ class MainScreen extends StatelessWidget {
                 '/programmatically-controlled',
               ),
             ),
+            const SizedBox(height: 15),
+            ElevatedButton(
+              child: Container(
+                height: 50,
+                alignment: Alignment.center,
+                child: const Text("Swipe to fetch more"),
+              ),
+              onPressed: () => Navigator.pushNamed(
+                context,
+                '/fetch-more',
+              ),
+            ),
           ],
         ),
       ),
diff --git a/example/lib/screens/fetch_more_screen.dart b/example/lib/screens/fetch_more_screen.dart
@@ -0,0 +1,40 @@
+import 'package:example/indicators/swipe_action.dart';
+import 'package:example/widgets/example_app_bar.dart';
+import 'package:example/widgets/example_list.dart';
+import 'package:flutter/material.dart';
+
+class FetchMoreScreen extends StatefulWidget {
+  const FetchMoreScreen({Key? key}) : super(key: key);
+
+  @override
+  State<FetchMoreScreen> createState() => _FetchMoreScreenState();
+}
+
+class _FetchMoreScreenState extends State<FetchMoreScreen> {
+  int _itemsCount = 10;
+
+  Future<void> _fetchMore() async {
+    // Simulate fetch time
+    await Future<void>.delayed(const Duration(seconds: 2));
+    // make sure that the widget is still mounted.
+    if (!mounted) return;
+    // Add more fake elements
+    setState(() {
+      _itemsCount += 10;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: const ExampleAppBar(title: "Scroll to fetch more"),
+      body: FetchMoreIndicator(
+        child: ExampleList(
+          itemCount: _itemsCount,
+          countElements: true,
+        ),
+        onAction: _fetchMore,
+      ),
+    );
+  }
+}
diff --git a/example/lib/screens/programmatically_controlled_indicator_screen.dart b/example/lib/screens/programmatically_controlled_indicator_screen.dart
@@ -2,6 +2,7 @@ import 'dart:math';
 
 import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
 import 'package:example/indicators/warp_indicator.dart';
+import 'package:example/widgets/example_app_bar.dart';
 import 'package:example/widgets/example_list.dart';
 import 'package:flutter/material.dart';
 
@@ -33,8 +34,8 @@ class _ProgrammaticallyControlledState
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: const Text("Programmatically-controlled"),
+      appBar: ExampleAppBar(
+        title: "Programmatically-controlled",
         actions: [
           AnimatedBuilder(
             animation: controller,
diff --git a/example/lib/widgets/example_app_bar.dart b/example/lib/widgets/example_app_bar.dart
@@ -1,9 +1,17 @@
 import 'package:flutter/material.dart';
 
 const appBackgroundColor = Color(0xFFf8f4fc);
+const appContentColor = Color(0xff877162);
 
 class ExampleAppBar extends StatelessWidget implements PreferredSizeWidget {
-  const ExampleAppBar({Key? key}) : super(key: key);
+  final String? title;
+  final List<Widget>? actions;
+
+  const ExampleAppBar({
+    Key? key,
+    this.title,
+    this.actions,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -12,12 +20,13 @@ class ExampleAppBar extends StatelessWidget implements PreferredSizeWidget {
         color: Color(0xff877162),
       ),
       backgroundColor: appBackgroundColor,
-      title: const Text(
-        "flutter_custom_refresh_indicator",
-        style: TextStyle(
-          color: Color(0xff877162),
+      title: Text(
+        title ?? "flutter_custom_refresh_indicator",
+        style: const TextStyle(
+          color: appContentColor,
         ),
       ),
+      actions: actions,
       elevation: 3,
     );
   }
diff --git a/example/lib/widgets/example_list.dart b/example/lib/widgets/example_list.dart
@@ -4,10 +4,12 @@ import 'example_app_bar.dart';
 
 class ExampleList extends StatelessWidget {
   final int itemCount;
+  final bool countElements;
 
   final Color backgroundColor;
   const ExampleList({
     Key? key,
+    this.countElements = false,
     this.backgroundColor = appBackgroundColor,
     this.itemCount = 4,
   }) : super(key: key);
@@ -30,7 +32,18 @@ class ExampleList extends StatelessWidget {
         physics: const AlwaysScrollableScrollPhysics(
           parent: ClampingScrollPhysics(),
         ),
-        itemBuilder: (BuildContext context, int index) => const Element(),
+        itemBuilder: (BuildContext context, int index) => countElements
+            ? Element(
+                child: Center(
+                  child: Text(
+                    "${index + 1}",
+                    style: const TextStyle(
+                      color: appContentColor,
+                    ),
+                  ),
+                ),
+              )
+            : const Element(),
         itemCount: itemCount,
         separatorBuilder: (BuildContext context, int index) => const Divider(
           height: 0,
@@ -43,7 +56,9 @@ class ExampleList extends StatelessWidget {
 }
 
 class Element extends StatelessWidget {
-  const Element({Key? key}) : super(key: key);
+  final Widget? child;
+
+  const Element({Key? key, this.child}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -53,7 +68,7 @@ class Element extends StatelessWidget {
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
-          const FakeBox(height: 80, width: 80),
+          FakeBox(height: 80, width: 80, child: child),
           const SizedBox(width: 20),
           Expanded(
             child: Column(
@@ -74,10 +89,12 @@ class Element extends StatelessWidget {
 }
 
 class FakeBox extends StatelessWidget {
+  final Widget? child;
   const FakeBox({
     Key? key,
     required this.width,
     required this.height,
+    this.child,
   }) : super(key: key);
 
   final double width;
@@ -97,6 +114,7 @@ class FakeBox extends StatelessWidget {
       width: width,
       height: height,
       decoration: _boxDecoration,
+      child: child,
     );
   }
 }
