mirror of
https://github.com/flutter/samples.git
synced 2026-04-19 21:41:43 +00:00
Updates veggieseasons to Dart 2.3, adds some minor UI updates (#88)
This commit is contained in:
@@ -20,7 +20,7 @@ class FrostedBox extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
|
||||
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: Styles.frostedBackground,
|
||||
|
||||
@@ -20,12 +20,12 @@ class SearchBar extends StatelessWidget {
|
||||
return DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: Styles.searchBackground,
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 4.0,
|
||||
vertical: 8.0,
|
||||
horizontal: 4,
|
||||
vertical: 8,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
|
||||
@@ -22,9 +22,9 @@ class SettingsGroupHeader extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: 15.0,
|
||||
right: 15.0,
|
||||
bottom: 6.0,
|
||||
left: 15,
|
||||
right: 15,
|
||||
bottom: 6,
|
||||
),
|
||||
child: Text(
|
||||
title.toUpperCase(),
|
||||
@@ -47,15 +47,15 @@ class SettingsGroupFooter extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: 15.0,
|
||||
right: 15.0,
|
||||
left: 15,
|
||||
right: 15,
|
||||
top: 7.5,
|
||||
),
|
||||
child: Text(
|
||||
title,
|
||||
style: TextStyle(
|
||||
color: Styles.settingsGroupSubtitle,
|
||||
fontSize: 13.0,
|
||||
fontSize: 13,
|
||||
letterSpacing: -0.08,
|
||||
),
|
||||
),
|
||||
@@ -87,45 +87,35 @@ class SettingsGroup extends StatelessWidget {
|
||||
dividedItems.add(items[i]);
|
||||
}
|
||||
|
||||
final List<Widget> columnChildren = [];
|
||||
|
||||
if (header != null) {
|
||||
columnChildren.add(header);
|
||||
}
|
||||
|
||||
columnChildren.add(
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: CupertinoColors.white,
|
||||
border: Border(
|
||||
top: const BorderSide(
|
||||
color: Styles.settingsLineation,
|
||||
width: 0.0,
|
||||
),
|
||||
bottom: const BorderSide(
|
||||
color: Styles.settingsLineation,
|
||||
width: 0.0,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: dividedItems,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
if (footer != null) {
|
||||
columnChildren.add(footer);
|
||||
}
|
||||
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(
|
||||
top: header == null ? 35.0 : 22.0,
|
||||
top: header == null ? 35 : 22,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: columnChildren,
|
||||
children: [
|
||||
if (header != null) header,
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: CupertinoColors.white,
|
||||
border: Border(
|
||||
top: const BorderSide(
|
||||
color: Styles.settingsLineation,
|
||||
width: 0,
|
||||
),
|
||||
bottom: const BorderSide(
|
||||
color: Styles.settingsLineation,
|
||||
width: 0,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: dividedItems,
|
||||
),
|
||||
),
|
||||
if (footer != null) footer,
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ class SettingsNavigationIndicator extends StatelessWidget {
|
||||
return Icon(
|
||||
CupertinoIcons.forward,
|
||||
color: Styles.settingsMediumGray,
|
||||
size: 21.0,
|
||||
size: 21,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -45,14 +45,14 @@ class SettingsIcon extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(5.0),
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
color: backgroundColor,
|
||||
),
|
||||
child: Center(
|
||||
child: Icon(
|
||||
icon,
|
||||
color: foregroundColor,
|
||||
size: 20.0,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
);
|
||||
@@ -85,67 +85,6 @@ class SettingsItemState extends State<SettingsItem> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
List<Widget> rowChildren = [];
|
||||
|
||||
if (widget.icon != null) {
|
||||
rowChildren.add(
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 15.0,
|
||||
bottom: 2.0,
|
||||
),
|
||||
child: SizedBox(
|
||||
height: 29.0,
|
||||
width: 29.0,
|
||||
child: widget.icon,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget titleSection;
|
||||
|
||||
if (widget.subtitle == null) {
|
||||
titleSection = Padding(
|
||||
padding: EdgeInsets.only(top: 1.5),
|
||||
child: Text(widget.label),
|
||||
);
|
||||
} else {
|
||||
titleSection = Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
SizedBox(height: 8.5),
|
||||
Text(widget.label),
|
||||
SizedBox(height: 4.0),
|
||||
Text(
|
||||
widget.subtitle,
|
||||
style: TextStyle(
|
||||
fontSize: 12.0,
|
||||
letterSpacing: -0.2,
|
||||
),
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
rowChildren.add(
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 15.0,
|
||||
),
|
||||
child: titleSection,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
rowChildren.add(
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(right: 11.0),
|
||||
child: widget.content ?? Container(),
|
||||
),
|
||||
);
|
||||
|
||||
return AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
color: pressed ? Styles.settingsItemPressed : Styles.transparentColor,
|
||||
@@ -168,9 +107,53 @@ class SettingsItemState extends State<SettingsItem> {
|
||||
}
|
||||
},
|
||||
child: SizedBox(
|
||||
height: widget.subtitle == null ? 44.0 : 57.0,
|
||||
height: widget.subtitle == null ? 44 : 57,
|
||||
child: Row(
|
||||
children: rowChildren,
|
||||
children: [
|
||||
if (widget.icon != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 15,
|
||||
bottom: 2,
|
||||
),
|
||||
child: SizedBox(
|
||||
height: 29,
|
||||
width: 29,
|
||||
child: widget.icon,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 15,
|
||||
),
|
||||
child: widget.subtitle != null
|
||||
? Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
SizedBox(height: 8.5),
|
||||
Text(widget.label),
|
||||
SizedBox(height: 4),
|
||||
Text(
|
||||
widget.subtitle,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
letterSpacing: -0.2,
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
: Padding(
|
||||
padding: EdgeInsets.only(top: 1.5),
|
||||
child: Text(widget.label),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(right: 11),
|
||||
child: widget.content ?? Container(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
@@ -107,14 +107,14 @@ class _TriviaViewState extends State<TriviaView> {
|
||||
// restart everything.
|
||||
Widget _buildFinishedView() {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(32.0),
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(
|
||||
children: [
|
||||
Text(
|
||||
'All done!',
|
||||
style: Styles.triviaFinishedTitleText,
|
||||
),
|
||||
SizedBox(height: 16.0),
|
||||
SizedBox(height: 16),
|
||||
Text(
|
||||
'You answered',
|
||||
style: Styles.triviaFinishedText,
|
||||
@@ -129,7 +129,7 @@ class _TriviaViewState extends State<TriviaView> {
|
||||
style: Styles.triviaFinishedBigText,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Text(
|
||||
' of ',
|
||||
style: Styles.triviaFinishedText,
|
||||
@@ -145,7 +145,7 @@ class _TriviaViewState extends State<TriviaView> {
|
||||
'questions correctly!',
|
||||
style: Styles.triviaFinishedText,
|
||||
),
|
||||
SizedBox(height: 16.0),
|
||||
SizedBox(height: 16),
|
||||
CupertinoButton(
|
||||
child: Text('Try Again'),
|
||||
onPressed: () => _resetGame(),
|
||||
@@ -157,30 +157,26 @@ class _TriviaViewState extends State<TriviaView> {
|
||||
|
||||
// Presents the current trivia's question and answer choices.
|
||||
Widget _buildQuestionView() {
|
||||
List<Widget> buttons = [];
|
||||
|
||||
for (int i = 0; i < currentTrivia.answers.length; i++) {
|
||||
buttons.add(Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: CupertinoButton(
|
||||
color: CupertinoColors.activeBlue,
|
||||
child: Text(
|
||||
currentTrivia.answers[i],
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
onPressed: () => _processAnswer(i),
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
children: [
|
||||
SizedBox(height: 16.0),
|
||||
SizedBox(height: 16),
|
||||
Text(currentTrivia.question),
|
||||
SizedBox(height: 32.0),
|
||||
]..addAll(buttons),
|
||||
SizedBox(height: 32),
|
||||
for (int i = 0; i < currentTrivia.answers.length; i++)
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
child: CupertinoButton(
|
||||
color: CupertinoColors.activeBlue,
|
||||
child: Text(
|
||||
currentTrivia.answers[i],
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
onPressed: () => _processAnswer(i),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -189,13 +185,13 @@ class _TriviaViewState extends State<TriviaView> {
|
||||
// continue through the game.
|
||||
Widget _buildResultView() {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(32.0),
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(
|
||||
children: [
|
||||
Text(status == PlayerStatus.wasCorrect
|
||||
? 'That\'s right!'
|
||||
: 'Sorry, that wasn\'t the right answer.'),
|
||||
SizedBox(height: 16.0),
|
||||
SizedBox(height: 16),
|
||||
CupertinoButton(
|
||||
child: Text('Next Question'),
|
||||
onPressed: () => setState(() {
|
||||
|
||||
@@ -2,19 +2,48 @@
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:veggieseasons/data/veggie.dart';
|
||||
import 'package:veggieseasons/screens/details.dart';
|
||||
import 'package:veggieseasons/styles.dart';
|
||||
|
||||
class FrostyBackground extends StatelessWidget {
|
||||
const FrostyBackground({
|
||||
this.color,
|
||||
this.intensity = 25,
|
||||
this.child,
|
||||
});
|
||||
|
||||
final Color color;
|
||||
final double intensity;
|
||||
final Widget child;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ClipRect(
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: intensity, sigmaY: intensity),
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// A Card-like Widget that responds to tap events by animating changes to its
|
||||
/// elevation and invoking an optional [onPressed] callback.
|
||||
class PressableCard extends StatefulWidget {
|
||||
const PressableCard({
|
||||
@required this.child,
|
||||
this.borderRadius = const BorderRadius.all(Radius.circular(10.0)),
|
||||
this.upElevation = 2.0,
|
||||
this.downElevation = 0.0,
|
||||
this.borderRadius = const BorderRadius.all(Radius.circular(5)),
|
||||
this.upElevation = 2,
|
||||
this.downElevation = 0,
|
||||
this.shadowColor = CupertinoColors.black,
|
||||
this.duration = const Duration(milliseconds: 100),
|
||||
this.onPressed,
|
||||
@@ -89,12 +118,10 @@ class VeggieCard extends StatelessWidget {
|
||||
final bool isPreferredCategory;
|
||||
|
||||
Widget _buildDetails() {
|
||||
return DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: veggie.accentColor,
|
||||
),
|
||||
return FrostyBackground(
|
||||
color: Color(0x90ffffff),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
@@ -126,7 +153,7 @@ class VeggieCard extends StatelessWidget {
|
||||
Semantics(
|
||||
label: 'A card background featuring ${veggie.name}',
|
||||
child: Container(
|
||||
height: isInSeason ? 350 : 150,
|
||||
height: isInSeason ? 300 : 150,
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
fit: BoxFit.cover,
|
||||
@@ -140,9 +167,9 @@ class VeggieCard extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 0.0,
|
||||
left: 0.0,
|
||||
right: 0.0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: _buildDetails(),
|
||||
),
|
||||
],
|
||||
|
||||
@@ -7,6 +7,39 @@ import 'package:veggieseasons/data/veggie.dart';
|
||||
import 'package:veggieseasons/screens/details.dart';
|
||||
import 'package:veggieseasons/styles.dart';
|
||||
|
||||
class ZoomClipAssetImage extends StatelessWidget {
|
||||
const ZoomClipAssetImage(
|
||||
{@required this.zoom,
|
||||
this.height,
|
||||
this.width,
|
||||
@required this.imageAsset});
|
||||
|
||||
final double zoom;
|
||||
final double height;
|
||||
final double width;
|
||||
final String imageAsset;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: height,
|
||||
width: width,
|
||||
alignment: Alignment.center,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
child: OverflowBox(
|
||||
maxHeight: height * zoom,
|
||||
maxWidth: width * zoom,
|
||||
child: Image.asset(
|
||||
imageAsset,
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class VeggieHeadline extends StatelessWidget {
|
||||
final Veggie veggie;
|
||||
|
||||
@@ -16,14 +49,14 @@ class VeggieHeadline extends StatelessWidget {
|
||||
List<Widget> widgets = <Widget>[];
|
||||
|
||||
for (Season season in seasons) {
|
||||
widgets.add(SizedBox(width: 4.0));
|
||||
widgets.add(SizedBox(width: 4));
|
||||
widgets.add(
|
||||
Container(
|
||||
height: 10.0,
|
||||
width: 10.0,
|
||||
height: 10,
|
||||
width: 10,
|
||||
decoration: BoxDecoration(
|
||||
color: Styles.seasonColors[season],
|
||||
borderRadius: BorderRadius.circular(5.0),
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
),
|
||||
),
|
||||
);
|
||||
@@ -42,31 +75,28 @@ class VeggieHeadline extends StatelessWidget {
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 80.0,
|
||||
height: 80.0,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
child: Image.asset(
|
||||
veggie.imageAssetPath,
|
||||
semanticLabel: 'An icon showing ${veggie.name}',
|
||||
fit: BoxFit.fitWidth,
|
||||
),
|
||||
),
|
||||
ZoomClipAssetImage(
|
||||
imageAsset: veggie.imageAssetPath,
|
||||
zoom: 2.4,
|
||||
height: 72,
|
||||
width: 72,
|
||||
),
|
||||
SizedBox(width: 8.0),
|
||||
SizedBox(width: 8),
|
||||
Flexible(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: <Widget>[
|
||||
children: [
|
||||
Text(veggie.name, style: Styles.headlineName),
|
||||
]..addAll(_buildSeasonDots(veggie.seasons)),
|
||||
..._buildSeasonDots(veggie.seasons),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
veggie.shortDescription,
|
||||
style: Styles.headlineDescription,
|
||||
),
|
||||
Text(veggie.shortDescription,
|
||||
style: Styles.headlineDescription),
|
||||
],
|
||||
),
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user