1
0
mirror of https://github.com/flutter/samples.git synced 2025-11-11 15:28:44 +00:00

web/slide_puzzle: more provider cleanup

This commit is contained in:
Kevin Moore
2019-05-24 12:08:02 -07:00
parent d6d51d8b1a
commit f87c2bb577
5 changed files with 228 additions and 157 deletions

View File

@@ -9,20 +9,17 @@ import 'package:provider/provider.dart';
import 'app_state.dart';
import 'core/puzzle_animator.dart';
import 'flutter.dart';
import 'puzzle_flow_delegate.dart';
import 'shared_theme.dart';
import 'themes.dart';
class PuzzleHomeState extends State with TickerProviderStateMixin, AppState {
TabController _tabController;
AnimationController _controller;
@override
final PuzzleAnimator puzzle;
@override
final _AnimationNotifier animationNotifier = _AnimationNotifier();
SharedTheme _currentTheme;
Duration _tickerTimeSinceLastEvent = Duration.zero;
Ticker _ticker;
Duration _lastElapsed;
@@ -33,8 +30,6 @@ class PuzzleHomeState extends State with TickerProviderStateMixin, AppState {
PuzzleHomeState(this.puzzle) {
_puzzleEventSubscription = puzzle.onEvent.listen(_onPuzzleEvent);
_currentTheme = themes.first;
}
@override
@@ -42,19 +37,6 @@ class PuzzleHomeState extends State with TickerProviderStateMixin, AppState {
super.initState();
_ticker ??= createTicker(_onTick);
_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
@@ -70,20 +52,41 @@ class PuzzleHomeState extends State with TickerProviderStateMixin, AppState {
}
}
bool _badHack;
@override
Widget build(BuildContext context) => MultiProvider(
providers: [
ListenableProvider.value(listenable: _tabController),
Provider<AppState>.value(value: this),
Provider<AppState>.value(
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
void dispose() {
animationNotifier.dispose();
_tabController.dispose();
_controller?.dispose();
_ticker?.dispose();
_puzzleEventSubscription.cancel();
super.dispose();
@@ -92,12 +95,6 @@ class PuzzleHomeState extends State with TickerProviderStateMixin, AppState {
void _onPuzzleEvent(PuzzleEvent e) {
_tickerTimeSinceLastEvent = Duration.zero;
_ensureTicking();
if (e == PuzzleEvent.noop) {
assert(e == PuzzleEvent.noop);
_controller
..reset()
..forward();
}
setState(() {
// noop
});
@@ -152,3 +149,107 @@ class _AnimationNotifier extends ChangeNotifier {
}
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)),
)
],
),
),
),
),
),
),
),
);