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 all 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
24 changes: 14 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

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

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

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,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) {
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
80 changes: 43 additions & 37 deletions experimental/veggieseasons/lib/screens/list.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
}
},
),
),
);
},
Expand Down
26 changes: 15 additions & 11 deletions experimental/veggieseasons/lib/screens/search.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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,
),
),
);
Expand Down Expand Up @@ -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(),
],
),
));
},
),
);
Expand Down
Loading