m3e_typography 0.0.1

Material 3 Expressive Emphasized Typography scale and variable font extensions for Flutter.

example/lib/main.dart

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:m3e_typography/m3e_typography.dart';
import 'screens/m3e_typography_screen.dart';

void main() {
  runApp(const MyApp());
}

final ValueNotifier<ThemeMode> themeNotifier = ValueNotifier(ThemeMode.system);
final ValueNotifier<Color> seedColorNotifier = ValueNotifier(Colors.deepPurple);

class DesktopScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    PointerDeviceKind.trackpad,
    PointerDeviceKind.stylus,
  };
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
      valueListenable: themeNotifier,
      builder: (context, currentMode, _) {
        return ValueListenableBuilder<Color>(
          valueListenable: seedColorNotifier,
          builder: (context, seedColor, _) {
            final lightColorScheme = ColorScheme.fromSeed(
              seedColor: seedColor,
              brightness: Brightness.light,
            );
            final darkColorScheme = ColorScheme.fromSeed(
              seedColor: seedColor,
              brightness: Brightness.dark,
            );

            return MaterialApp(
              title: 'M3E Typography Example',
              scrollBehavior: DesktopScrollBehavior(),
              debugShowCheckedModeBanner: false,
              themeMode: currentMode,
              theme: ThemeData(
                useMaterial3: true,
                colorScheme: lightColorScheme,
                fontFamily: 'GoogleSansFlex',
                textTheme: ThemeData(
                  useMaterial3: true,
                  colorScheme: lightColorScheme,
                ).textTheme.emphasized,
              ),
              darkTheme: ThemeData(
                useMaterial3: true,
                colorScheme: darkColorScheme,
                fontFamily: 'GoogleSansFlex',
                textTheme: ThemeData(
                  useMaterial3: true,
                  colorScheme: darkColorScheme,
                ).textTheme.emphasized,
              ),
              home: const M3ETypographyScreen(),
            );
          },
        );
      },
    );
  }
}