1
0
mirror of https://github.com/flutter/samples.git synced 2026-04-19 13:32:43 +00:00

Updates veggieseasons to Dart 2.3, adds some minor UI updates (#88)

This commit is contained in:
Andrew Brogdon
2019-06-10 09:47:09 -07:00
committed by GitHub
parent cf2a3b28cd
commit 08beb69245
18 changed files with 348 additions and 325 deletions

View File

@@ -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,

View File

@@ -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: [

View File

@@ -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,
],
),
);
}

View File

@@ -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(),
),
],
),
),
),

View File

@@ -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(() {

View File

@@ -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(),
),
],

View File

@@ -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),
],
),
)