Skip to content

[material_ui] Migrate AppBar M3 template to use new gen_defaults script #12122

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

Draft
QuncCccccc wants to merge 1 commit into
base: m3e_migration
Choose a base branch
from
Draft

[material_ui] Migrate AppBar M3 template to use new gen_defaults script #12122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
111 changes: 2 additions & 109 deletions packages/material_ui/lib/src/app_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ import 'tabs.dart';
import 'text_theme.dart';
import 'theme.dart';

part 'generated/app_bar_m3_defaults.g.dart';

// Examples can assume:
// late String _logoAsset;
// double _myToolbarHeight = 250.0;
Expand Down Expand Up @@ -2509,112 +2511,3 @@ class _AppBarDefaultsM2 extends AppBarThemeData {
@override
EdgeInsets? get actionsPadding => EdgeInsets.zero;
}

// BEGIN GENERATED TOKEN PROPERTIES - AppBar

// Do not edit by hand. The code between the "BEGIN GENERATED" and
// "END GENERATED" comments are generated from data in the Material
// Design token database by the script:
// dev/tools/gen_defaults/bin/gen_defaults.dart.

// dart format off
class _AppBarDefaultsM3 extends AppBarThemeData {
_AppBarDefaultsM3(this.context)
: super(
elevation: 0.0,
scrolledUnderElevation: 3.0,
titleSpacing: NavigationToolbar.kMiddleSpacing,
toolbarHeight: 64.0,
);

final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
late final TextTheme _textTheme = _theme.textTheme;

@override
Color? get backgroundColor => _colors.surface;

@override
Color? get foregroundColor => _colors.onSurface;

@override
Color? get shadowColor => Colors.transparent;

@override
Color? get surfaceTintColor => Colors.transparent;

@override
IconThemeData? get iconTheme => IconThemeData(
color: _colors.onSurface,
size: 24.0,
);

@override
IconThemeData? get actionsIconTheme => IconThemeData(
color: _colors.onSurfaceVariant,
size: 24.0,
);

@override
TextStyle? get toolbarTextStyle => _textTheme.bodyMedium;

@override
TextStyle? get titleTextStyle => _textTheme.titleLarge;

// TODO(Craftplacer): Consider using EdgeInsets.only(right: 8.0) instead of
// EdgeInsets.zero for Material 3 in the future,
// https://github.com/flutter/flutter/issues/155747
@override
EdgeInsets? get actionsPadding => EdgeInsets.zero;
}

// Variant configuration
class _MediumScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {
_MediumScrollUnderFlexibleConfig(this.context);

final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
late final TextTheme _textTheme = _theme.textTheme;

static const double collapsedHeight = 64.0;
static const double expandedHeight = 112.0;

@override
TextStyle? get collapsedTextStyle =>
_textTheme.titleLarge?.apply(color: _colors.onSurface);

@override
TextStyle? get expandedTextStyle =>
_textTheme.headlineSmall?.apply(color: _colors.onSurface);

@override
EdgeInsetsGeometry get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 20);
}

class _LargeScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {
_LargeScrollUnderFlexibleConfig(this.context);

final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
late final TextTheme _textTheme = _theme.textTheme;

static const double collapsedHeight = 64.0;
static const double expandedHeight = 152.0;

@override
TextStyle? get collapsedTextStyle =>
_textTheme.titleLarge?.apply(color: _colors.onSurface);

@override
TextStyle? get expandedTextStyle =>
_textTheme.headlineMedium?.apply(color: _colors.onSurface);

@override
EdgeInsetsGeometry get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 28);
}
// dart format on

// END GENERATED TOKEN PROPERTIES - AppBar
96 changes: 96 additions & 0 deletions packages/material_ui/lib/src/generated/app_bar_m3_defaults.g.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
// Copyright 2013 The Flutter Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// Do not edit by hand. The code is generated from data in the Material
// Design token database by the script:
// packages/material_ui/tool/gen_defaults/bin/gen_defaults.dart.
part of '../app_bar.dart';

