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:
@@ -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)),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user