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 2 commits
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
26 changes: 16 additions & 10 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,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,
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.

nit: is it needed to explicitly specify the text style? I'd expect the Text widget to inherit the style from the theme.

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.

Perhaps I've done something wrong in assigning the theme to the whole app, but removing the style makes the text black regardless of the IOS brightness.

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.

Does it work if you wrap the DetailsScreen widget in a DefaultTextStyle(style: CupertinoTheme.of(context).textTheme.textStyle) widget? Anyways not a big deal it just makes the code a little bit more verbose.

textAlign: TextAlign.end,
style: Styles.detailsServingValueText(themeData),
);
},
);
Expand All @@ -54,7 +53,7 @@ class ServingInfoChart extends StatelessWidget {
),
child: Text(
'Serving info',
style: Styles.detailsServingHeaderText,
style: CupertinoTheme.of(context).textTheme.textStyle,
),
),
),
Expand All @@ -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,
),
),
],
Expand All @@ -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),
),
),
],
Expand Down Expand Up @@ -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,
);
},
),
Expand All @@ -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),
Expand Down Expand Up @@ -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,
);
}
Expand Down Expand Up @@ -324,8 +324,14 @@ class _DetailsScreenState extends State<DetailsScreen> with RestorationMixin {
SizedBox(height: 20),
CupertinoSegmentedControl<int>(
children: {
0: Text('Facts & Info'),
1: Text('Trivia'),
0: Text(
'Facts & Info',
),
//style: CupertinoTheme.of(context).textTheme.textStyle),
1: Text(
'Trivia',
)
//style: CupertinoTheme.of(context).textTheme.textStyle),
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.

I vaguely remember CupertinoSegmentedControl doesn't work well with dark mode, because the UI component no longer exists on iOS 13 and above.

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.

Seems okay on IOS 13.1.
Blue background with black letters for selected. Black background with blue letters for unselected.
Have not applied any styling to the its children.
Not sure what it's supposed to look like.

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.

On iOS 13+ UISegmentedControls have a different look so I'm not sure either what it is supposed to look like. I'm okay with this since there's no actual code change (could you remove the lines that are commented out?)

},
groupValue: _selectedViewIndex.value,
onValueChanged: (value) {
Expand Down
4 changes: 1 addition & 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,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(
Expand Down
5 changes: 3 additions & 2 deletions experimental/veggieseasons/lib/screens/list.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@ class ListScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
final themeData = CupertinoTheme.of(context);
return CupertinoTabView(
restorationScopeId: restorationId,
builder: (context) {
var dateString = DateFormat('MMMM y').format(DateTime.now());

final appState = Provider.of<AppState>(context);
final prefs = Provider.of<Preferences>(context);
final themeData = CupertinoTheme.of(context);
return SafeArea(
bottom: false,
child: ListView.builder(
Expand All @@ -52,7 +52,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
3 changes: 1 addition & 2 deletions experimental/veggieseasons/lib/screens/search.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/search_bar.dart';
import 'package:veggieseasons/widgets/veggie_headline.dart';

Expand Down Expand Up @@ -63,7 +62,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,
),
),
);
Expand Down
Loading