slide_puzzle: use pkg:provider

web/slide_puzzle/lib/main.dart

@@ -25,7 +25,7 @@ class PuzzleApp extends StatelessWidget {
 class _PuzzleHome extends StatefulWidget {
   final int _rows, _columns;
 
-  const _PuzzleHome(this._rows, this._columns, {Key key}) : super(key: key);
+  const _PuzzleHome(this._rows, this._columns);
 
   @override
   PuzzleHomeState createState() =>

web/slide_puzzle/lib/src/app_state.dart

@@ -4,28 +4,25 @@
 
 import 'core/puzzle_animator.dart';
 import 'flutter.dart';
-import 'shared_theme.dart';
 
 abstract class AppState {
-  TabController get tabController;
-
   PuzzleProxy get puzzle;
 
   bool get autoPlay;
 
   void setAutoPlay(bool newValue);
 
-  AnimationNotifier get animationNotifier;
+  Listenable get animationNotifier;
-
-  Iterable<SharedTheme> get themeData;
-
-  SharedTheme get currentTheme;
-
-  set currentTheme(SharedTheme theme);
-}
 
-abstract class AnimationNotifier implements Listenable {
+  void clickOrShake(int tileValue) {
-  void animate();
+    setAutoPlay(false);
+    puzzle.clickOrShake(tileValue);
+  }
 
-  void dispose();
+  void Function(bool newValue) get setAutoPlayFunction {
+    if (puzzle.solved) {
+      return null;
+    }
+    return setAutoPlay;
+  }
 }

web/slide_puzzle/lib/src/puzzle_home_state.dart

@@ -4,17 +4,15 @@
 
 import 'dart:async';
 
+import 'package:provider/provider.dart';
+
 import 'app_state.dart';
 import 'core/puzzle_animator.dart';
 import 'flutter.dart';
 import 'shared_theme.dart';
-import 'theme_plaster.dart';
+import 'themes.dart';
-import 'theme_seattle.dart';
-import 'theme_simple.dart';
 
-class PuzzleHomeState extends State
+class PuzzleHomeState extends State with TickerProviderStateMixin, AppState {
-    with TickerProviderStateMixin
-    implements AppState {
   TabController _tabController;
   AnimationController _controller;
 
@@ -22,41 +20,21 @@ class PuzzleHomeState extends State
   final PuzzleAnimator puzzle;
 
   @override
-  final animationNotifier = _AnimationNotifier();
+  final _AnimationNotifier animationNotifier = _AnimationNotifier();
-
-  @override
-  TabController get tabController => _tabController;
 
   SharedTheme _currentTheme;
-
-  @override
-  SharedTheme get currentTheme => _currentTheme;
-
-  @override
-  set currentTheme(SharedTheme theme) {
-    setState(() {
-      _currentTheme = theme;
-    });
-  }
-
   Duration _tickerTimeSinceLastEvent = Duration.zero;
   Ticker _ticker;
   Duration _lastElapsed;
-  StreamSubscription sub;
+  StreamSubscription _puzzleEventSubscription;
 
   @override
   bool autoPlay = false;
 
   PuzzleHomeState(this.puzzle) {
-    sub = puzzle.onEvent.listen(_onPuzzleEvent);
+    _puzzleEventSubscription = puzzle.onEvent.listen(_onPuzzleEvent);
-
-    _themeDataCache = List.unmodifiable([
-      ThemeSimple(this),
-      ThemeSeattle(this),
-      ThemePlaster(this),
-    ]);
 
-    _currentTheme = themeData.first;
+    _currentTheme = themes.first;
   }
 
   @override
@@ -70,18 +48,15 @@ class PuzzleHomeState extends State
       duration: const Duration(milliseconds: 200),
     );
 
-    _tabController = TabController(vsync: this, length: _themeDataCache.length);
+    _tabController = TabController(vsync: this, length: themes.length);
 
     _tabController.addListener(() {
-      currentTheme = _themeDataCache[_tabController.index];
+      setState(() {
+        _currentTheme = themes[_tabController.index];
+      });
     });
   }
 
-  List<SharedTheme> _themeDataCache;
-
-  @override
-  Iterable<SharedTheme> get themeData => _themeDataCache;
-
   @override
   void setAutoPlay(bool newValue) {
     if (newValue != autoPlay) {
@@ -96,8 +71,13 @@ class PuzzleHomeState extends State
   }
 
   @override
-  Widget build(BuildContext context) =>
+  Widget build(BuildContext context) => MultiProvider(
-      LayoutBuilder(builder: _currentTheme.build);
+        providers: [
+          ListenableProvider.value(listenable: _tabController),
+          Provider<AppState>.value(value: this),
+        ],
+        child: LayoutBuilder(builder: _currentTheme.build),
+      );
 
   @override
   void dispose() {
@@ -105,7 +85,7 @@ class PuzzleHomeState extends State
     _tabController.dispose();
     _controller?.dispose();
     _ticker?.dispose();
-    sub.cancel();
+    _puzzleEventSubscription.cancel();
     super.dispose();
   }
 
@@ -165,10 +145,7 @@ class PuzzleHomeState extends State
   }
 }
 
-class _AnimationNotifier extends ChangeNotifier implements AnimationNotifier {
+class _AnimationNotifier extends ChangeNotifier {
-  _AnimationNotifier();
-
-  @override
   void animate() {
     notifyListeners();
   }

web/slide_puzzle/lib/src/shared_theme.dart

@@ -2,32 +2,31 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:provider/provider.dart';
+
 import 'app_state.dart';
 import 'core/puzzle_animator.dart';
 import 'flutter.dart';
 import 'puzzle_flow_delegate.dart';
+import 'themes.dart';
 import 'widgets/material_interior_alt.dart';
 
 abstract class SharedTheme {
-  SharedTheme(this._appState);
+  const SharedTheme();
-
-  final AppState _appState;
-
-  PuzzleProxy get puzzle => _appState.puzzle;
 
   String get name;
 
   Color get puzzleThemeBackground;
 
-  RoundedRectangleBorder get puzzleBorder;
+  RoundedRectangleBorder puzzleBorder(bool small);
 
   Color get puzzleBackgroundColor;
 
   Color get puzzleAccentColor;
 
-  EdgeInsetsGeometry get tilePadding => const EdgeInsets.all(6);
+  EdgeInsetsGeometry tilePadding(PuzzleProxy puzzle) => const EdgeInsets.all(6);
 
-  Widget tileButton(int i);
+  Widget tileButton(int i, AppState appState, bool small);
 
   Ink createInk(
     Widget child, {
@@ -43,6 +42,8 @@ abstract class SharedTheme {
       );
 
   Widget createButton(
+    AppState appState,
+    bool small,
     int tileValue,
     Widget content, {
     Color color,
@@ -50,178 +51,164 @@ abstract class SharedTheme {
   }) =>
       AnimatedContainer(
         duration: _puzzleAnimationDuration,
-        padding: tilePadding,
+        padding: tilePadding(appState.puzzle),
         child: RaisedButton(
           elevation: 4,
           clipBehavior: Clip.hardEdge,
           animationDuration: _puzzleAnimationDuration,
-          onPressed: () => _tilePress(tileValue),
+          onPressed: () => appState.clickOrShake(tileValue),
-          shape: shape ?? puzzleBorder,
+          shape: shape ?? puzzleBorder(small),
           padding: const EdgeInsets.symmetric(),
           child: content,
           color: color,
         ),
       );
 
-  double _previousConstraintWidth;
+  Widget _updateConstraints(
-  bool _small;
+      BoxConstraints constraints, Widget Function(bool small) builder) {
-
-  bool get small => _small;
-
-  void _updateConstraints(BoxConstraints constraints) {
     const _smallWidth = 580;
 
     final constraintWidth =
         constraints.hasBoundedWidth ? constraints.maxWidth : 1000.0;
 
-    if (constraintWidth == _previousConstraintWidth) {
+    return builder(constraintWidth < _smallWidth);
-      assert(_small != null);
-      return;
-    }
-
-    _previousConstraintWidth = constraintWidth;
-
-    if (_previousConstraintWidth < _smallWidth) {
-      _small = true;
-    } else {
-      _small = false;
-    }
   }
 
-  Widget build(BuildContext context, BoxConstraints constraints) {
+  Widget build(BuildContext context, BoxConstraints constraints) =>
-    _updateConstraints(constraints);
+      _updateConstraints(
-    return Material(
+          constraints,
-        child: Stack(
+          (small) => Material(
-      children: <Widget>[
+                  child: Stack(
-        const SizedBox.expand(
+                children: <Widget>[
-          child: FittedBox(
+                  const SizedBox.expand(
-            fit: BoxFit.cover,
+                    child: FittedBox(
-            child: Image(
+                      fit: BoxFit.cover,
-              image: AssetImage('seattle.jpg'),
+                      child: Image(
-            ),
+                        image: AssetImage('seattle.jpg'),
-          ),
-        ),
-        AnimatedContainer(
-          duration: _puzzleAnimationDuration,
-          color: puzzleThemeBackground,
-          child: Center(
-            child: _styledWrapper(
-              SizedBox(
-                width: 580,
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  crossAxisAlignment: CrossAxisAlignment.center,
-                  children: <Widget>[
-                    Container(
-                      decoration: const BoxDecoration(
-                        border: Border(
-                          bottom: BorderSide(
-                            color: Colors.black26,
-                            width: 1,
-                          ),
-                        ),
-                      ),
-                      margin: const EdgeInsets.symmetric(horizontal: 20),
-                      child: TabBar(
-                        controller: _appState.tabController,
-                        labelPadding: const EdgeInsets.fromLTRB(0, 20, 0, 12),
-                        labelColor: puzzleAccentColor,
-                        indicatorColor: puzzleAccentColor,
-                        indicatorWeight: 1.5,
-                        unselectedLabelColor: Colors.black.withOpacity(0.6),
-                        tabs: _appState.themeData
-                            .map((st) => Text(
-                                  st.name.toUpperCase(),
-                                  style: const TextStyle(
-                                    letterSpacing: 0.5,
-                                  ),
-                                ))
-                            .toList(),
                       ),
                     ),
-                    Container(
+                  ),
-                      constraints: const BoxConstraints.tightForFinite(),
+                  AnimatedContainer(
-                      padding: const EdgeInsets.all(10),
+                    duration: _puzzleAnimationDuration,
-                      child: Flow(
+                    color: puzzleThemeBackground,
-                        delegate: PuzzleFlowDelegate(
+                    child: Center(
-                          small ? const Size(90, 90) : const Size(140, 140),
+                      child: _styledWrapper(
-                          puzzle,
+                        small,
-                          _appState.animationNotifier,
+                        SizedBox(
-                        ),
+                          width: 580,
-                        children: List<Widget>.generate(
+                          child: Consumer<AppState>(
-                          puzzle.length,
+                            builder: (context, appState, _) => Column(
-                          _tileButton,
+                                  mainAxisSize: MainAxisSize.min,
+                                  crossAxisAlignment: CrossAxisAlignment.center,
+                                  children: <Widget>[
+                                    Container(
+                                      decoration: const BoxDecoration(
+                                        border: Border(
+                                          bottom: BorderSide(
+                                            color: Colors.black26,
+                                            width: 1,
+                                          ),
+                                        ),
+                                      ),
+                                      margin: const EdgeInsets.symmetric(
+                                          horizontal: 20),
+                                      child: TabBar(
+                                        controller:
+                                            Provider.of<TabController>(context),
+                                        labelPadding: const EdgeInsets.fromLTRB(
+                                            0, 20, 0, 12),
+                                        labelColor: puzzleAccentColor,
+                                        indicatorColor: puzzleAccentColor,
+                                        indicatorWeight: 1.5,
+                                        unselectedLabelColor:
+                                            Colors.black.withOpacity(0.6),
+                                        tabs: themes
+                                            .map((st) => Text(
+                                                  st.name.toUpperCase(),
+                                                  style: const TextStyle(
+                                                    letterSpacing: 0.5,
+                                                  ),
+                                                ))
+                                            .toList(),
+                                      ),
+                                    ),
+                                    Container(
+                                      constraints:
+                                          const BoxConstraints.tightForFinite(),
+                                      padding: const EdgeInsets.all(10),
+                                      child: Flow(
+                                        delegate: PuzzleFlowDelegate(
+                                          small
+                                              ? const Size(90, 90)
+                                              : const Size(140, 140),
+                                          appState.puzzle,
+                                          appState.animationNotifier,
+                                        ),
+                                        children: List<Widget>.generate(
+                                          appState.puzzle.length,
+                                          (i) =>
+                                              _tileButton(i, appState, small),
+                                        ),
+                                      ),
+                                    ),
+                                    Container(
+                                      decoration: const BoxDecoration(
+                                        border: Border(
+                                          top: BorderSide(
+                                              color: Colors.black26, width: 1),
+                                        ),
+                                      ),
+                                      padding: const EdgeInsets.only(
+                                        left: 10,
+                                        bottom: 6,
+                                        top: 2,
+                                        right: 10,
+                                      ),
+                                      child: Row(
+                                          children: _bottomControls(appState)),
+                                    )
+                                  ],
+                                ),
+                          ),
                         ),
                       ),
                     ),
-                    Container(
+                  )
-                      decoration: const BoxDecoration(
+                ],
-                        border: Border(
+              )));
-                          top: BorderSide(color: Colors.black26, width: 1),
-                        ),
-                      ),
-                      padding: const EdgeInsets.only(
-                        left: 10,
-                        bottom: 6,
-                        top: 2,
-                        right: 10,
-                      ),
-                      child: Row(children: _bottomControls(context)),
-                    )
-                  ],
-                ),
-              ),
-            ),
-          ),
-        )
-      ],
-    ));
-  }
 
   Duration get _puzzleAnimationDuration => kThemeAnimationDuration * 3;
 
   // Thought about using AnimatedContainer here, but it causes some weird
   // resizing behavior
-  Widget _styledWrapper(Widget child) => MaterialInterior(
+  Widget _styledWrapper(bool small, Widget child) => MaterialInterior(
         duration: _puzzleAnimationDuration,
-        shape: puzzleBorder,
+        shape: puzzleBorder(small),
         color: puzzleBackgroundColor,
         child: child,
       );
 
-  void Function(bool newValue) get _setAutoPlay {
-    if (puzzle.solved) {
-      return null;
-    }
-    return _appState.setAutoPlay;
-  }
-
-  void _tilePress(int tileValue) {
-    _appState.setAutoPlay(false);
-    _appState.puzzle.clickOrShake(tileValue);
-  }
-
   TextStyle get _infoStyle => TextStyle(
         color: puzzleAccentColor,
         fontWeight: FontWeight.bold,
       );
 
-  List<Widget> _bottomControls(BuildContext context) => <Widget>[
+  List<Widget> _bottomControls(AppState appState) => <Widget>[
         IconButton(
-          onPressed: puzzle.reset,
+          onPressed: appState.puzzle.reset,
           icon: Icon(Icons.refresh, color: puzzleAccentColor),
           //Icons.refresh,
         ),
         Checkbox(
-          value: _appState.autoPlay,
+          value: appState.autoPlay,
-          onChanged: _setAutoPlay,
+          onChanged: appState.setAutoPlayFunction,
           activeColor: puzzleAccentColor,
         ),
         Expanded(
           child: Container(),
         ),
         Text(
-          puzzle.clickCount.toString(),
+          appState.puzzle.clickCount.toString(),
           textAlign: TextAlign.right,
           style: _infoStyle,
         ),
@@ -229,7 +216,7 @@ abstract class SharedTheme {
         SizedBox(
           width: 28,
           child: Text(
-            puzzle.incorrectTiles.toString(),
+            appState.puzzle.incorrectTiles.toString(),
             textAlign: TextAlign.right,
             style: _infoStyle,
           ),
@@ -237,11 +224,11 @@ abstract class SharedTheme {
         const Text(' Tiles left  ')
       ];
 
-  Widget _tileButton(int i) {
+  Widget _tileButton(int i, AppState appState, bool small) {
-    if (i == puzzle.tileCount && !puzzle.solved) {
+    if (i == appState.puzzle.tileCount && !appState.puzzle.solved) {
       return const Center();
     }
 
-    return tileButton(i);
+    return tileButton(i, appState, small);
   }
 }

web/slide_puzzle/lib/src/theme_plaster.dart

@@ -14,7 +14,7 @@ class ThemePlaster extends SharedTheme {
   @override
   String get name => 'Plaster';
 
-  ThemePlaster(AppState baseTheme) : super(baseTheme);
+  const ThemePlaster();
 
   @override
   Color get puzzleThemeBackground => _chocolate;
@@ -26,7 +26,7 @@ class ThemePlaster extends SharedTheme {
   Color get puzzleAccentColor => _orangeIsh;
 
   @override
-  RoundedRectangleBorder get puzzleBorder => RoundedRectangleBorder(
+  RoundedRectangleBorder puzzleBorder(bool small) => RoundedRectangleBorder(
         side: const BorderSide(
           color: Color.fromARGB(255, 103, 103, 105),
           width: 8,
@@ -37,14 +37,14 @@ class ThemePlaster extends SharedTheme {
       );
 
   @override
-  Widget tileButton(int i) {
+  Widget tileButton(int i, AppState appState, bool small) {
-    final correctColumn = i % puzzle.width;
+    final correctColumn = i % appState.puzzle.width;
-    final correctRow = i ~/ puzzle.width;
+    final correctRow = i ~/ appState.puzzle.width;
 
     final primary = (correctColumn + correctRow).isEven;
 
-    if (i == puzzle.tileCount) {
+    if (i == appState.puzzle.tileCount) {
-      assert(puzzle.solved);
+      assert(appState.puzzle.solved);
       return Center(
         child: Icon(
           Icons.thumb_up,
@@ -64,6 +64,8 @@ class ThemePlaster extends SharedTheme {
     );
 
     return createButton(
+      appState,
+      small,
       i,
       content,
       color: primary ? _orangeIsh : _yellowIsh,

web/slide_puzzle/lib/src/theme_seattle.dart

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'app_state.dart';
+import 'core/puzzle_animator.dart';
 import 'flutter.dart';
 import 'shared_theme.dart';
 import 'widgets/decoration_image_plus.dart';
@@ -11,7 +12,7 @@ class ThemeSeattle extends SharedTheme {
   @override
   String get name => 'Seattle';
 
-  ThemeSeattle(AppState proxy) : super(proxy);
+  const ThemeSeattle();
 
   @override
   Color get puzzleThemeBackground => const Color.fromARGB(153, 90, 135, 170);
@@ -23,18 +24,20 @@ class ThemeSeattle extends SharedTheme {
   Color get puzzleAccentColor => const Color(0xff000579f);
 
   @override
-  RoundedRectangleBorder get puzzleBorder => const RoundedRectangleBorder(
+  RoundedRectangleBorder puzzleBorder(bool small) =>
+      const RoundedRectangleBorder(
         borderRadius: BorderRadius.all(
           Radius.circular(1),
         ),
       );
 
   @override
-  EdgeInsetsGeometry get tilePadding =>
+  EdgeInsetsGeometry tilePadding(PuzzleProxy puzzle) =>
       puzzle.solved ? const EdgeInsets.all(1) : const EdgeInsets.all(4);
 
   @override
-  Widget tileButton(int i) {
+  Widget tileButton(int i, AppState appState, bool small) {
+    final puzzle = appState.puzzle;
     if (i == puzzle.tileCount && !puzzle.solved) {
       assert(puzzle.solved);
     }
@@ -69,6 +72,6 @@ class ThemeSeattle extends SharedTheme {
       padding: EdgeInsets.all(small ? 20 : 32),
     );
 
-    return createButton(i, content);
+    return createButton(appState, small, i, content);
   }
 }

web/slide_puzzle/lib/src/theme_simple.dart

@@ -12,7 +12,7 @@ class ThemeSimple extends SharedTheme {
   @override
   String get name => 'Simple';
 
-  ThemeSimple(AppState proxy) : super(proxy);
+  const ThemeSimple();
 
   @override
   Color get puzzleThemeBackground => Colors.white;
@@ -24,7 +24,8 @@ class ThemeSimple extends SharedTheme {
   Color get puzzleAccentColor => _accentBlue;
 
   @override
-  RoundedRectangleBorder get puzzleBorder => const RoundedRectangleBorder(
+  RoundedRectangleBorder puzzleBorder(bool small) =>
+      const RoundedRectangleBorder(
         side: BorderSide(color: Colors.black26, width: 1),
         borderRadius: BorderRadius.all(
           Radius.circular(4),
@@ -32,9 +33,9 @@ class ThemeSimple extends SharedTheme {
       );
 
   @override
-  Widget tileButton(int i) {
+  Widget tileButton(int i, AppState appState, bool small) {
-    if (i == puzzle.tileCount) {
+    if (i == appState.puzzle.tileCount) {
-      assert(puzzle.solved);
+      assert(appState.puzzle.solved);
       return const Center(
         child: Icon(
           Icons.thumb_up,
@@ -44,7 +45,7 @@ class ThemeSimple extends SharedTheme {
       );
     }
 
-    final correctPosition = puzzle.isCorrectPosition(i);
+    final correctPosition = appState.puzzle.isCorrectPosition(i);
 
     final content = createInk(
       Center(
@@ -60,6 +61,8 @@ class ThemeSimple extends SharedTheme {
     );
 
     return createButton(
+      appState,
+      small,
       i,
       content,
       color: const Color.fromARGB(255, 13, 87, 155),

web/slide_puzzle/lib/src/themes.dart

@@ -0,0 +1,9 @@
+import 'theme_plaster.dart';
+import 'theme_seattle.dart';
+import 'theme_simple.dart';
+
+const themes = [
+  ThemeSimple(),
+  ThemeSeattle(),
+  ThemePlaster(),
+];

web/slide_puzzle/pubspec.lock

@@ -334,6 +334,15 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.13.11"
+  provider:
+    dependency: "direct main"
+    description:
+      path: "."
+      ref: flutter_web
+      resolved-ref: "5cf4521d4d635d7d7ca8ddbd6e28048a7f319ee0"
+      url: "https://github.com/kevmoo/provider"
+    source: git
+    version: "2.1.0"
   pub_semver:
     dependency: transitive
     description:

web/slide_puzzle/pubspec.yaml

@@ -6,6 +6,7 @@ environment:
 dependencies:
   flutter_web: any
   flutter_web_ui: any
+  provider: any
 
 dev_dependencies:
   pedantic: ^1.3.0
@@ -24,3 +25,7 @@ dependency_overrides:
     git:
       url: https://github.com/flutter/flutter_web
       path: packages/flutter_web_ui
+  provider:
+    git:
+      url: https://github.com/kevmoo/provider
+      ref: flutter_web