class _AppBarDefaultsM3 extends AppBarThemeData {
_AppBarDefaultsM3(this.context)
: super(
elevation: 0.0,
scrolledUnderElevation: 3.0,
titleSpacing: NavigationToolbar.kMiddleSpacing,
toolbarHeight: 64.0,
);

final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
late final TextTheme _textTheme = _theme.textTheme;

@override
Color? get backgroundColor => _colors.surface;

@override
Color? get foregroundColor => _colors.onSurface;

@override
Color? get shadowColor => Colors.transparent;

@override
Color? get surfaceTintColor => Colors.transparent;

@override
IconThemeData? get iconTheme => IconThemeData(color: _colors.onSurface, size: 24.0);

@override
IconThemeData? get actionsIconTheme => IconThemeData(color: _colors.onSurfaceVariant, size: 24.0);

@override
TextStyle? get toolbarTextStyle => _textTheme.bodyMedium;

@override
TextStyle? get titleTextStyle => _textTheme.titleLarge;

// TODO(Craftplacer): Consider using EdgeInsets.only(right: 8.0) instead of
// EdgeInsets.zero for Material 3 in the future,
// https://github.com/flutter/flutter/issues/155747
@override
EdgeInsets? get actionsPadding => EdgeInsets.zero;
}

// Variant configuration
class _MediumScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {
_MediumScrollUnderFlexibleConfig(this.context);

final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
late final TextTheme _textTheme = _theme.textTheme;

static const double collapsedHeight = 64.0;
static const double expandedHeight = 112.0;

@override
TextStyle? get collapsedTextStyle => _textTheme.titleLarge?.apply(color: _colors.onSurface);

@override
TextStyle? get expandedTextStyle => _textTheme.headlineSmall?.apply(color: _colors.onSurface);

@override
EdgeInsetsGeometry get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 20);
}

class _LargeScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {
_LargeScrollUnderFlexibleConfig(this.context);

final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
late final TextTheme _textTheme = _theme.textTheme;

static const double collapsedHeight = 64.0;
static const double expandedHeight = 152.0;

@override
TextStyle? get collapsedTextStyle => _textTheme.titleLarge?.apply(color: _colors.onSurface);

@override
TextStyle? get expandedTextStyle => _textTheme.headlineMedium?.apply(color: _colors.onSurface);

@override
EdgeInsetsGeometry get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 28);
}
6 changes: 2 additions & 4 deletions packages/material_ui/tool/gen_defaults/bin/gen_defaults.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@

import 'package:args/args.dart';

// TODO(elliette): Import template files.
// import '../templates/x_template.dart';
import '../templates/app_bar_template.dart';

