Apply Color scheme
1. Create the color scheme and export it using the theme builder.
https://m3.material.io/theme-builder
For collaborating with UI designers, it can be generated from Figma as well:
https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder
https://www.figma.com/community/file/1035203688168086460
The web version of the theme builder creates the color_schemes.g.dart file with an example(main.g.dart).
Copy the color_schemes.g.dart file into the project.
2. Set the theme with the MaterialApp()
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(useMaterial3: true, colorScheme: lightColorScheme),
darkTheme: ThemeData(useMaterial3: true, colorScheme: darkColorScheme),
themeMode: ThemeMode.light, // Default is system
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
The themeMode is the system by default. Change and verify if the colors are good.
Apply typography
1. Create a typography file
// Example typography.dart file
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
final textTheme = TextTheme(
displayLarge: GoogleFonts.inter(
fontWeight: FontWeight.w400,
fontSize: 57,
height: 64 / 57,
letterSpacing: -0.25,
),
displayMedium: GoogleFonts.inter(
fontWeight: FontWeight.w400,
fontSize: 45,
height: 52 / 45,
),
displaySmall: GoogleFonts.inter(
fontWeight: FontWeight.w400,
fontSize: 36,
height: 44 / 36,
),
headlineLarge: GoogleFonts.inter(
fontWeight: FontWeight.w400,
fontSize: 32,
height: 40 / 32,
),
headlineMedium: GoogleFonts.inter(
fontWeight: FontWeight.w400,
fontSize: 28,
height: 36 / 28,
),
headlineSmall: GoogleFonts.inter(
fontWeight: FontWeight.w400,
fontSize: 24,
height: 32 / 24,
),
titleLarge: GoogleFonts.inter(
fontWeight: FontWeight.w700,
fontSize: 22,
height: 28 / 22,
),
titleMedium: GoogleFonts.inter(
fontWeight: FontWeight.w600,
fontSize: 16,
height: 24 / 16,
letterSpacing: 0.1,
),
titleSmall: GoogleFonts.inter(
fontWeight: FontWeight.w600,
fontSize: 14,
height: 20 / 14,
letterSpacing: 0.1,
),
labelLarge: GoogleFonts.inter(
fontWeight: FontWeight.w700,
fontSize: 14,
height: 20 / 14,
),
labelMedium: GoogleFonts.inter(
fontWeight: FontWeight.w700,
fontSize: 12,
height: 16 / 12,
),
labelSmall: GoogleFonts.inter(
fontWeight: FontWeight.w700,
fontSize: 11,
height: 16 / 11,
),
bodyLarge: GoogleFonts.inter(
fontWeight: FontWeight.w400,
fontSize: 16,
height: 24 / 16,
),
bodyMedium: GoogleFonts.inter(
fontWeight: FontWeight.w400,
fontSize: 14,
height: 20 / 14,
),
bodySmall: GoogleFonts.inter(
fontWeight: FontWeight.w400,
fontSize: 12,
height: 16 / 12,
),
);
In the example, I used GoogleFont. Should you wish to use the google font, add the package.
flutter pub add google_fonts
Adjust the values according to the design.
2. Apply the typography to MaterialApp (textTheme)
theme: ThemeData(
useMaterial3: true,
colorScheme: lightColorScheme,
textTheme: textTheme,
),
darkTheme: ThemeData(
useMaterial3: true,
colorScheme: darkColorScheme,
textTheme: textTheme,
),
How to use the theme in your widgets
By default, everything should be set with the theme we defined. You can use these methods if you need to override them for some widgets.
// Method 1 - Read from the context and apply
final color = Theme.of(context).colorScheme.primary;
Container(color: color);
// Method 2 - Wrap the widget with the Theme
Theme(
data: Theme.of(context).copyWith(
textTheme: Theme.of(context)
.textTheme
.apply(displayColor: Colors.white, bodyColor: Colors.white),
),
child: Widget(),
)
Never hard code colors or text styles.
The complete code can be found on github
Top comments (0)