Skip to content

Commit ac20b9a

Browse files
committed
ui [nfc]: Define app-bar title text style all in one place
Much like we did in b75908b for ContentTheme.textStylePlainParagraph, this is meant to collect all the details that had been implicitly defining the app-bar title style, from various sources: - [_M3Typography.englishLike] or [_M3Typography.dense] (the latter for Japanese) - [Typography.blackCupertino] or [Typography.blackMountainView] (depending on platform) - `zulipTypography` in lib/widgets/text.dart - [ColorScheme.onSurface] , make them explicit, and make it clear that this doesn't inherit from anything. (Unlike in b75908b, this handles the wrinkle of giving the appropriate textBaseline for our Japanese support. See a recent commit that added localizedTextBaseline.) If we were defining this within the scope of the global `ThemeData`, rather than outside it (to add to it), we might instead have aliased the details like so: final theme = Theme.of(context); theme.textTheme.titleLarge! .apply(color: theme.colorScheme.onSurface); , which is much simpler; oh, well. That `textTheme` is the result of complicated computations based on Typography in [Theme.of], and [Theme.of] only works when you're below the right [Theme] in the widget tree. Next, we'll change the `color`, `fontSize`, and `height` to align with the Figma. (We couldn't have just passed a `TextStyle` with those three fields by themselves, even with `inherit: true`. If you give AppBar a TextStyle for the title like this, it just takes it literally, in place of the default style that applies when you don't give the TextStyle.)
1 parent d9ab49b commit ac20b9a

File tree

2 files changed

+21
-6
lines changed

2 files changed

+21
-6
lines changed

lib/widgets/text.dart

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@ import 'package:flutter/material.dart';
1212
/// an [AppBar]'s title, of an [ElevatedButton]'s label, and so on.
1313
///
1414
/// As of writing, it turns out that these styles also flow naturally into
15-
/// most of our own widgets' text styles.
15+
/// many of our own widgets' text styles.
1616
/// We often see this in the child of a [Material], for example,
1717
/// since by default [Material] applies an [AnimatedDefaultTextStyle]
1818
/// with the [TextTheme.bodyMedium] that gets its value from here.
19-
/// A notable exception is the base style for message content.
20-
/// That style is self-contained and is not meant to inherit from this;
19+
/// There are exceptions, having `inherit: false`, that are self-contained
20+
/// and not meant to inherit from this.
21+
/// For example, the base style for message content;
2122
/// see [ContentTheme.textStylePlainParagraph].
2223
///
2324
/// Applies [kDefaultFontFamily] and [kDefaultFontFamilyFallback],

lib/widgets/theme.dart

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,30 @@ ThemeData zulipThemeData(BuildContext context) {
77
return ThemeData(
88
typography: zulipTypography(context),
99
extensions: [ContentTheme(context)],
10-
appBarTheme: const AppBarTheme(
10+
appBarTheme: AppBarTheme(
1111
// Set these two fields to prevent a color change in [AppBar]s when
1212
// there is something scrolled under it. If an app bar hasn't been
1313
// given a backgroundColor directly or by theme, it uses
1414
// ColorScheme.surfaceContainer for the scrolled-under state and
1515
// ColorScheme.surface otherwise, and those are different colors.
1616
scrolledUnderElevation: 0,
17-
backgroundColor: Color(0xfff5f5f5), // `bg-top-bar` in Figma
17+
backgroundColor: const Color(0xfff5f5f5), // `bg-top-bar` in Figma
1818

19-
shape: Border(bottom: BorderSide(
19+
titleTextStyle: TextStyle(
20+
inherit: false,
21+
color: const Color(0xff1a1b21), // colorScheme.onSurface
22+
fontSize: 22.0,
23+
letterSpacing: 0.0,
24+
height: 1.27,
25+
textBaseline: localizedTextBaseline(context),
26+
leadingDistribution: TextLeadingDistribution.even,
27+
decoration: TextDecoration.none,
28+
fontFamily: kDefaultFontFamily,
29+
fontFamilyFallback: defaultFontFamilyFallback,
30+
)
31+
.merge(weightVariableTextStyle(context)),
32+
33+
shape: const Border(bottom: BorderSide(
2034
color: Color(0x33000000), // `border-bar` in Figma
2135
strokeAlign: BorderSide.strokeAlignInside, // (default restated for explicitness)
2236
)),

0 commit comments

Comments
 (0)