Animated asset proportion graph tweaks

KomodoPlatform · Oct 9, 2023 · 521c364 · 521c364
1 parent 909f050
commit 521c364
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 46 deletions.
diff --git a/lib/screens/portfolio/animated_asset_proportions_graph.dart b/lib/screens/portfolio/animated_asset_proportions_graph.dart
@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:komodo_dex/blocs/coins_bloc.dart';
 import 'package:komodo_dex/model/coin_balance.dart';
@@ -17,60 +19,71 @@ class AnimatedAssetProportionsBarGraph extends StatefulWidget {
 
 class _AnimatedAssetProportionsBarGraphState
     extends State<AnimatedAssetProportionsBarGraph> {
+  StreamSubscription<List<CoinBalance>> _coinsSubscription;
+
+  List<CoinBalance> data = coinsBloc.coinBalance.toList();
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _coinsSubscription = coinsBloc.outCoins.listen((newData) {
+        setState(() => data = newData);
+      });
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
-    return StreamBuilder<List<CoinBalance>>(
-      key: Key('animated_asset_proportions_bar_graph_streamer'),
-      initialData: coinsBloc.coinBalance,
-      stream: coinsBloc.outCoins,
-      builder:
-          (BuildContext context, AsyncSnapshot<List<CoinBalance>> snapshot) {
-        final bool _isVisible = snapshot.data != null;
+    final bool _isVisible = data != null;
 
-        final balance = snapshot.data
-            .fold(0, (sum, coinBalance) => sum + coinBalance.balanceUSD);
+    final balance =
+        data.fold(0, (sum, coinBalance) => sum + coinBalance.balanceUSD);
 
-        final barProportions =
-            (snapshot.data ?? []).where((c) => c.balanceUSD > 0).map((c) {
-          final widthFraction = ((c.balanceUSD * 100) / balance) / 100;
-          return MapEntry(c.coin, widthFraction);
-        });
+    final barProportions = (data ?? []).where((c) => c.balanceUSD > 0).map((c) {
+      final widthFraction = ((c.balanceUSD * 100) / balance) / 100;
+      return MapEntry(c.coin, widthFraction);
+    });
 
-        return LayoutBuilder(
-          key: Key('animated_asset_proportions_bar_graph_layout_builder'),
-          builder: (context, constraints) {
-            final totalWidth = constraints.maxWidth;
+    return LayoutBuilder(
+      key: Key('animated_asset_proportions_bar_graph_layout_builder'),
+      builder: (context, constraints) {
+        final totalWidth = constraints.maxWidth;
 
-            final Iterable<Widget> bars = barProportions.map((e) {
-              return AnimatedContainer(
-                key: Key(e.key.abbr),
-                duration: Duration(milliseconds: 300),
-                curve: Curves.easeInOut,
-                color: Color(int.parse(e.key.colorCoin)),
-                width: totalWidth * e.value,
-              );
-            });
+        final Iterable<Widget> bars = barProportions.map((e) {
+          return AnimatedContainer(
+            key: Key(e.key.abbr),
+            duration: Duration(milliseconds: 300),
+            curve: Curves.easeInOut,
+            color: Color(int.parse(e.key.colorCoin)),
+            width: totalWidth * e.value,
+          );
+        });
 
-            return ClipRect(
-              key: Key('animated_asset_proportions_bar_graph_clip_rect'),
-              child: AnimatedOpacity(
-                key: Key(
-                  'animated_asset_proportions_bar_graph_animated_opacity',
-                ),
-                opacity: _isVisible ? 1.0 : 0.0,
-                duration: const Duration(milliseconds: 300),
-                child: SizedBox(
-                  width: totalWidth,
-                  height: 16,
-                  child: Row(
-                    children: bars.toList(),
-                  ),
-                ),
+        return ClipRect(
+          key: Key('animated_asset_proportions_bar_graph_clip_rect'),
+          child: AnimatedOpacity(
+            key: Key(
+              'animated_asset_proportions_bar_graph_animated_opacity',
+            ),
+            opacity: _isVisible ? 1.0 : 0.0,
+            duration: const Duration(milliseconds: 300),
+            child: SizedBox(
+              width: totalWidth,
+              height: 16,
+              child: Row(
+                children: bars.toList(),
               ),
-            );
-          },
+            ),
+          ),
         );
       },
     );
   }
+
+  @override
+  void dispose() {
+    _coinsSubscription.cancel();
+    super.dispose();
+  }
 }
diff --git a/lib/screens/portfolio/coins_page.dart b/lib/screens/portfolio/coins_page.dart
@@ -129,8 +129,8 @@ class _CoinsPageState extends State<CoinsPage> {
                         mainAxisSize: MainAxisSize.max,
                         mainAxisAlignment: MainAxisAlignment.center,
                         children: <Widget>[
-                          // Spacer(),
                           StreamBuilder<List<CoinBalance>>(
+                            key: Key('stream-builder-coin-balance'),
                             initialData: coinsBloc.coinBalance,
                             stream: coinsBloc.outCoins,
                             builder: (
@@ -209,7 +209,6 @@ class _CoinsPageState extends State<CoinsPage> {
                               }
                             },
                           ),
-                          // Spacer(),
                           AnimatedCollapse(
                             key: Key('animated-collapse-bar-graph'),
                             fullHeight: 8,