feat: add get controller instead of stateful widget

Author: DaniEid

lib/animated_list_app.dart

@@ -1,18 +1,19 @@
 import 'package:animated_list/screens/animated_list_screen.dart';
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 
 class AnimatedListApp extends StatelessWidget {
   const AnimatedListApp({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
+    return GetMaterialApp(
       title: 'Flutter Demo',
       debugShowCheckedModeBanner: false,
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
-      home: const AnimatedListScreen(title: 'Flutter Animated List Example'),
+      home: AnimatedListScreen(title: 'Flutter Animated List Example'),
     );
   }
 }

lib/screens/animated_list_controller.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/cupertino.dart';
+import 'package:get/get.dart';
+
+class AnimatedListController extends GetxController {
+  RxDouble topPadding = 15.0.obs;
+  final duration = const Duration(milliseconds: 300);
+
+  scrollUpdated(ScrollMetrics metrics) {
+    if (topPadding.value == 25.0) return;
+    topPadding.value = 25.0;
+  }
+
+  scrollEnded(ScrollMetrics metrics) {
+    topPadding.value = 15;
+  }
+}

lib/screens/animated_list_screen.dart

@@ -1,75 +1,61 @@
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 
-class AnimatedListScreen extends StatefulWidget {
-  const AnimatedListScreen({Key? key, required this.title}) : super(key: key);
+import 'animated_list_controller.dart';
 
+class AnimatedListScreen extends StatelessWidget {
   final String title;
 
-  @override
-  _AnimatedListScreenState createState() => _AnimatedListScreenState();
-}
+  AnimatedListScreen({Key? key, required this.title}) : super(key: key);
 
-class _AnimatedListScreenState extends State<AnimatedListScreen> {
-  double _topPadding = 15.0;
-  final _duration = const Duration(milliseconds: 300);
+  final AnimatedListController controller = Get.put(AnimatedListController());
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: Text(widget.title),
+        title: Text(title),
       ),
       body: customAnimatedList,
     );
   }
 
-  _scrollUpdated(ScrollMetrics metrics) {
-    setState(() {
-      if (_topPadding == 20.0) return;
-      _topPadding = 20.0;
-    });
-  }
-
-  _scrollEnded(ScrollMetrics metrics) {
-    setState(() {
-      _topPadding = 15.0;
-    });
-  }
-
   Widget get customAnimatedList => NotificationListener<ScrollNotification>(
         onNotification: (scrollNotification) {
           if (scrollNotification is ScrollUpdateNotification) {
-            _scrollUpdated(scrollNotification.metrics);
+            controller.scrollUpdated(scrollNotification.metrics);
           } else if (scrollNotification is ScrollEndNotification) {
-            _scrollEnded(scrollNotification.metrics);
+            controller.scrollEnded(scrollNotification.metrics);
           }
           return true;
         },
         child: ListView.builder(
           itemCount: 25,
           itemBuilder: (context, index) {
-            return AnimatedPadding(
-              padding: EdgeInsets.only(top: _topPadding),
-              duration: _duration,
-              child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                child: Container(
-                  decoration: BoxDecoration(
-                      borderRadius: const BorderRadius.all(
-                        Radius.circular(12),
-                      ),
-                      boxShadow: [
-                        BoxShadow(
-                          color: Colors.grey.withOpacity(0.5),
-                          spreadRadius: 5,
-                          blurRadius: 7,
-                          offset:
-                              const Offset(0, 3), // changes position of shadow
+            return Obx(
+              () => AnimatedPadding(
+                padding: EdgeInsets.only(top: controller.topPadding.value),
+                duration: controller.duration,
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                  child: Container(
+                    decoration: BoxDecoration(
+                        borderRadius: const BorderRadius.all(
+                          Radius.circular(12),
                         ),
-                      ],
-                      color: index % 2 == 0 ? Colors.black38 : Colors.blue),
-                  height: 100,
-                  width: 100,
+                        boxShadow: [
+                          BoxShadow(
+                            color: Colors.grey.withOpacity(0.5),
+                            spreadRadius: 5,
+                            blurRadius: 7,
+                            offset: const Offset(
+                                0, 3), // changes position of shadow
+                          ),
+                        ],
+                        color: index % 2 == 0 ? Colors.black38 : Colors.blue),
+                    height: 100,
+                    width: 100,
+                  ),
                 ),
               ),
             );

pubspec.lock

@@ -74,6 +74,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  get:
+    dependency: "direct main"
+    description:
+      name: get
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.6.1"
   lints:
     dependency: transitive
     description:

pubspec.yaml

@@ -35,6 +35,9 @@ dependencies:
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2
 
+  #
+  get: 4.6.1
+
 dev_dependencies:
   flutter_test:
     sdk: flutter