Future<void> main(List<String> args) async {
// Parse arguments
Expand All @@ -23,6 +22,5 @@ Future<void> main(List<String> args) async {
// TODO(elliette): Add token logger when verbose flag is used.
// ignore: unused_local_variable
final verbose = argResults['verbose'] as bool;
// TODO(elliette): Invoke template generators.
// const XTemplate().generateFile(verbose: verbose);
const AppBarTemplate().generateFile(verbose: verbose);
}
121 changes: 121 additions & 0 deletions packages/material_ui/tool/gen_defaults/templates/app_bar_template.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
// Copyright 2013 The Flutter Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import '../data/app_bar.dart';
import '../data/app_bar_large.dart';
import '../data/app_bar_medium.dart';
import '../data/app_bar_small.dart';
import 'template.dart';

class AppBarTemplate extends M3TokenTemplate {
const AppBarTemplate();

@override
String get name => 'App Bar';

@override
String get parentFilePath => 'app_bar.dart';

@override
String generateContents(String className) =>
'''
class $className extends AppBarThemeData {
$className(this.context)
: super(
elevation: ${number(TokenAppBar.containerElevation)},
scrolledUnderElevation: ${number(TokenAppBar.onScrollContainerElevation)},
titleSpacing: NavigationToolbar.kMiddleSpacing,
toolbarHeight: ${number(TokenAppBarSmall.containerHeight)},
);

final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
late final TextTheme _textTheme = _theme.textTheme;

@override
Color? get backgroundColor => ${color(TokenAppBar.containerColor, '_colors')};

@override
Color? get foregroundColor => ${color(TokenAppBar.titleColor, '_colors')};

@override
Color? get shadowColor => Colors.transparent;

@override
Color? get surfaceTintColor => Colors.transparent;

@override
IconThemeData? get iconTheme => IconThemeData(
color: ${color(TokenAppBar.leadingIconColor, '_colors')},
size: ${number(TokenAppBar.iconSize)},
);

@override
IconThemeData? get actionsIconTheme => IconThemeData(
color: ${color(TokenAppBar.trailingIconColor, '_colors')},
size: ${number(TokenAppBar.iconSize)},
);

@override
TextStyle? get toolbarTextStyle => _textTheme.bodyMedium;

@override
TextStyle? get titleTextStyle => _textTheme.titleLarge;

// TODO(Craftplacer): Consider using EdgeInsets.only(right: 8.0) instead of
// EdgeInsets.zero for Material 3 in the future,
// https://github.com/flutter/flutter/issues/155747
@override
EdgeInsets? get actionsPadding => EdgeInsets.zero;
}

// Variant configuration
class _MediumScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {
_MediumScrollUnderFlexibleConfig(this.context);

final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
late final TextTheme _textTheme = _theme.textTheme;

static const double collapsedHeight = ${number(TokenAppBarSmall.containerHeight)};
static const double expandedHeight = ${number(TokenAppBarMedium.containerHeight)};

@override
TextStyle? get collapsedTextStyle =>
_textTheme.titleLarge?.apply(color: ${color(TokenAppBar.titleColor, '_colors')});

@override
TextStyle? get expandedTextStyle =>
_textTheme.headlineSmall?.apply(color: ${color(TokenAppBar.titleColor, '_colors')});

@override
EdgeInsetsGeometry get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 20);
}

class _LargeScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {
_LargeScrollUnderFlexibleConfig(this.context);

final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
late final TextTheme _textTheme = _theme.textTheme;

static const double collapsedHeight = ${number(TokenAppBarSmall.containerHeight)};
static const double expandedHeight = ${number(TokenAppBarLarge.containerHeight)};

@override
TextStyle? get collapsedTextStyle =>
_textTheme.titleLarge?.apply(color: ${color(TokenAppBar.titleColor, '_colors')});

@override
TextStyle? get expandedTextStyle =>
_textTheme.headlineMedium?.apply(color: ${color(TokenAppBar.titleColor, '_colors')});

@override
EdgeInsetsGeometry get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 28);
}
''';
}
13 changes: 13 additions & 0 deletions packages/material_ui/tool/gen_defaults/test/gen_defaults_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import 'dart:io';

import 'package:test/test.dart';
import '../templates/app_bar_template.dart';
import '../templates/template.dart';
import 'test_fixtures/test_templates.dart';

Expand Down Expand Up @@ -66,6 +67,18 @@ void main() {
});
}

test('AppBarTemplate emits M3 AppBar defaults from app bar tokens', () {
final String contents = const AppBarTemplate().generateContents('_AppBarDefaultsM3');
expect(contents, contains('class _AppBarDefaultsM3 extends AppBarThemeData'));
expect(contents, contains('scrolledUnderElevation: 3.0'));
expect(contents, contains('toolbarHeight: 64.0'));
expect(contents, contains('Color? get backgroundColor => _colors.surface'));
expect(contents, contains('Color? get foregroundColor => _colors.onSurface'));
expect(contents, contains('color: _colors.onSurfaceVariant'));
expect(contents, contains('static const double expandedHeight = 112.0'));
expect(contents, contains('static const double expandedHeight = 152.0'));
});

test('will run dart format over the generated file', () {
final template = UnformattedTemplate(testPath());
template.generateFile();
Expand Down