Lazy Loading & Pagination, Alpha Channel -> White Conversion, Add Height & Width to DB & API

web_native/lib/screens/home_screen.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/cupertino.dart';
 
 import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
 import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
@@ -6,7 +7,6 @@ import 'package:cached_network_image/cached_network_image.dart';
 
 import 'package:imagini/blocs/home_bloc.dart';
 import 'package:imagini/core/app_provider.dart';
-import 'package:imagini/graphql/imagini_graphql.dart';
 
 class HomeScreen extends StatefulWidget {
   static const String PATH = '/Home';
@@ -21,23 +21,48 @@ class _HomeScreenState extends State<HomeScreen> {
 
   HomeBloc bloc;
 
+  ScrollController _gridViewController = new ScrollController();
+  ScrollController _parentController = new ScrollController();
+
+  int _currentIndex = 0;
+  int _totalLength = 1;
+  double _lastOffset = 0.0;
+
   @override
   Widget build(BuildContext context) {
     _init();
 
     return PlatformScaffold(
-      body: _buildGridView(),
+      body: _buildBody(),
       bottomNavBar: _buildNavBar()
     );
   }
 
   void _init(){
+    _gridViewController.addListener(_scrollListener);
+
     if(bloc != null)
         return;
 
     bloc = HomeBloc(AppProvider.getApplication(context));
-    // bloc.mediaItemsResult.listen((bool status) {
-    // });
+  }
+
+  // Needed Due to Nested Scroll Views
+  void _scrollListener() {
+    // Reflect Downwards & Upwards Scrolling (Respectively) on Parent
+    if (_gridViewController.offset > _lastOffset) {
+      if (_parentController.offset < _parentController.position.maxScrollExtent) {
+        _parentController.jumpTo(_parentController.offset + (_lastOffset - _gridViewController.offset).abs());
+      }
+    } else if (_gridViewController.offset < _lastOffset) {
+      if (_parentController.offset > 0) {
+        _parentController.jumpTo(_parentController.offset - (_lastOffset - _gridViewController.offset).abs());
+      }
+    }
+
+    // Don't update offset on top or bottom bounce
+    if (_gridViewController.offset < _gridViewController.position.maxScrollExtent && _gridViewController.offset > 0)
+      _lastOffset = _gridViewController.offset;
   }
 
   @override
@@ -46,59 +71,70 @@ class _HomeScreenState extends State<HomeScreen> {
     // bloc.dispose();
   }
 
-  Widget _buildNavBar() {
-    return PlatformNavBar(
-        currentIndex: 0,
-        itemChanged: (index) => setState(
-          () {
-            // _selectedTabIndex = index;
-            print(index);
-          },
-        ),
-        items: [
-          BottomNavigationBarItem(
-            label: "Gallery",
-            icon: Icon(PlatformIcons(context).collections),
-          ),
-          BottomNavigationBarItem(
-            label: "Me",
-            icon: Icon(PlatformIcons(context).person),
-          ),
-          BottomNavigationBarItem(
-            label: "Settings",
-            icon: Icon(PlatformIcons(context).settings),
-          ),
-        ],
-      );
+  Widget _buildBody() {
+    var widgetMap = [
+      <Widget>[
+        _buildAppBar("Gallery"),
+        SliverFillRemaining(
+          child: _buildGridView()
+        )
+      ],
+      <Widget>[
+        _buildAppBar("Albums"),
+        SliverToBoxAdapter()
+      ],
+      <Widget>[
+        _buildAppBar("Settings"),
+        SliverToBoxAdapter()
+      ],
+    ];
+    return CustomScrollView(
+      shrinkWrap: true,
+      controller: _parentController,
+      slivers: widgetMap[_currentIndex],
+    );
   }
 
-  Widget _buildGridView() {
-    return StreamBuilder<MediaItems$Query>(
-      stream: bloc.mediaItemsResult,
-      builder: (context, snapshot) {
-        if (snapshot.data == null)
-          return _appLoading();
+  Widget _buildAppBar(String title) {
+    return SliverAppBar(
+      title: new Text(title),
+      pinned: false,
+      snap: false,
+      floating: true,
+      leading: PlatformIconButton(
+        icon: Icon(PlatformIcons(context).person),
+      ),
+      actions: <Widget>[
+        PlatformIconButton(
+          icon: Icon(PlatformIcons(context).search),
+        ),
+        PlatformIconButton(
+          icon: Icon(PlatformIcons(context).add),
+        ),
+      ],
+    );
+  }
 
-        List<MediaItems$Query$MediaItemResponse$MediaItem> allItems = snapshot.data.mediaItems.data;
-
-        MediaQueryData queryData = MediaQuery.of(context);
-
-        final double screenWidthSize = queryData.size.width * queryData.devicePixelRatio;
-        final int crossAxisCount = (screenWidthSize / 500).ceil();
-        final int derivedContentWidth = (screenWidthSize / crossAxisCount).ceil();
-
-        return new StaggeredGridView.countBuilder(
-          crossAxisCount: crossAxisCount,
-          itemCount: allItems.length,
-          itemBuilder: (BuildContext context, int index) {
-            String fileName = allItems[index].fileName;
-            return _buildCard(fileName, derivedContentWidth);
-          },
-          staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
-          mainAxisSpacing: 4.0,
-          crossAxisSpacing: 4.0,
-        );
-      }
+  Widget _buildNavBar() {
+    return PlatformNavBar(
+      currentIndex: _currentIndex,
+      itemChanged: (index) => setState(() {
+        _currentIndex = index;
+      }),
+      items: [
+        BottomNavigationBarItem(
+          label: "Photos",
+          icon: Icon(isMaterial(context) ? Icons.insert_photo : CupertinoIcons.photo),
+        ),
+        BottomNavigationBarItem(
+          label: "Albums",
+          icon: Icon(isMaterial(context) ? Icons.collections : CupertinoIcons.photo_on_rectangle),
+        ),
+        BottomNavigationBarItem(
+          label: "Settings",
+          icon: Icon(PlatformIcons(context).settings),
+        ),
+      ],
     );
   }
 
@@ -119,17 +155,60 @@ class _HomeScreenState extends State<HomeScreen> {
     );
   }
 
-  Widget _buildCard(charImageUrl, derivedContentWidth) {
+  Widget _buildGridView() {
+    MediaQueryData queryData = MediaQuery.of(context);
+
+    final int itemMultiplier = 3;
+    final int crossAxisCount = (queryData.size.width * itemMultiplier / 500).ceil();
+    final int derivedContentWidth = 500;
+
+    return new StaggeredGridView.builder(
+      shrinkWrap: true,
+      itemCount: _totalLength,
+      controller: _gridViewController,
+      gridDelegate: SliverStaggeredGridDelegateWithFixedCrossAxisCount(
+        staggeredTileCount: _totalLength,
+        crossAxisCount: crossAxisCount,
+        mainAxisSpacing: 4.0,
+        crossAxisSpacing: 4.0,
+        staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
+      ),
+      itemBuilder: (BuildContext context, int index) {
+        return _buildCard(index, derivedContentWidth);
+      },
+    );
+  }
+
+  Widget _buildCard(index, derivedContentWidth) {
     return FutureBuilder<CachedNetworkImage>(
-      future: bloc.getImage(charImageUrl, derivedContentWidth),
+      future: bloc.getMedia(index, derivedContentWidth),
       builder: (context, snapshot) {
-        if (!snapshot.hasData) {
-            return PlatformCircularProgressIndicator();
-        }
+        if (!snapshot.hasData)
+          return SizedBox(width: 500, height: 500);
+
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+            if (_totalLength == bloc.totalMediaItems)
+              return;
+
+            setState(() {
+              _totalLength = bloc.totalMediaItems;
+            });
+        });
 
         return snapshot.data;
-        // Image newImage = snapshot.data;
-        // return newImage;
+
+        // WidgetsBinding.instance.addPostFrameCallback((_) {
+        //   if (_totalLength == bloc.cachedMediaItemList.length - 1)
+        //     return;
+
+        //   if (bloc.cachedMediaItemList.length == 0)
+        //     return;
+
+        //   setState(() {
+        //     _totalLength = bloc.cachedMediaItemList.length - 1;
+        //   });
+        // });
+
       }
     );
   }