You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
samples/material_3_demo/lib/typography_screen.dart

64 lines
2.2 KiB

// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
class TypographyScreen extends StatelessWidget {
const TypographyScreen({super.key});
@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context)
.textTheme
.apply(displayColor: Theme.of(context).colorScheme.onSurface);
return Expanded(
child: ListView(
children: <Widget>[
Improve color display in M3 Demo (#2438) - Added the color scheme schematic from Material Theme Builder aligning how colors are displayed here and in documentation across Android and Figma. - On desktop, individual colors can be copied to the clipboard - View adapts from the existing single column view to the new schematic at 500dp width. ### Before: <img width="1727" alt="Screenshot 2024-09-12 at 2 40 15 PM" src="https://github.com/user-attachments/assets/37423d79-174a-4691-b0e1-8f18c947550a"> ### After: ![mobile](https://github.com/user-attachments/assets/43a7bfbd-6217-4d3f-a1d6-902c99260905) ![Screenshot_20240912_144150](https://github.com/user-attachments/assets/48df7ad4-44a1-4802-8dac-06006dfb6bb1) ## Pre-launch Checklist - [x] I read the [Flutter Style Guide] _recently_, and have followed its advice. - [x] I signed the [CLA]. - [x] I read the [Contributors Guide]. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-devrel channel on [Discord]. <!-- Links --> [Flutter Style Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md [CLA]: https://cla.developers.google.com/ [Discord]: https://github.com/flutter/flutter/blob/master/docs/contributing/Chat.md [Contributors Guide]: https://github.com/flutter/samples/blob/main/CONTRIBUTING.md --------- Co-authored-by: Eric Windmill <ewindmill@google.com>
3 months ago
const SizedBox(height: 8),
TextStyleExample(
name: 'Display Large', style: textTheme.displayLarge!),
TextStyleExample(
name: 'Display Medium', style: textTheme.displayMedium!),
TextStyleExample(
name: 'Display Small', style: textTheme.displaySmall!),
TextStyleExample(
name: 'Headline Large', style: textTheme.headlineLarge!),
TextStyleExample(
name: 'Headline Medium', style: textTheme.headlineMedium!),
TextStyleExample(
name: 'Headline Small', style: textTheme.headlineSmall!),
TextStyleExample(name: 'Title Large', style: textTheme.titleLarge!),
TextStyleExample(name: 'Title Medium', style: textTheme.titleMedium!),
TextStyleExample(name: 'Title Small', style: textTheme.titleSmall!),
TextStyleExample(name: 'Label Large', style: textTheme.labelLarge!),
TextStyleExample(name: 'Label Medium', style: textTheme.labelMedium!),
TextStyleExample(name: 'Label Small', style: textTheme.labelSmall!),
TextStyleExample(name: 'Body Large', style: textTheme.bodyLarge!),
TextStyleExample(name: 'Body Medium', style: textTheme.bodyMedium!),
TextStyleExample(name: 'Body Small', style: textTheme.bodySmall!),
],
),
);
}
}
class TextStyleExample extends StatelessWidget {
const TextStyleExample({
super.key,
required this.name,
required this.style,
});
final String name;
final TextStyle style;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Text(name, style: style),
);
}
}