Skip to content

Styling revamp using CupertinoThemeData and CupertinoTextThemeData #593

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 2, 2020
Merged

Styling revamp using CupertinoThemeData and CupertinoTextThemeData #593

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d9da034
Styling revamp using CupertinoThemeData and CupertinoTextThemeData to…
ADVavvas Nov 12, 2020
bf79045
Added TextStyle to all texts
ADVavvas Nov 15, 2020
5e39732
Removed comments. Changed trivia score text. Fixed In Season text bug
ADVavvas Nov 19, 2020
d6307ad
Removed unnecessary imports. Added AnnotatedRegions to search and lis…
ADVavvas Nov 21, 2020
9c564ad
Changed AnnotatedRegion value to platformBrightness
ADVavvas Nov 23, 2020
70b661c
Changed AnnotatedRegion value to platformBrightness (MediaQuery.platf…
ADVavvas Nov 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions experimental/veggieseasons/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -58,6 +59,7 @@ class _VeggieAppState extends State<VeggieApp> with RestorationMixin {
),
],
child: CupertinoApp(
theme: Styles.veggieThemeData,
debugShowCheckedModeBanner: false,
home: HomeScreen(restorationId: 'home'),
restorationScopeId: 'app',
Expand Down
11 changes: 3 additions & 8 deletions experimental/veggieseasons/lib/screens/details.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,10 @@ 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',
textAlign: TextAlign.end,
style: Styles.detailsServingValueText(themeData),
);
},
);
Expand All @@ -54,7 +52,6 @@ class ServingInfoChart extends StatelessWidget {
),
child: Text(
'Serving info',
style: Styles.detailsServingHeaderText,
),
),
),
Expand All @@ -79,7 +76,6 @@ class ServingInfoChart extends StatelessWidget {
child: Text(
veggie.servingSize,
textAlign: TextAlign.end,
style: Styles.detailsServingValueText(themeData),
),
),
],
Expand All @@ -96,7 +92,6 @@ class ServingInfoChart extends StatelessWidget {
child: Text(
'${veggie.caloriesPerServing} kCal',
textAlign: TextAlign.end,
style: Styles.detailsServingValueText(themeData),
),
),
],
Expand Down Expand Up @@ -184,7 +179,7 @@ class InfoView extends StatelessWidget {
style: (snapshot.hasData &&
snapshot.data.contains(veggie.category))
? Styles.detailsPreferredCategoryText(themeData)
: Styles.detailsCategoryText(themeData),
: themeData.textTheme.textStyle,
);
},
),
Expand All @@ -210,7 +205,6 @@ class InfoView extends StatelessWidget {
SizedBox(height: 8),
Text(
veggie.shortDescription,
style: Styles.detailsDescriptionText(themeData),
),
ServingInfoChart(veggie, prefs),
SizedBox(height: 24),
Expand Down Expand Up @@ -249,7 +243,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,
);
}
Expand Down
3 changes: 0 additions & 3 deletions experimental/veggieseasons/lib/screens/favorites.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -32,8 +31,6 @@ 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)),
),
)
: ListView(
Expand Down
4 changes: 3 additions & 1 deletion experimental/veggieseasons/lib/screens/list.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ class ListScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
final themeData = CupertinoTheme.of(context);
return CupertinoTabView(
restorationScopeId: restorationId,
builder: (context) {
Expand All @@ -52,7 +53,8 @@ class ListScreen extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(dateString.toUpperCase(), style: Styles.minorText),
Text(dateString.toUpperCase(),
style: Styles.minorText(themeData)),
Text('In season today',
style: Styles.headlineText(themeData)),
],
Expand Down
1 change: 0 additions & 1 deletion experimental/veggieseasons/lib/screens/search.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@ 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)),
),
),
);
Expand Down
182 changes: 52 additions & 130 deletions experimental/veggieseasons/lib/styles.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,171 +3,100 @@
// found in the LICENSE file.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
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(
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),
Copy link

@LongCatIsLooong LongCatIsLooong Nov 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like we're using a regular color. Is "minorText" supposed to use the same color when you switch from light mode to dark mode? Same with "cardTitleText" and "cardCategoryText", etc,.

Copy link
Contributor Author

@ADVavvas ADVavvas Nov 19, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minorText is used for the date in the Home Screen. It looks okay with both themes since it's grey.

The cards are all white with black text, which also works fine since they have a picture (and shadows).
I haven't changed any of these values. I assume it was intentional.

Copy link

@LongCatIsLooong LongCatIsLooong Nov 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. The cards all have very bright backgrounds because of the images they used. Make sense to opt-out of dark mode on the cards.

);

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 const appBackground = Color(0xffd0d0d0);
Expand All @@ -186,22 +115,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);
Expand Down
2 changes: 0 additions & 2 deletions experimental/veggieseasons/lib/widgets/settings_item.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,6 @@ class SettingsItemState extends State<SettingsItem> {
SizedBox(height: 8.5),
Text(
widget.label,
style: Styles.settingsItemText(themeData),
),
SizedBox(height: 4),
Text(
Expand All @@ -149,7 +148,6 @@ class SettingsItemState extends State<SettingsItem> {
padding: EdgeInsets.only(top: 1.5),
child: Text(
widget.label,
style: Styles.settingsItemText(themeData),
),
),
),
Expand Down
Loading