Styling revamp using CupertinoThemeData and CupertinoTextThemeData (#593)

2025-11-08 13:58:47 +00:00 · 2020-12-02 09:04:33 +02:00
parent 1d33b3dcf7
commit 7c5fecbceb
11 changed files with 167 additions and 238 deletions
--- a/experimental/veggieseasons/lib/main.dart
+++ b/experimental/veggieseasons/lib/main.dart
@@ -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',
--- a/experimental/veggieseasons/lib/screens/details.dart
+++ b/experimental/veggieseasons/lib/screens/details.dart
@@ -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) {
--- a/experimental/veggieseasons/lib/screens/favorites.dart
+++ b/experimental/veggieseasons/lib/screens/favorites.dart
@@ -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(
--- a/experimental/veggieseasons/lib/screens/list.dart
+++ b/experimental/veggieseasons/lib/screens/list.dart
@@ -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);
+                }
+              },
+            ),
          ),
        );
      },
--- a/experimental/veggieseasons/lib/screens/search.dart
+++ b/experimental/veggieseasons/lib/screens/search.dart
@@ -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(),
+                  ],
+                ),
+              ));
        },
      ),
    );
--- a/experimental/veggieseasons/lib/styles.dart
+++ b/experimental/veggieseasons/lib/styles.dart
@@ -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,
-        fontFamily: 'NotoSans',
-        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 headlineName(CupertinoThemeData themeData) => TextStyle(
-        color: themeData.textTheme.textStyle.color,
-        fontFamily: 'NotoSans',
-        fontSize: 24,
-        fontStyle: FontStyle.normal,
-        fontWeight: FontWeight.bold,
-      );
-
-  static TextStyle headlineDescription(CupertinoThemeData themeData) =>
-      TextStyle(
-        color: themeData.textTheme.textStyle.color,
-        fontFamily: 'NotoSans',
+  static CupertinoThemeData veggieThemeData = CupertinoThemeData(
+    textTheme: CupertinoTextThemeData(
+      textStyle: TextStyle(
+        color: CupertinoColors.label,
        fontSize: 16,
-        fontStyle: FontStyle.normal,
        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,
+        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 TextStyle minorText(CupertinoThemeData themeData) =>
+      themeData.textTheme.textStyle.copyWith(
+        color: Color.fromRGBO(128, 128, 128, 1),
+      );

-  static const cardCategoryText = TextStyle(
-    color: Color.fromRGBO(255, 255, 255, 0.9),
-    fontFamily: 'NotoSans',
-    fontSize: 16,
-    fontStyle: FontStyle.normal,
-    fontWeight: FontWeight.normal,
-  );
+  static TextStyle headlineName(CupertinoThemeData themeData) =>
+      themeData.textTheme.textStyle.copyWith(
+        fontSize: 24,
+        fontWeight: FontWeight.bold,
+      );

-  static const cardDescriptionText = TextStyle(
-    color: Color.fromRGBO(0, 0, 0, 0.9),
-    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 TextStyle detailsTitleText(CupertinoThemeData themeData) => TextStyle(
-        color: themeData.textTheme.textStyle.color,
-        fontFamily: 'NotoSans',
+  static TextStyle cardCategoryText(CupertinoThemeData themeData) =>
+      themeData.textTheme.textStyle.copyWith(
+        color: Color.fromRGBO(255, 255, 255, 0.9),
+      );
+
+  static TextStyle cardDescriptionText(CupertinoThemeData themeData) =>
+      themeData.textTheme.textStyle.copyWith(
+        color: Color.fromRGBO(0, 0, 0, 0.9),
+      );
+
+  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);
--- a/experimental/veggieseasons/lib/widgets/settings_group.dart
+++ b/experimental/veggieseasons/lib/widgets/settings_group.dart
@@ -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))),
    );
  }
 }
--- a/experimental/veggieseasons/lib/widgets/settings_item.dart
+++ b/experimental/veggieseasons/lib/widgets/settings_item.dart
@@ -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),
                        ),
                ),
              ),
--- a/experimental/veggieseasons/lib/widgets/trivia.dart
+++ b/experimental/veggieseasons/lib/widgets/trivia.dart
@@ -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'),
--- a/experimental/veggieseasons/lib/widgets/veggie_card.dart
+++ b/experimental/veggieseasons/lib/widgets/veggie_card.dart
@@ -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),
          ),
        ],
      ),
--- a/experimental/veggieseasons/lib/widgets/veggie_headline.dart
+++ b/experimental/veggieseasons/lib/widgets/veggie_headline.dart
@@ -97,7 +97,7 @@ class VeggieHeadline extends StatelessWidget {
                ),
                Text(
                  veggie.shortDescription,
-                  style: Styles.headlineDescription(themeData),
+                  style: themeData.textTheme.textStyle,
                ),
              ],
            ),