msb-public
/
samples
mirror of https://github.com/flutter/samples.git
1
0
Code Issues Projects Releases Wiki Activity

Styling revamp using CupertinoThemeData and CupertinoTextThemeData (#593)

Browse Source
pull/614/head
Alex Vavvas 4 years ago committed by GitHub
parent 1d33b3dcf7
commit 7c5fecbceb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 160 additions and 231 deletions
Show Stats Download Patch File Download Diff File

2
experimental/veggieseasons/lib/main.dart
Unescape View File

@ -8,6 +8,7 @@ import 'package:provider/provider.dart';
import 'package:veggieseasons/data/app_state.dart';
import 'package:veggieseasons/data/preferences.dart';
import 'package:veggieseasons/screens/home.dart';
import 'package:veggieseasons/styles.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
@ -58,6 +59,7 @@ class _VeggieAppState extends State<VeggieApp> with RestorationMixin {
),
],
child: CupertinoApp(
theme: Styles.veggieThemeData,
debugShowCheckedModeBanner: false,
home: HomeScreen(restorationId: 'home'),
restorationScopeId: 'app',

24
experimental/veggieseasons/lib/screens/details.dart
Unescape View File

@ -28,12 +28,11 @@ class ServingInfoChart extends StatelessWidget {
builder: (context, snapshot) {
final target = snapshot?.data ?? 2000;
final percent = standardPercentage * 2000 ~/ target;
final themeData = CupertinoTheme.of(context);
return Text(
'$percent% DV',
style: CupertinoTheme.of(context).textTheme.textStyle,
textAlign: TextAlign.end,
style: Styles.detailsServingValueText(themeData),
);
},
);
@ -54,7 +53,7 @@ class ServingInfoChart extends StatelessWidget {
),
child: Text(
'Serving info',
style: Styles.detailsServingHeaderText,
style: CupertinoTheme.of(context).textTheme.textStyle,
),
),
),
@ -79,7 +78,7 @@ class ServingInfoChart extends StatelessWidget {
child: Text(
veggie.servingSize,
textAlign: TextAlign.end,
style: Styles.detailsServingValueText(themeData),
style: CupertinoTheme.of(context).textTheme.textStyle,
),
),
],
@ -95,8 +94,8 @@ class ServingInfoChart extends StatelessWidget {
TableCell(
child: Text(
'${veggie.caloriesPerServing} kCal',
style: CupertinoTheme.of(context).textTheme.textStyle,
textAlign: TextAlign.end,
style: Styles.detailsServingValueText(themeData),
),
),
],
@ -184,7 +183,7 @@ class InfoView extends StatelessWidget {
style: (snapshot.hasData &&
snapshot.data.contains(veggie.category))
? Styles.detailsPreferredCategoryText(themeData)
: Styles.detailsCategoryText(themeData),
: themeData.textTheme.textStyle,
);
},
),
@ -210,7 +209,7 @@ class InfoView extends StatelessWidget {
SizedBox(height: 8),
Text(
veggie.shortDescription,
style: Styles.detailsDescriptionText(themeData),
style: CupertinoTheme.of(context).textTheme.textStyle,
),
ServingInfoChart(veggie, prefs),
SizedBox(height: 24),
@ -249,7 +248,8 @@ class DetailsScreen extends StatefulWidget {
static Route<void> _routeBuilder(BuildContext context, Object arguments) {
final veggieId = arguments as int;
return CupertinoPageRoute(
builder: (context) => DetailsScreen(id: veggieId, restorationId: 'details'),
builder: (context) =>
DetailsScreen(id: veggieId, restorationId: 'details'),
fullscreenDialog: true,
);
}
@ -324,8 +324,12 @@ class _DetailsScreenState extends State<DetailsScreen> with RestorationMixin {
SizedBox(height: 20),
CupertinoSegmentedControl<int>(
children: {
0: Text('Facts & Info'),
1: Text('Trivia'),
0: Text(
'Facts & Info',
),
1: Text(
'Trivia',
)
},
groupValue: _selectedViewIndex.value,
onValueChanged: (value) {

4
experimental/veggieseasons/lib/screens/favorites.dart
Unescape View File

@ -7,7 +7,6 @@ import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';
import 'package:veggieseasons/data/app_state.dart';
import 'package:veggieseasons/data/veggie.dart';
import 'package:veggieseasons/styles.dart';
import 'package:veggieseasons/widgets/veggie_headline.dart';
class FavoritesScreen extends StatelessWidget {
@ -32,8 +31,7 @@ class FavoritesScreen extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Text(
'You haven\'t added any favorite veggies to your garden yet.',
style: Styles.headlineDescription(
CupertinoTheme.of(context)),
style: CupertinoTheme.of(context).textTheme.textStyle,
),
)
: ListView(

80
experimental/veggieseasons/lib/screens/list.dart
Unescape View File

@ -3,6 +3,7 @@
// found in the LICENSE file.
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
@ -40,43 +41,48 @@ class ListScreen extends StatelessWidget {
final appState = Provider.of<AppState>(context);
final prefs = Provider.of<Preferences>(context);
final themeData = CupertinoTheme.of(context);
return SafeArea(
bottom: false,
child: ListView.builder(
restorationId: 'list',
itemCount: appState.allVeggies.length + 2,
itemBuilder: (context, index) {
if (index == 0) {
return Padding(
padding: const EdgeInsets.fromLTRB(16, 24, 16, 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(dateString.toUpperCase(), style: Styles.minorText),
Text('In season today',
style: Styles.headlineText(themeData)),
],
),
);
} else if (index <= appState.availableVeggies.length) {
return _generateVeggieRow(
appState.availableVeggies[index - 1],
prefs,
);
} else if (index <= appState.availableVeggies.length + 1) {
return Padding(
padding: const EdgeInsets.fromLTRB(16, 24, 16, 16),
child: Text('Not in season',
style: Styles.headlineText(themeData)),
);
} else {
var relativeIndex =
index - (appState.availableVeggies.length + 2);
return _generateVeggieRow(
appState.unavailableVeggies[relativeIndex], prefs,
inSeason: false);
}
},
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarBrightness: MediaQuery.platformBrightnessOf(context)),
child: SafeArea(
bottom: false,
child: ListView.builder(
restorationId: 'list',
itemCount: appState.allVeggies.length + 2,
itemBuilder: (context, index) {
if (index == 0) {
return Padding(
padding: const EdgeInsets.fromLTRB(16, 24, 16, 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(dateString.toUpperCase(),
style: Styles.minorText(themeData)),
Text('In season today',
style: Styles.headlineText(themeData)),
],
),
);
} else if (index <= appState.availableVeggies.length) {
return _generateVeggieRow(
appState.availableVeggies[index - 1],
prefs,
);
} else if (index <= appState.availableVeggies.length + 1) {
return Padding(
padding: const EdgeInsets.fromLTRB(16, 24, 16, 16),
child: Text('Not in season',
style: Styles.headlineText(themeData)),
);
} else {
var relativeIndex =
index - (appState.availableVeggies.length + 2);
return _generateVeggieRow(
appState.unavailableVeggies[relativeIndex], prefs,
inSeason: false);
}
},
),
),
);
},

26
experimental/veggieseasons/lib/screens/search.dart
Unescape View File

@ -3,11 +3,11 @@
// found in the LICENSE file.
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';
import 'package:veggieseasons/data/app_state.dart';
import 'package:veggieseasons/data/veggie.dart';
import 'package:veggieseasons/styles.dart';
import 'package:veggieseasons/widgets/search_bar.dart';
import 'package:veggieseasons/widgets/veggie_headline.dart';
@ -63,7 +63,7 @@ class _SearchScreenState extends State<SearchScreen> with RestorationMixin {
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Text(
'No veggies matching your search terms were found.',
style: Styles.headlineDescription(CupertinoTheme.of(context)),
style: CupertinoTheme.of(context).textTheme.textStyle,
),
),
);
@ -101,15 +101,19 @@ class _SearchScreenState extends State<SearchScreen> with RestorationMixin {
return UnmanagedRestorationScope(
child: CupertinoTabView(
builder: (context) {
return SafeArea(
bottom: false,
child: Stack(
children: [
_buildSearchResults(model.searchVeggies(terms)),
_createSearchBox(),
],
),
);
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarBrightness:
MediaQuery.platformBrightnessOf(context)),
child: SafeArea(
bottom: false,
child: Stack(
children: [
_buildSearchResults(model.searchVeggies(terms)),
_createSearchBox(),
],
),
));
},
),
);

196
experimental/veggieseasons/lib/styles.dart
Unescape View File

@ -8,166 +8,109 @@ import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:veggieseasons/data/veggie.dart';
abstract class Styles {
static TextStyle headlineText(CupertinoThemeData themeData) => TextStyle(
color: themeData.textTheme.textStyle.color,
static CupertinoThemeData veggieThemeData = CupertinoThemeData(
textTheme: CupertinoTextThemeData(
textStyle: TextStyle(
color: CupertinoColors.label,
fontSize: 16,
fontWeight: FontWeight.normal,
fontStyle: FontStyle.normal,
fontFamily: 'NotoSans',
letterSpacing: -0.41,
decoration: TextDecoration.none,
),
),
);
static TextStyle headlineText(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle.copyWith(
fontSize: 32,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
);
static const minorText = TextStyle(
color: Color.fromRGBO(128, 128, 128, 1),
fontFamily: 'NotoSans',
fontSize: 16,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
);
static TextStyle minorText(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle.copyWith(
color: Color.fromRGBO(128, 128, 128, 1),
);
static TextStyle headlineName(CupertinoThemeData themeData) => TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
static TextStyle headlineName(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle.copyWith(
fontSize: 24,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
);
static TextStyle headlineDescription(CupertinoThemeData themeData) =>
TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
fontSize: 16,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
static TextStyle cardTitleText(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle.copyWith(
color: Color.fromRGBO(0, 0, 0, 0.9),
fontSize: 32,
fontWeight: FontWeight.bold,
);
static const cardTitleText = TextStyle(
color: Color.fromRGBO(0, 0, 0, 0.9),
fontFamily: 'NotoSans',
fontSize: 32,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
);
static const cardCategoryText = TextStyle(
color: Color.fromRGBO(255, 255, 255, 0.9),
fontFamily: 'NotoSans',
fontSize: 16,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
);
static TextStyle cardCategoryText(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle.copyWith(
color: Color.fromRGBO(255, 255, 255, 0.9),
);
static const cardDescriptionText = TextStyle(
color: Color.fromRGBO(0, 0, 0, 0.9),
fontFamily: 'NotoSans',
fontSize: 16,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
);
static TextStyle cardDescriptionText(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle.copyWith(
color: Color.fromRGBO(0, 0, 0, 0.9),
);
static TextStyle detailsTitleText(CupertinoThemeData themeData) => TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
static TextStyle detailsTitleText(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle.copyWith(
fontSize: 30,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
);
static TextStyle detailsPreferredCategoryText(CupertinoThemeData themeData) =>
TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
fontSize: 16,
fontStyle: FontStyle.normal,
themeData.textTheme.textStyle.copyWith(
fontWeight: FontWeight.bold,
);
static TextStyle detailsCategoryText(CupertinoThemeData themeData) =>
TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
fontSize: 16,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
static TextStyle detailsBoldDescriptionText(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle.copyWith(
color: Color.fromRGBO(0, 0, 0, 0.9),
fontWeight: FontWeight.bold,
);
static TextStyle detailsDescriptionText(CupertinoThemeData themeData) =>
TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
fontSize: 16,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
static TextStyle detailsServingHeaderText(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle.copyWith(
color: Color.fromRGBO(176, 176, 176, 1),
fontWeight: FontWeight.bold,
);
static const detailsBoldDescriptionText = TextStyle(
color: Color.fromRGBO(0, 0, 0, 0.9),
fontFamily: 'NotoSans',
fontSize: 16,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
);
static const detailsServingHeaderText = TextStyle(
color: Color.fromRGBO(176, 176, 176, 1),
fontFamily: 'NotoSans',
fontSize: 16,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
);
static TextStyle detailsServingLabelText(CupertinoThemeData themeData) =>
TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
fontSize: 16,
fontStyle: FontStyle.normal,
themeData.textTheme.textStyle.copyWith(
fontWeight: FontWeight.bold,
);
static TextStyle detailsServingValueText(CupertinoThemeData themeData) =>
TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
fontSize: 16,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
);
static TextStyle detailsServingNoteText(CupertinoThemeData themeData) =>
TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
fontSize: 16,
themeData.textTheme.textStyle.copyWith(
fontStyle: FontStyle.italic,
fontWeight: FontWeight.normal,
);
static TextStyle triviaFinishedTitleText(CupertinoThemeData themeData) =>
TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
themeData.textTheme.textStyle.copyWith(
fontSize: 32,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
);
static TextStyle triviaFinishedText(CupertinoThemeData themeData) =>
TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
fontSize: 16,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
);
static TextStyle triviaFinishedBigText(CupertinoThemeData themeData) =>
TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
themeData.textTheme.textStyle.copyWith(
fontSize: 48,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
);
static TextStyle settingsGroupHeaderText(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle.copyWith(
color: CupertinoColors.inactiveGray,
fontSize: 13.5,
letterSpacing: -0.5,
);
static TextStyle settingsGroupFooterText(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle.copyWith(
color: Styles.settingsGroupSubtitle,
fontSize: 13,
letterSpacing: -0.08,
);
static const appBackground = Color(0xffd0d0d0);
@ -186,22 +129,15 @@ abstract class Styles {
static const closeButtonPressed = Color(0xff808080);
static TextStyle searchText(CupertinoThemeData themeData) => TextStyle(
color: themeData.textTheme.textStyle.color,
fontFamily: 'NotoSans',
static TextStyle searchText(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle.copyWith(
fontSize: 14,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.normal,
);
static TextStyle settingsItemText(CupertinoThemeData themeData) =>
themeData.textTheme.textStyle;
static TextStyle settingsItemSubtitleText(CupertinoThemeData themeData) =>
TextStyle(
themeData.textTheme.textStyle.copyWith(
fontSize: 12,
letterSpacing: -0.2,
color: themeData.textTheme.textStyle.color,
);
static const Color searchCursorColor = Color.fromRGBO(0, 122, 255, 1);

16
experimental/veggieseasons/lib/widgets/settings_group.dart
Unescape View File

@ -28,11 +28,7 @@ class SettingsGroupHeader extends StatelessWidget {
),
child: Text(
title.toUpperCase(),
style: TextStyle(
color: CupertinoColors.inactiveGray,
fontSize: 13.5,
letterSpacing: -0.5,
),
style: Styles.settingsGroupHeaderText(CupertinoTheme.of(context)),
),
);
}
@ -51,14 +47,8 @@ class SettingsGroupFooter extends StatelessWidget {
right: 15,
top: 7.5,
),
child: Text(
title,
style: TextStyle(
color: Styles.settingsGroupSubtitle,
fontSize: 13,
letterSpacing: -0.08,
),
),
child: Text(title,
style: Styles.settingsGroupFooterText(CupertinoTheme.of(context))),
);
}
}

12
experimental/veggieseasons/lib/widgets/settings_item.dart
Unescape View File

@ -134,10 +134,8 @@ class SettingsItemState extends State<SettingsItem> {
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 8.5),
Text(
widget.label,
style: Styles.settingsItemText(themeData),
),
Text(widget.label,
style: themeData.textTheme.textStyle),
SizedBox(height: 4),
Text(
widget.subtitle,
@ -147,10 +145,8 @@ class SettingsItemState extends State<SettingsItem> {
)
: Padding(
padding: EdgeInsets.only(top: 1.5),
child: Text(
widget.label,
style: Styles.settingsItemText(themeData),
),
child: Text(widget.label,
style: themeData.textTheme.textStyle),
),
),
),

20
experimental/veggieseasons/lib/widgets/trivia.dart
Unescape View File

@ -41,7 +41,8 @@ class _TriviaViewState extends State<TriviaView> with RestorationMixin {
Trivia get currentTrivia => veggie.trivia[triviaIndex.value];
/// The current state of the game.
_RestorablePlayerStatus status = _RestorablePlayerStatus(PlayerStatus.readyToAnswer);
_RestorablePlayerStatus status =
_RestorablePlayerStatus(PlayerStatus.readyToAnswer);
@override
String get restorationId => widget.restorationId;
@ -135,25 +136,19 @@ class _TriviaViewState extends State<TriviaView> with RestorationMixin {
style: Styles.triviaFinishedTitleText(themeData),
),
SizedBox(height: 16),
Text(
'You answered',
style: Styles.triviaFinishedText(themeData),
),
Text('You answered', style: themeData.textTheme.textStyle),
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
textBaseline: TextBaseline.alphabetic,
children: [
Text(
'$score',
'${score.value}',
style: Styles.triviaFinishedBigText(themeData),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Text(
' of ',
style: Styles.triviaFinishedText(themeData),
),
child: Text(' of ', style: themeData.textTheme.textStyle),
),
Text(
'${veggie.trivia.length}',
@ -161,10 +156,7 @@ class _TriviaViewState extends State<TriviaView> with RestorationMixin {
),
],
),
Text(
'questions correctly!',
style: Styles.triviaFinishedText(themeData),
),
Text('questions correctly!', style: themeData.textTheme.textStyle),
SizedBox(height: 16),
CupertinoButton(
child: Text('Try Again'),

9
experimental/veggieseasons/lib/widgets/veggie_card.dart
Unescape View File

@ -117,7 +117,8 @@ class VeggieCard extends StatelessWidget {
/// Whether [veggie] falls into one of user's preferred [VeggieCategory]s
final bool isPreferredCategory;
Widget _buildDetails() {
Widget _buildDetails(BuildContext context) {
final themeData = CupertinoTheme.of(context);
return FrostyBackground(
color: Color(0x90ffffff),
child: Padding(
@ -127,11 +128,11 @@ class VeggieCard extends StatelessWidget {
children: <Widget>[
Text(
veggie.name,
style: Styles.cardTitleText,
style: Styles.cardTitleText(themeData),
),
Text(
veggie.shortDescription,
style: Styles.cardDescriptionText,
style: Styles.cardDescriptionText(themeData),
),
],
),
@ -165,7 +166,7 @@ class VeggieCard extends StatelessWidget {
bottom: 0,
left: 0,
right: 0,
child: _buildDetails(),
child: _buildDetails(context),
),
],
),

2
experimental/veggieseasons/lib/widgets/veggie_headline.dart
Unescape View File

@ -97,7 +97,7 @@ class VeggieHeadline extends StatelessWidget {
),
Text(
veggie.shortDescription,
style: Styles.headlineDescription(themeData),
style: themeData.textTheme.textStyle,
),
],
),

Write Preview
Loading…
Cancel
Save