Improve UI animations

todo-devs · Oct 25, 2021 · 0f183f8 · 0f183f8
1 parent 39b3220
commit 0f183f8
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 13 deletions.
diff --git a/lib/app/widgets/app_drawer.dart b/lib/app/widgets/app_drawer.dart
@@ -1,3 +1,4 @@
+import 'package:animate_do/animate_do.dart';
 import 'package:flutter/material.dart';
 import 'package:todo/app/app.dart';
 // import 'package:todo/nauta/nauta.dart';
@@ -17,17 +18,20 @@ class AppDrawer extends StatelessWidget {
         child: Stack(
           children: [
             ListView(
+              physics: const BouncingScrollPhysics(),
               children: [
                 DrawerHeader(
                   child: Center(
                     child: Column(
                       mainAxisSize: MainAxisSize.min,
                       children: [
-                        Container(
-                          margin: const EdgeInsets.all(10),
-                          child: Assets.images.logo.image(
-                            width: 75,
-                            height: 75,
+                        ZoomIn(
+                          child: Container(
+                            margin: const EdgeInsets.all(10),
+                            child: Assets.images.logo.image(
+                              width: 75,
+                              height: 75,
+                            ),
                           ),
                         ),
                         Text(

diff --git a/lib/nauta/view/accounts_view.dart b/lib/nauta/view/accounts_view.dart
@@ -1,3 +1,4 @@
+import 'package:animate_do/animate_do.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:todo/app/app.dart';
@@ -32,9 +33,10 @@ class AccountsView extends StatelessWidget {
           return Padding(
             padding: const EdgeInsets.all(8),
             child: ListView(
+              physics: const BouncingScrollPhysics(),
               children: [
                 ...state.accounts.map(
-                  (e) => AccountTile(account: e),
+                  (e) => FadeInUp(child: AccountTile(account: e)),
                 ),
               ],
             ),

diff --git a/lib/nauta/view/save_account_view.dart b/lib/nauta/view/save_account_view.dart
@@ -22,7 +22,7 @@ class SaveAccountView extends StatelessWidget {
           AccountsPage.open(context);
         },
         child: SingleChildScrollView(
-          physics: const ClampingScrollPhysics(),
+          physics: const BouncingScrollPhysics(),
           child: AutofillGroup(
             child: Padding(
               padding: const EdgeInsets.all(8),

diff --git a/lib/settings/view/disclaimer_view.dart b/lib/settings/view/disclaimer_view.dart
@@ -20,6 +20,7 @@ class DisclaimerView extends StatelessWidget {
         title: AppBarTitle(l10n.termOfUse),
       ),
       body: ListView(
+        physics: const BouncingScrollPhysics(),
         children: [
           const SizedBox(
             height: 20,

diff --git a/lib/settings/view/settings_view.dart b/lib/settings/view/settings_view.dart
@@ -26,6 +26,7 @@ class SettingsView extends StatelessWidget {
           return Padding(
             padding: const EdgeInsets.all(30),
             child: ListView(
+              physics: const BouncingScrollPhysics(),
               children: [
                 const SizedBox(height: 30),
                 SettingsSwitch(

diff --git a/lib/ussd_codes/view/ussd_category_view.dart b/lib/ussd_codes/view/ussd_category_view.dart
@@ -1,3 +1,4 @@
+import 'package:animate_do/animate_do.dart';
 import 'package:flutter/material.dart';
 import 'package:todo/app/app.dart';
 import 'package:todo/ussd_codes/ussd_codes.dart';
@@ -19,6 +20,7 @@ class UssdCategoryView extends StatelessWidget {
         title: AppBarTitle(category.name),
       ),
       body: ListView(
+        physics: const BouncingScrollPhysics(),
         children: [
           const SizedBox(
             height: 15,
@@ -37,9 +39,12 @@ class UssdCategoryView extends StatelessWidget {
             height: 15,
           ),
           ...category.items.map(
-            (e) => UssdItemWidget(
-              ussdItem: e,
-              recent: recent,
+            (e) => FadeInLeft(
+              duration: const Duration(milliseconds: 400),
+              child: UssdItemWidget(
+                ussdItem: e,
+                recent: recent,
+              ),
             ),
           ),
           const SizedBox(

diff --git a/lib/ussd_codes/view/ussd_code_view.dart b/lib/ussd_codes/view/ussd_code_view.dart
@@ -1,3 +1,4 @@
+import 'package:animate_do/animate_do.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:todo/app/app.dart';
@@ -25,11 +26,15 @@ class UssdCodeView extends StatelessWidget {
     }
 
     return ListView(
+      physics: const BouncingScrollPhysics(),
       children: [
         ...items.map(
-          (e) => UssdItemWidget(
-            ussdItem: e,
-            recent: recent,
+          (e) => FadeInLeft(
+            duration: const Duration(milliseconds: 400),
+            child: UssdItemWidget(
+              ussdItem: e,
+              recent: recent,
+            ),
           ),
         )
       ],

diff --git a/lib/ussd_codes/widgets/ussd_code_form.dart b/lib/ussd_codes/widgets/ussd_code_form.dart
@@ -42,6 +42,7 @@ class _UssdCodeFormState extends State<UssdCodeForm> {
     return Form(
       key: _formKey,
       child: ListView(
+        physics: const BouncingScrollPhysics(),
         children: [
           widget.icon,
           const SizedBox(height: 30),

diff --git a/pubspec.lock b/pubspec.lock
@@ -15,6 +15,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.7.2"
+  animate_do:
+    dependency: "direct main"
+    description:
+      name: animate_do
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
   archive:
     dependency: transitive
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -7,6 +7,7 @@ environment:
   sdk: ">=2.12.0 <3.0.0"
 
 dependencies:
+  animate_do: ^2.0.0
   beamer: ^0.14.1
   bloc: ^7.2.0
   connectivity_plus: ^2.0.2