msb-public
/
samples
mirror of https://github.com/flutter/samples.git
1
0
Code Issues Projects Releases Wiki Activity

web/slide_puzzle: more provider cleanup

Browse Source
pull/88/head
Kevin Moore 5 years ago
parent d6d51d8b1a
commit f87c2bb577
5 changed files with 228 additions and 157 deletions
Show Stats Download Patch File Download Diff File

161
web/slide_puzzle/lib/src/puzzle_home_state.dart
Unescape View File

@ -9,20 +9,17 @@ import 'package:provider/provider.dart';
import 'app_state.dart'; import 'app_state.dart';
import 'core/puzzle_animator.dart'; import 'core/puzzle_animator.dart';
import 'flutter.dart'; import 'flutter.dart';
import 'puzzle_flow_delegate.dart';
import 'shared_theme.dart'; import 'shared_theme.dart';
import 'themes.dart'; import 'themes.dart';
class PuzzleHomeState extends State with TickerProviderStateMixin, AppState { class PuzzleHomeState extends State with TickerProviderStateMixin, AppState {
TabController _tabController;
AnimationController _controller;
@override @override
final PuzzleAnimator puzzle; final PuzzleAnimator puzzle;
@override @override
final _AnimationNotifier animationNotifier = _AnimationNotifier(); final _AnimationNotifier animationNotifier = _AnimationNotifier();
SharedTheme _currentTheme;
Duration _tickerTimeSinceLastEvent = Duration.zero; Duration _tickerTimeSinceLastEvent = Duration.zero;
Ticker _ticker; Ticker _ticker;
Duration _lastElapsed; Duration _lastElapsed;
@ -33,8 +30,6 @@ class PuzzleHomeState extends State with TickerProviderStateMixin, AppState {
PuzzleHomeState(this.puzzle) { PuzzleHomeState(this.puzzle) {
_puzzleEventSubscription = puzzle.onEvent.listen(_onPuzzleEvent); _puzzleEventSubscription = puzzle.onEvent.listen(_onPuzzleEvent);
_currentTheme = themes.first;
} }
@override @override
@ -42,19 +37,6 @@ class PuzzleHomeState extends State with TickerProviderStateMixin, AppState {
super.initState(); super.initState();
_ticker ??= createTicker(_onTick); _ticker ??= createTicker(_onTick);
_ensureTicking(); _ensureTicking();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 200),
);
_tabController = TabController(vsync: this, length: themes.length);
_tabController.addListener(() {
setState(() {
_currentTheme = themes[_tabController.index];
});
});
} }
@override @override
@ -70,20 +52,41 @@ class PuzzleHomeState extends State with TickerProviderStateMixin, AppState {
} }
} }
bool _badHack;
@override @override
Widget build(BuildContext context) => MultiProvider( Widget build(BuildContext context) => MultiProvider(
providers: [ providers: [
ListenableProvider.value(listenable: _tabController), Provider<AppState>.value(
Provider<AppState>.value(value: this), value: this,
updateShouldNotify: (p, c) {
if (c.autoPlay != _badHack) {
_badHack = c.autoPlay;
return true;
}
return false;
}),
], ],
child: LayoutBuilder(builder: _currentTheme.build), child: Material(
child: Stack(
children: <Widget>[
const SizedBox.expand(
child: FittedBox(
fit: BoxFit.cover,
child: Image(
image: AssetImage('seattle.jpg'),
),
),
),
const LayoutBuilder(builder: _doBuild),
],
),
),
); );
@override @override
void dispose() { void dispose() {
animationNotifier.dispose(); animationNotifier.dispose();
_tabController.dispose();
_controller?.dispose();
_ticker?.dispose(); _ticker?.dispose();
_puzzleEventSubscription.cancel(); _puzzleEventSubscription.cancel();
super.dispose(); super.dispose();
@ -92,12 +95,6 @@ class PuzzleHomeState extends State with TickerProviderStateMixin, AppState {
void _onPuzzleEvent(PuzzleEvent e) { void _onPuzzleEvent(PuzzleEvent e) {
_tickerTimeSinceLastEvent = Duration.zero; _tickerTimeSinceLastEvent = Duration.zero;
_ensureTicking(); _ensureTicking();
if (e == PuzzleEvent.noop) {
assert(e == PuzzleEvent.noop);
_controller
..reset()
..forward();
}
setState(() { setState(() {
// noop // noop
}); });
@ -152,3 +149,107 @@ class _AnimationNotifier extends ChangeNotifier {
} }
const _maxFrameDuration = Duration(milliseconds: 34); const _maxFrameDuration = Duration(milliseconds: 34);
Widget _updateConstraints(
BoxConstraints constraints, Widget Function(bool small) builder) {
const _smallWidth = 580;
final constraintWidth =
constraints.hasBoundedWidth ? constraints.maxWidth : 1000.0;
return builder(constraintWidth < _smallWidth);
}
Widget _doBuild(BuildContext _, BoxConstraints constraints) =>
_updateConstraints(constraints, _doBuildCore);
Widget _doBuildCore(bool small) => PuzzleThemeTabController(
child: Consumer<SharedTheme>(
builder: (_, theme, __) => AnimatedContainer(
duration: puzzleAnimationDuration,
color: theme.puzzleThemeBackground,
child: Center(
child: theme.styledWrapper(
small,
SizedBox(
width: 580,
child: Consumer<AppState>(
builder: (context, appState, _) => 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:
PuzzleThemeTabController.of(context),
labelPadding:
const EdgeInsets.fromLTRB(0, 20, 0, 12),
labelColor: theme.puzzleAccentColor,
indicatorColor: theme.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) => theme.tileButtonCore(
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: theme.bottomControls(appState)),
)
],
),
),
),
),
),
),
),
);

