Add audio bubble appearance animation

Author: thecodepapaya

lib/src/audio_list.dart

@@ -1,5 +1,6 @@
 import 'dart:io';
 
+import 'package:audio_chat/src/audio_state.dart';
 import 'package:audio_chat/src/globals.dart';
 import 'package:audio_chat/src/widgets/audio_bubble.dart';
 import 'package:flutter/material.dart';
@@ -14,38 +15,24 @@ class AudioList extends StatefulWidget {
 class _AudioListState extends State<AudioList> {
   List<FileSystemEntity> data = [];
 
+  @override
+  void initState() {
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return FutureBuilder<List<FileSystemEntity>>(
-      key: const ValueKey("futureBuilder"),
-      future: fetchAudioFiles(),
-      initialData: data,
-      builder: (context, AsyncSnapshot<List<FileSystemEntity>> snapshot) {
-        if (snapshot.connectionState == ConnectionState.active ||
-            snapshot.connectionState == ConnectionState.waiting) {
-          return const Center(
-            child: CircularProgressIndicator(),
-          );
-        }
-        if (snapshot.hasData) {
-          data = snapshot.data!;
-          return ListView.builder(
-            key: const ValueKey("ListBuilder"),
-            reverse: true,
-            padding: const EdgeInsets.symmetric(vertical: 15),
-            itemCount: snapshot.data?.length,
-            itemBuilder: (BuildContext context, int index) {
-              return AudioBubble(
-                filepath: snapshot.data![index].path,
-                key: ValueKey(snapshot.data![index].path),
-              );
-            },
-          );
-        } else {
-          return const Center(
-            child: Text("No Audio files"),
-          );
-        }
+    return AnimatedList(
+      padding: const EdgeInsets.symmetric(vertical: 15),
+      key: Globals.audioListKey,
+      itemBuilder: (context, index, animation) {
+        return FadeTransition(
+          opacity: animation,
+          child: AudioBubble(
+            filepath: AudioState.files[index],
+            key: ValueKey(AudioState.files[index]),
+          ),
+        );
       },
     );
   }

lib/src/audio_state.dart

@@ -0,0 +1,6 @@
+/// Choosing this method because using proper state management would be an
+/// overkill for the scope of this project.
+class AudioState {
+  AudioState._();
+  static List<String> files = [];
+}

lib/src/globals.dart

@@ -11,5 +11,6 @@ class Globals {
   static const double borderRadius = 27;
   static const double defaultPadding = 8;
   static String documentPath = '';
-  static GlobalKey audioListKey = GlobalKey();
+  static GlobalKey<AnimatedListState> audioListKey =
+      GlobalKey<AnimatedListState>();
 }

lib/src/home_page.dart

@@ -42,7 +42,7 @@ class _HomePageState extends State<HomePage>
         padding: const EdgeInsets.all(Globals.defaultPadding),
         child: Column(
           children: [
-            Expanded(child: AudioList(key: Globals.audioListKey)),
+            const Expanded(child: AudioList()),
             Row(
               mainAxisSize: MainAxisSize.max,
               children: [

lib/src/widgets/audio_bubble.dart

@@ -18,19 +18,18 @@ class _AudioBubbleState extends State<AudioBubble> {
   @override
   void initState() {
     super.initState();
-  }
-
-  @override
-  void didChangeDependencies() async {
-    super.didChangeDependencies();
     player.setFilePath(widget.filepath).then((value) {
       setState(() {
         duration = value;
-        debugPrint("File Duration: ${duration!.inMilliseconds}");
       });
     });
   }
 
+  @override
+  void didChangeDependencies() async {
+    super.didChangeDependencies();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Padding(

lib/src/widgets/record_button.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 import 'dart:io';
 
+import 'package:audio_chat/src/audio_state.dart';
 import 'package:audio_chat/src/globals.dart';
 import 'package:audio_chat/src/widgets/flow_shader.dart';
 import 'package:flutter/material.dart';
@@ -187,7 +188,9 @@ class _RecordButtonState extends State<RecordButton> {
           debugPrint("Locked recording");
         } else {
           var filePath = await Record().stop();
-          Globals.audioListKey.currentState!.setState(() {});
+          AudioState.files.add(filePath!);
+          Globals.audioListKey.currentState!
+              .insertItem(AudioState.files.length - 1);
           debugPrint(filePath);
         }
       },