Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2026-03-29 15:51:47 +00:00
Code Issues Releases Wiki Activity

Add flutter_web samples (#75)

Browse Source
This commit is contained in:
Kevin Moore
2019-05-07 13:32:08 -07:00
committed by Andrew Brogdon
parent 42f2dce01b
commit 3fe927cb29
697 changed files with 241026 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
web/slide_puzzle/lib/src/shared_theme.dart Normal file
View File

@@ -0,0 +1,247 @@
// Copyright 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'app_state.dart';
import 'core/puzzle_animator.dart';
import 'flutter.dart';
import 'puzzle_flow_delegate.dart';
import 'widgets/material_interior_alt.dart';
abstract class SharedTheme {
SharedTheme(this._appState);
final AppState _appState;
PuzzleProxy get puzzle => _appState.puzzle;
String get name;
Color get puzzleThemeBackground;
RoundedRectangleBorder get puzzleBorder;
Color get puzzleBackgroundColor;
Color get puzzleAccentColor;
EdgeInsetsGeometry get tilePadding => const EdgeInsets.all(6);
Widget tileButton(int i);
Ink createInk(
Widget child, {
DecorationImage image,
EdgeInsetsGeometry padding,
}) =>
Ink(
padding: padding,
decoration: BoxDecoration(
image: image,
),
child: child,
);
Widget createButton(
int tileValue,
Widget content, {
Color color,
RoundedRectangleBorder shape,
}) =>
AnimatedContainer(
duration: _puzzleAnimationDuration,
padding: tilePadding,
child: RaisedButton(
elevation: 4,
clipBehavior: Clip.hardEdge,
animationDuration: _puzzleAnimationDuration,
onPressed: () => _tilePress(tileValue),
shape: shape ?? puzzleBorder,
padding: const EdgeInsets.symmetric(),
child: content,
color: color,
),
);
double _previousConstraintWidth;
bool _small;
bool get small => _small;
void _updateConstraints(BoxConstraints constraints) {
const _smallWidth = 580;
final constraintWidth =
constraints.hasBoundedWidth ? constraints.maxWidth : 1000.0;
if (constraintWidth == _previousConstraintWidth) {
assert(_small != null);
return;
}
_previousConstraintWidth = constraintWidth;
if (_previousConstraintWidth < _smallWidth) {
_small = true;
} else {
_small = false;
}
}
Widget build(BuildContext context, BoxConstraints constraints) {
_updateConstraints(constraints);
return 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(
SizedBox(
width: 580,
child: 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: _appState.tabController,
labelPadding: const EdgeInsets.fromLTRB(0, 20, 0, 12),
labelColor: puzzleAccentColor,
indicatorColor: puzzleAccentColor,
indicatorWeight: 1.5,
unselectedLabelColor: Colors.black.withOpacity(0.6),
tabs: _appState.themeData
.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),
puzzle,
_appState.animationNotifier,
),
children: List<Widget>.generate(
puzzle.length,
_tileButton,
),
),
),
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(context)),
)
],
),
),
),
),
)
],
));
}
Duration get _puzzleAnimationDuration => kThemeAnimationDuration * 3;
// Thought about using AnimatedContainer here, but it causes some weird
// resizing behavior
Widget _styledWrapper(Widget child) => MaterialInterior(
duration: _puzzleAnimationDuration,
shape: puzzleBorder,
color: puzzleBackgroundColor,
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(
color: puzzleAccentColor,
fontWeight: FontWeight.bold,
);
List<Widget> _bottomControls(BuildContext context) => <Widget>[
IconButton(
onPressed: puzzle.reset,
icon: Icon(Icons.refresh, color: puzzleAccentColor),
//Icons.refresh,
),
Checkbox(
value: _appState.autoPlay,
onChanged: _setAutoPlay,
activeColor: puzzleAccentColor,
),
Expanded(
child: Container(),
),
Text(
puzzle.clickCount.toString(),
textAlign: TextAlign.right,
style: _infoStyle,
),
const Text(' Moves'),
SizedBox(
width: 28,
child: Text(
puzzle.incorrectTiles.toString(),
textAlign: TextAlign.right,
style: _infoStyle,
),
),
const Text(' Tiles left ')
];
Widget _tileButton(int i) {
if (i == puzzle.tileCount && !puzzle.solved) {
return const Center();
}
return tileButton(i);
}
}