Fixing unchangeable Shrine categories. (#9)

shrine/lib/app.dart

@@ -19,7 +19,6 @@ import 'category_menu_page.dart';
 import 'colors.dart';
 import 'home.dart';
 import 'login.dart';
-import 'model/product.dart';
 import 'supplemental/cut_corners_border.dart';
 
 class ShrineApp extends StatefulWidget {
@@ -28,19 +27,13 @@ class ShrineApp extends StatefulWidget {
 }
 
 class _ShrineAppState extends State<ShrineApp> {
-  Category _currentCategory = Category.all;
-
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Shrine',
       home: Backdrop(
-        currentCategory: _currentCategory,
-        frontLayer: HomePage(category: _currentCategory),
-        backLayer: CategoryMenuPage(
-          currentCategory: _currentCategory,
-          onCategoryTap: _onCategoryTap,
-        ),
+        frontLayer: HomePage(),
+        backLayer: CategoryMenuPage(),
         frontTitle: Text('SHRINE'),
         backTitle: Text('MENU'),
       ),
@@ -49,13 +42,6 @@ class _ShrineAppState extends State<ShrineApp> {
       theme: _kShrineTheme,
     );
   }
-
-  /// Function to call when a [Category] is tapped.
-  void _onCategoryTap(Category category) {
-    setState(() {
-      _currentCategory = category;
-    });
-  }
 }
 
 Route<dynamic> _getRoute(RouteSettings settings) {

shrine/lib/backdrop.dart

@@ -16,7 +16,6 @@ import 'package:flutter/material.dart';
 import 'package:meta/meta.dart';
 
 import 'login.dart';
-import 'model/product.dart';
 import 'shopping_cart.dart';
 
 const double _kFlingVelocity = 2.0;
@@ -147,20 +146,17 @@ class _BackdropTitle extends AnimatedWidget {
 /// can make a selection. The user can also configure the titles for when the
 /// front or back layer is showing.
 class Backdrop extends StatefulWidget {
-  final Category currentCategory;
   final Widget frontLayer;
   final Widget backLayer;
   final Widget frontTitle;
   final Widget backTitle;
 
   const Backdrop({
-    @required this.currentCategory,
     @required this.frontLayer,
     @required this.backLayer,
     @required this.frontTitle,
     @required this.backTitle,
-  })  : assert(currentCategory != null),
-        assert(frontLayer != null),
+  })  : assert(frontLayer != null),
         assert(backLayer != null),
         assert(frontTitle != null),
         assert(backTitle != null);
@@ -184,17 +180,6 @@ class _BackdropState extends State<Backdrop>
     );
   }
 
-  @override
-  void didUpdateWidget(Backdrop old) {
-    super.didUpdateWidget(old);
-
-    if (widget.currentCategory != old.currentCategory) {
-      _toggleBackdropLayerVisibility();
-    } else if (!_frontLayerVisible) {
-      _controller.fling(velocity: _kFlingVelocity);
-    }
-  }
-
   @override
   void dispose() {
     _controller.dispose();

shrine/lib/category_menu_page.dart

@@ -13,55 +13,53 @@
 // limitations under the License.
 
 import 'package:flutter/material.dart';
-import 'package:meta/meta.dart';
+import 'package:scoped_model/scoped_model.dart';
 
 import 'colors.dart';
+import 'model/app_state_model.dart';
 import 'model/product.dart';
 
 class CategoryMenuPage extends StatelessWidget {
-  final Category currentCategory;
-  final ValueChanged<Category> onCategoryTap;
   final List<Category> _categories = Category.values;
 
   const CategoryMenuPage({
     Key key,
-    @required this.currentCategory,
-    @required this.onCategoryTap,
-  })  : assert(currentCategory != null),
-        assert(onCategoryTap != null);
+  });
 
   Widget _buildCategory(Category category, BuildContext context) {
     final categoryString =
         category.toString().replaceAll('Category.', '').toUpperCase();
     final ThemeData theme = Theme.of(context);
-    return GestureDetector(
-      onTap: () => onCategoryTap(category),
-      child: category == currentCategory
-          ? Column(
-              children: <Widget>[
-                SizedBox(height: 16.0),
-                Text(
-                  categoryString,
-                  style: theme.textTheme.body2,
-                  textAlign: TextAlign.center,
-                ),
-                SizedBox(height: 14.0),
-                Container(
-                  width: 70.0,
-                  height: 2.0,
-                  color: kShrinePink400,
-                ),
-              ],
-            )
-          : Padding(
-              padding: EdgeInsets.symmetric(vertical: 16.0),
-              child: Text(
-                categoryString,
-                style: theme.textTheme.body2
-                    .copyWith(color: kShrineBrown900.withAlpha(153)),
-                textAlign: TextAlign.center,
-              ),
-            ),
+    return ScopedModelDescendant<AppStateModel>(
+      builder: (context, child, model) => GestureDetector(
+            onTap: () => model.setCategory(category),
+            child: model.selectedCategory == category
+                ? Column(
+                    children: <Widget>[
+                      SizedBox(height: 16.0),
+                      Text(
+                        categoryString,
+                        style: theme.textTheme.body2,
+                        textAlign: TextAlign.center,
+                      ),
+                      SizedBox(height: 14.0),
+                      Container(
+                        width: 70.0,
+                        height: 2.0,
+                        color: kShrinePink400,
+                      ),
+                    ],
+                  )
+                : Padding(
+                    padding: EdgeInsets.symmetric(vertical: 16.0),
+                    child: Text(
+                      categoryString,
+                      style: theme.textTheme.body2
+                          .copyWith(color: kShrineBrown900.withAlpha(153)),
+                      textAlign: TextAlign.center,
+                    ),
+                  ),
+          ),
     );
   }
 

shrine/lib/main.dart

@@ -13,12 +13,16 @@
 // limitations under the License.
 
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:scoped_model/scoped_model.dart';
 
 import 'app.dart';
 import 'model/app_state_model.dart';
 
 void main() {
+  SystemChrome.setPreferredOrientations(
+      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
+
   AppStateModel model = AppStateModel();
   model.loadProducts();
 

shrine/lib/model/app_state_model.dart

@@ -60,7 +60,9 @@ class AppStateModel extends Model {
     if (_selectedCategory == Category.all) {
       return List.from(_availableProducts);
     } else {
-      return _availableProducts.where((p) => p.category == _selectedCategory);
+      return _availableProducts
+          .where((p) => p.category == _selectedCategory)
+          .toList();
     }
   }
 
@@ -104,4 +106,9 @@ class AppStateModel extends Model {
     _availableProducts = ProductsRepository.loadProducts();
     notifyListeners();
   }
+
+  void setCategory(Category newCategory) {
+    _selectedCategory = newCategory;
+    notifyListeners();
+  }
 }