|
|
@ -2,32 +2,31 @@
|
|
|
|
// 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 'puzzle_flow_delegate.dart';
|
|
|
|
|
|
|
|
import 'themes.dart';
|
|
|
|
import 'widgets/material_interior_alt.dart';
|
|
|
|
import 'widgets/material_interior_alt.dart';
|
|
|
|
|
|
|
|
|
|
|
|
abstract class SharedTheme {
|
|
|
|
abstract class SharedTheme {
|
|
|
|
SharedTheme(this._appState);
|
|
|
|
const SharedTheme();
|
|
|
|
|
|
|
|
|
|
|
|
final AppState _appState;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
PuzzleProxy get puzzle => _appState.puzzle;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
String get name;
|
|
|
|
String get name;
|
|
|
|
|
|
|
|
|
|
|
|
Color get puzzleThemeBackground;
|
|
|
|
Color get puzzleThemeBackground;
|
|
|
|
|
|
|
|
|
|
|
|
RoundedRectangleBorder get puzzleBorder;
|
|
|
|
RoundedRectangleBorder puzzleBorder(bool small);
|
|
|
|
|
|
|
|
|
|
|
|
Color get puzzleBackgroundColor;
|
|
|
|
Color get puzzleBackgroundColor;
|
|
|
|
|
|
|
|
|
|
|
|
Color get puzzleAccentColor;
|
|
|
|
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(
|
|
|
|
Ink createInk(
|
|
|
|
Widget child, {
|
|
|
|
Widget child, {
|
|
|
@ -43,6 +42,8 @@ abstract class SharedTheme {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
Widget createButton(
|
|
|
|
Widget createButton(
|
|
|
|
|
|
|
|
AppState appState,
|
|
|
|
|
|
|
|
bool small,
|
|
|
|
int tileValue,
|
|
|
|
int tileValue,
|
|
|
|
Widget content, {
|
|
|
|
Widget content, {
|
|
|
|
Color color,
|
|
|
|
Color color,
|
|
|
@ -50,47 +51,33 @@ abstract class SharedTheme {
|
|
|
|
}) =>
|
|
|
|
}) =>
|
|
|
|
AnimatedContainer(
|
|
|
|
AnimatedContainer(
|
|
|
|
duration: _puzzleAnimationDuration,
|
|
|
|
duration: _puzzleAnimationDuration,
|
|
|
|
padding: tilePadding,
|
|
|
|
padding: tilePadding(appState.puzzle),
|
|
|
|
child: RaisedButton(
|
|
|
|
child: RaisedButton(
|
|
|
|
elevation: 4,
|
|
|
|
elevation: 4,
|
|
|
|
clipBehavior: Clip.hardEdge,
|
|
|
|
clipBehavior: Clip.hardEdge,
|
|
|
|
animationDuration: _puzzleAnimationDuration,
|
|
|
|
animationDuration: _puzzleAnimationDuration,
|
|
|
|
onPressed: () => _tilePress(tileValue),
|
|
|
|
onPressed: () => appState.clickOrShake(tileValue),
|
|
|
|
shape: shape ?? puzzleBorder,
|
|
|
|
shape: shape ?? puzzleBorder(small),
|
|
|
|
padding: const EdgeInsets.symmetric(),
|
|
|
|
padding: const EdgeInsets.symmetric(),
|
|
|
|
child: content,
|
|
|
|
child: content,
|
|
|
|
color: color,
|
|
|
|
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;
|
|
|
|
const _smallWidth = 580;
|
|
|
|
|
|
|
|
|
|
|
|
final constraintWidth =
|
|
|
|
final constraintWidth =
|
|
|
|
constraints.hasBoundedWidth ? constraints.maxWidth : 1000.0;
|
|
|
|
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,
|
|
|
|
|
|
|
|
(small) => Material(
|
|
|
|
child: Stack(
|
|
|
|
child: Stack(
|
|
|
|
children: <Widget>[
|
|
|
|
children: <Widget>[
|
|
|
|
const SizedBox.expand(
|
|
|
|
const SizedBox.expand(
|
|
|
@ -106,9 +93,11 @@ abstract class SharedTheme {
|
|
|
|
color: puzzleThemeBackground,
|
|
|
|
color: puzzleThemeBackground,
|
|
|
|
child: Center(
|
|
|
|
child: Center(
|
|
|
|
child: _styledWrapper(
|
|
|
|
child: _styledWrapper(
|
|
|
|
|
|
|
|
small,
|
|
|
|
SizedBox(
|
|
|
|
SizedBox(
|
|
|
|
width: 580,
|
|
|
|
width: 580,
|
|
|
|
child: Column(
|
|
|
|
child: Consumer<AppState>(
|
|
|
|
|
|
|
|
builder: (context, appState, _) => Column(
|
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
children: <Widget>[
|
|
|
|
children: <Widget>[
|
|
|
@ -121,15 +110,19 @@ abstract class SharedTheme {
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
margin: const EdgeInsets.symmetric(horizontal: 20),
|
|
|
|
margin: const EdgeInsets.symmetric(
|
|
|
|
|
|
|
|
horizontal: 20),
|
|
|
|
child: TabBar(
|
|
|
|
child: TabBar(
|
|
|
|
controller: _appState.tabController,
|
|
|
|
controller:
|
|
|
|
labelPadding: const EdgeInsets.fromLTRB(0, 20, 0, 12),
|
|
|
|
Provider.of<TabController>(context),
|
|
|
|
|
|
|
|
labelPadding: const EdgeInsets.fromLTRB(
|
|
|
|
|
|
|
|
0, 20, 0, 12),
|
|
|
|
labelColor: puzzleAccentColor,
|
|
|
|
labelColor: puzzleAccentColor,
|
|
|
|
indicatorColor: puzzleAccentColor,
|
|
|
|
indicatorColor: puzzleAccentColor,
|
|
|
|
indicatorWeight: 1.5,
|
|
|
|
indicatorWeight: 1.5,
|
|
|
|
unselectedLabelColor: Colors.black.withOpacity(0.6),
|
|
|
|
unselectedLabelColor:
|
|
|
|
tabs: _appState.themeData
|
|
|
|
Colors.black.withOpacity(0.6),
|
|
|
|
|
|
|
|
tabs: themes
|
|
|
|
.map((st) => Text(
|
|
|
|
.map((st) => Text(
|
|
|
|
st.name.toUpperCase(),
|
|
|
|
st.name.toUpperCase(),
|
|
|
|
style: const TextStyle(
|
|
|
|
style: const TextStyle(
|
|
|
@ -140,24 +133,29 @@ abstract class SharedTheme {
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
Container(
|
|
|
|
Container(
|
|
|
|
constraints: const BoxConstraints.tightForFinite(),
|
|
|
|
constraints:
|
|
|
|
|
|
|
|
const BoxConstraints.tightForFinite(),
|
|
|
|
padding: const EdgeInsets.all(10),
|
|
|
|
padding: const EdgeInsets.all(10),
|
|
|
|
child: Flow(
|
|
|
|
child: Flow(
|
|
|
|
delegate: PuzzleFlowDelegate(
|
|
|
|
delegate: PuzzleFlowDelegate(
|
|
|
|
small ? const Size(90, 90) : const Size(140, 140),
|
|
|
|
small
|
|
|
|
puzzle,
|
|
|
|
? const Size(90, 90)
|
|
|
|
_appState.animationNotifier,
|
|
|
|
: const Size(140, 140),
|
|
|
|
|
|
|
|
appState.puzzle,
|
|
|
|
|
|
|
|
appState.animationNotifier,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
children: List<Widget>.generate(
|
|
|
|
children: List<Widget>.generate(
|
|
|
|
puzzle.length,
|
|
|
|
appState.puzzle.length,
|
|
|
|
_tileButton,
|
|
|
|
(i) =>
|
|
|
|
|
|
|
|
_tileButton(i, appState, small),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
Container(
|
|
|
|
Container(
|
|
|
|
decoration: const BoxDecoration(
|
|
|
|
decoration: const BoxDecoration(
|
|
|
|
border: Border(
|
|
|
|
border: Border(
|
|
|
|
top: BorderSide(color: Colors.black26, width: 1),
|
|
|
|
top: BorderSide(
|
|
|
|
|
|
|
|
color: Colors.black26, width: 1),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
padding: const EdgeInsets.only(
|
|
|
|
padding: const EdgeInsets.only(
|
|
|
@ -166,62 +164,51 @@ abstract class SharedTheme {
|
|
|
|
top: 2,
|
|
|
|
top: 2,
|
|
|
|
right: 10,
|
|
|
|
right: 10,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
child: Row(children: _bottomControls(context)),
|
|
|
|
child: Row(
|
|
|
|
|
|
|
|
children: _bottomControls(appState)),
|
|
|
|
)
|
|
|
|
)
|
|
|
|
],
|
|
|
|
],
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
|
|
|
|
),
|
|
|
|
)
|
|
|
|
)
|
|
|
|
],
|
|
|
|
],
|
|
|
|
));
|
|
|
|
)));
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Duration get _puzzleAnimationDuration => kThemeAnimationDuration * 3;
|
|
|
|
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(Widget child) => MaterialInterior(
|
|
|
|
Widget _styledWrapper(bool small, Widget child) => MaterialInterior(
|
|
|
|
duration: _puzzleAnimationDuration,
|
|
|
|
duration: _puzzleAnimationDuration,
|
|
|
|
shape: puzzleBorder,
|
|
|
|
shape: puzzleBorder(small),
|
|
|
|
color: puzzleBackgroundColor,
|
|
|
|
color: puzzleBackgroundColor,
|
|
|
|
child: child,
|
|
|
|
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(
|
|
|
|
TextStyle get _infoStyle => TextStyle(
|
|
|
|
color: puzzleAccentColor,
|
|
|
|
color: puzzleAccentColor,
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
List<Widget> _bottomControls(BuildContext context) => <Widget>[
|
|
|
|
List<Widget> _bottomControls(AppState appState) => <Widget>[
|
|
|
|
IconButton(
|
|
|
|
IconButton(
|
|
|
|
onPressed: puzzle.reset,
|
|
|
|
onPressed: appState.puzzle.reset,
|
|
|
|
icon: Icon(Icons.refresh, color: puzzleAccentColor),
|
|
|
|
icon: Icon(Icons.refresh, color: puzzleAccentColor),
|
|
|
|
//Icons.refresh,
|
|
|
|
//Icons.refresh,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
Checkbox(
|
|
|
|
Checkbox(
|
|
|
|
value: _appState.autoPlay,
|
|
|
|
value: appState.autoPlay,
|
|
|
|
onChanged: _setAutoPlay,
|
|
|
|
onChanged: appState.setAutoPlayFunction,
|
|
|
|
activeColor: puzzleAccentColor,
|
|
|
|
activeColor: puzzleAccentColor,
|
|
|
|
),
|
|
|
|
),
|
|
|
|
Expanded(
|
|
|
|
Expanded(
|
|
|
|
child: Container(),
|
|
|
|
child: Container(),
|
|
|
|
),
|
|
|
|
),
|
|
|
|
Text(
|
|
|
|
Text(
|
|
|
|
puzzle.clickCount.toString(),
|
|
|
|
appState.puzzle.clickCount.toString(),
|
|
|
|
textAlign: TextAlign.right,
|
|
|
|
textAlign: TextAlign.right,
|
|
|
|
style: _infoStyle,
|
|
|
|
style: _infoStyle,
|
|
|
|
),
|
|
|
|
),
|
|
|
@ -229,7 +216,7 @@ abstract class SharedTheme {
|
|
|
|
SizedBox(
|
|
|
|
SizedBox(
|
|
|
|
width: 28,
|
|
|
|
width: 28,
|
|
|
|
child: Text(
|
|
|
|
child: Text(
|
|
|
|
puzzle.incorrectTiles.toString(),
|
|
|
|
appState.puzzle.incorrectTiles.toString(),
|
|
|
|
textAlign: TextAlign.right,
|
|
|
|
textAlign: TextAlign.right,
|
|
|
|
style: _infoStyle,
|
|
|
|
style: _infoStyle,
|
|
|
|
),
|
|
|
|
),
|
|
|
@ -237,11 +224,11 @@ abstract class SharedTheme {
|
|
|
|
const Text(' Tiles left ')
|
|
|
|
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 const Center();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return tileButton(i);
|
|
|
|
return tileButton(i, appState, small);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|