133
web/slide_puzzle/lib/src/shared_theme.dart
Unescape View File

@ -2,15 +2,13 @@
// Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file. // found in the LICENSE file.
import 'package:provider/provider.dart';
import 'app_state.dart'; import 'app_state.dart';
import 'core/puzzle_animator.dart'; import 'core/puzzle_animator.dart';
import 'flutter.dart'; import 'flutter.dart';
import 'puzzle_flow_delegate.dart';
import 'themes.dart';
import 'widgets/material_interior_alt.dart'; import 'widgets/material_interior_alt.dart';
final puzzleAnimationDuration = kThemeAnimationDuration * 3;
abstract class SharedTheme { abstract class SharedTheme {
const SharedTheme(); const SharedTheme();
@ -50,12 +48,12 @@ abstract class SharedTheme {
RoundedRectangleBorder shape, RoundedRectangleBorder shape,
}) => }) =>
AnimatedContainer( AnimatedContainer(
duration: _puzzleAnimationDuration, duration: puzzleAnimationDuration,
padding: tilePadding(appState.puzzle), padding: tilePadding(appState.puzzle),
child: RaisedButton( child: RaisedButton(
elevation: 4, elevation: 4,
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
animationDuration: _puzzleAnimationDuration, animationDuration: puzzleAnimationDuration,
onPressed: () => appState.clickOrShake(tileValue), onPressed: () => appState.clickOrShake(tileValue),
shape: shape ?? puzzleBorder(small), shape: shape ?? puzzleBorder(small),
padding: const EdgeInsets.symmetric(), padding: const EdgeInsets.symmetric(),
@ -64,125 +62,10 @@ abstract class SharedTheme {
), ),
); );
Widget _updateConstraints(
BoxConstraints constraints, Widget Function(bool small) builder) {
const _smallWidth = 580;
final constraintWidth =
constraints.hasBoundedWidth ? constraints.maxWidth : 1000.0;
return builder(constraintWidth < _smallWidth);
}
Widget build(BuildContext context, BoxConstraints constraints) =>
_updateConstraints(
constraints,
(small) => Material(
child: Stack(
children: <Widget>[
const SizedBox.expand(
child: FittedBox(
fit: BoxFit.cover,
child: Image(
image: AssetImage('seattle.jpg'),
),
),
),
AnimatedContainer(
duration: _puzzleAnimationDuration,
color: puzzleThemeBackground,
child: Center(
child: _styledWrapper(
small,
SizedBox(
width: 580,
child: Consumer<AppState>(
builder: (context, appState, _) => 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:
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)),
)
],
),
),
),
),
),
)
],
)));
Duration get _puzzleAnimationDuration => kThemeAnimationDuration * 3;
// Thought about using AnimatedContainer here, but it causes some weird // Thought about using AnimatedContainer here, but it causes some weird
// resizing behavior // resizing behavior
Widget _styledWrapper(bool small, Widget child) => MaterialInterior( Widget styledWrapper(bool small, Widget child) => MaterialInterior(
duration: _puzzleAnimationDuration, duration: puzzleAnimationDuration,
shape: puzzleBorder(small), shape: puzzleBorder(small),
color: puzzleBackgroundColor, color: puzzleBackgroundColor,
child: child, child: child,
@ -193,7 +76,7 @@ abstract class SharedTheme {
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
); );
List<Widget> _bottomControls(AppState appState) => <Widget>[ List<Widget> bottomControls(AppState appState) => <Widget>[
IconButton( IconButton(
onPressed: appState.puzzle.reset, onPressed: appState.puzzle.reset,
icon: Icon(Icons.refresh, color: puzzleAccentColor), icon: Icon(Icons.refresh, color: puzzleAccentColor),
@ -224,7 +107,7 @@ abstract class SharedTheme {
const Text(' Tiles left ') const Text(' Tiles left ')
]; ];
Widget _tileButton(int i, AppState appState, bool small) { Widget tileButtonCore(int i, AppState appState, bool small) {
if (i == appState.puzzle.tileCount && !appState.puzzle.solved) { if (i == appState.puzzle.tileCount && !appState.puzzle.solved) {
return const Center(); return const Center();
} }

87
web/slide_puzzle/lib/src/themes.dart
Unescape View File

@ -1,3 +1,7 @@
import 'package:flutter_web/material.dart';
import 'package:provider/provider.dart';
import 'shared_theme.dart';
import 'theme_plaster.dart'; import 'theme_plaster.dart';
import 'theme_seattle.dart'; import 'theme_seattle.dart';
import 'theme_simple.dart'; import 'theme_simple.dart';
@ -7,3 +11,86 @@ const themes = [
ThemeSeattle(), ThemeSeattle(),
ThemePlaster(), ThemePlaster(),
]; ];
class PuzzleThemeTabController extends StatefulWidget {
/// Creates a default tab controller for the given [child] widget.
const PuzzleThemeTabController({
Key key,
@required this.child,
}) : super(key: key);
/// The widget below this widget in the tree.
///
/// Typically a [Scaffold] whose [AppBar] includes a [TabBar].
///
/// {@macro flutter.widgets.child}
final Widget child;
/// The closest instance of this class that encloses the given context.
///
/// Typical usage:
///
/// ```dart
/// TabController controller = DefaultTabBarController.of(context);
/// ```
static TabController of(BuildContext context) {
final scope =
context.inheritFromWidgetOfExactType(_PuzzleThemeTabControllerScope)
as _PuzzleThemeTabControllerScope;
return scope?.controller;
}
@override
_PuzzleThemeTabControllerState createState() =>
_PuzzleThemeTabControllerState();
}
class _PuzzleThemeTabControllerState extends State<PuzzleThemeTabController>
with SingleTickerProviderStateMixin {
final _notifier = ValueNotifier<SharedTheme>(themes.first);
TabController _controller;
@override
void initState() {
super.initState();
_controller = TabController(
vsync: this,
length: themes.length,
initialIndex: 0,
);
_controller.addListener(() {
_notifier.value = themes[_controller.index];
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) => _PuzzleThemeTabControllerScope(
controller: _controller,
enabled: TickerMode.of(context),
child: ValueListenableProvider.value(
valueListenable: _notifier,
child: widget.child,
),
);
}
class _PuzzleThemeTabControllerScope extends InheritedWidget {
const _PuzzleThemeTabControllerScope(
{Key key, this.controller, this.enabled, Widget child})
: super(key: key, child: child);
final TabController controller;
final bool enabled;
@override
bool updateShouldNotify(_PuzzleThemeTabControllerScope old) =>
enabled != old.enabled || controller != old.controller;
}

2
web/slide_puzzle/pubspec.yaml
Unescape View File

@ -1,4 +1,4 @@
name: flutter_web.examples.slide_puzzle name: slide_puzzle
environment: environment:
sdk: ">=2.2.0 <3.0.0" sdk: ">=2.2.0 <3.0.0"

2
web/slide_puzzle/web/main.dart
Unescape View File

@ -3,7 +3,7 @@
// found in the LICENSE file. // found in the LICENSE file.
import 'package:flutter_web_ui/ui.dart' as ui; import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:flutter_web.examples.slide_puzzle/main.dart' as app; import 'package:slide_puzzle/main.dart' as app;
void main() async { void main() async {
await ui.webOnlyInitializePlatform(); await ui.webOnlyInitializePlatform();

Write Preview
Loading…
Cancel
Save