Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2026-03-25 05:41:41 +00:00
Code Issues Releases Wiki Activity

web/slide_puzzle: more provider cleanup

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,15 +2,13 @@
// 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';
final puzzleAnimationDuration = kThemeAnimationDuration * 3;
abstract class SharedTheme {
const SharedTheme();
@@ -50,12 +48,12 @@ abstract class SharedTheme {
RoundedRectangleBorder shape,
}) =>
AnimatedContainer(
duration: _puzzleAnimationDuration,
duration: puzzleAnimationDuration,
padding: tilePadding(appState.puzzle),
child: RaisedButton(
elevation: 4,
clipBehavior: Clip.hardEdge,
animationDuration: _puzzleAnimationDuration,
animationDuration: puzzleAnimationDuration,
onPressed: () => appState.clickOrShake(tileValue),
shape: shape ?? puzzleBorder(small),
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
// resizing behavior
Widget _styledWrapper(bool small, Widget child) => MaterialInterior(
duration: _puzzleAnimationDuration,
Widget styledWrapper(bool small, Widget child) => MaterialInterior(
duration: puzzleAnimationDuration,
shape: puzzleBorder(small),
color: puzzleBackgroundColor,
child: child,
@@ -193,7 +76,7 @@ abstract class SharedTheme {
fontWeight: FontWeight.bold,
);
List<Widget> _bottomControls(AppState appState) => <Widget>[
List<Widget> bottomControls(AppState appState) => <Widget>[
IconButton(
onPressed: appState.puzzle.reset,
icon: Icon(Icons.refresh, color: puzzleAccentColor),
@@ -224,7 +107,7 @@ abstract class SharedTheme {
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) {
return const Center();
}