Themes & Styling
- Introduction
- Themes
- Configuration
- Text Extensions
Introduction
You can manage your application's UI styles using themes. Themes allow us to change i.e. the font size of text, how buttons appear and the general appearance of our application.
If you are new to themes, the examples on the Flutter website will help you get started here.
Out of the box, Nylo includes pre-configured themes for Light mode
and Dark mode
.
The theme will also update if the device enters 'light/dark' mode.
Light & Dark themes
- Light theme -
lib/resources/themes/light_theme.dart
- Dark theme -
lib/resources/themes/dark_theme.dart
Inside these files, you'll find the ThemeData and ThemeStyle pre-defined.
Creating a theme
If you want to have multiple themes for your app, we have an easy way for you to do this. If you're new to themes, follow along.
First, run the below command from the terminal
dart run nylo_framework:main make:theme bright_theme
# or with metro alias
metro make:theme bright_theme
Note: replace bright_theme with the name of your new theme.
This creates a new theme in your /resources/themes/
directory and also a theme colors file in /resources/themes/styles/
.
// App Themes
final List<BaseThemeConfig<ColorStyles>> appThemes = [
BaseThemeConfig<ColorStyles>(
id: getEnv('LIGHT_THEME_ID'),
description: "Light theme",
theme: lightTheme,
colors: LightThemeColors(),
),
BaseThemeConfig<ColorStyles>(
id: getEnv('DARK_THEME_ID'),
description: "Dark theme",
theme: darkTheme,
colors: DarkThemeColors(),
),
BaseThemeConfig<ColorStyles>( // new theme automatically added
id: 'Bright Theme',
description: "Bright Theme",
theme: brightTheme,
colors: BrightThemeColors(),
),
];
You can modify the colors for your new theme in the /resources/themes/styles/bright_theme_colors.dart file.
Theme Colors
To manage the theme colors in your project, check out the lib/resources/themes/styles
directory.
This directory contains the style colors for the light_theme_colors.dart and dark_theme_colors.dart.
In this file, you should have something similar to the below.
// e.g Light Theme colors
class LightThemeColors implements ColorStyles {
// general
Color get background => const Color(0xFFFFFFFF);
Color get primaryContent => const Color(0xFF000000);
Color get primaryAccent => const Color(0xFF87c694);
Color get surfaceBackground => Colors.white;
Color get surfaceContent => Colors.black;
// app bar
Color get appBarBackground => Colors.blue;
Color get appBarPrimaryContent => Colors.white;
// buttons
Color get buttonBackground => Colors.blueAccent;
Color get buttonPrimaryContent => Colors.white;
// bottom tab bar
Color get bottomTabBarBackground => Colors.white;
// bottom tab bar - icons
Color get bottomTabBarIconSelected => Colors.blue;
Color get bottomTabBarIconUnselected => Colors.black54;
// bottom tab bar - label
Color get bottomTabBarLabelUnselected => Colors.black45;
Color get bottomTabBarLabelSelected => Colors.black;
}
Using colors in widgets
import 'package:flutter_app/config/theme.dart';
...
// gets the light/dark background colour depending on the theme
ThemeColor.get(context).background
// e.g. of using the "ThemeColor" class
Text(
"Hello World",
style: TextStyle(
color: ThemeColor.get(context).primaryContent // Color - primary content
),
),
// or
Text(
"Hello World",
style: TextStyle(
color: ThemeConfig.light().colors.primaryContent // Light theme colors - primary content
),
),
Base styles
Base styles allow you to customize various widget colors from one area in your code.
Nylo ships with pre-configured base styles for your project located lib/resources/themes/styles/color_styles.dart
.
These styles provide an interface for your theme colors in light_theme_colors.dart
and dart_theme_colors.dart
.
File lib/resources/themes/styles/color_styles.dart
abstract class ColorStyles {
// general
Color get background;
Color get primaryContent;
Color get primaryAccent;
// app bar
Color get appBarBackground;
Color get appBarPrimaryContent;
// buttons
Color get buttonBackground;
Color get buttonPrimaryContent;
// bottom tab bar
Color get bottomTabBarBackground;
// bottom tab bar - icons
Color get bottomTabBarIconSelected;
Color get bottomTabBarIconUnselected;
// bottom tab bar - label
Color get bottomTabBarLabelUnselected;
Color get bottomTabBarLabelSelected;
}
You can add additional styles here and then implement the colors in your theme.
Switching theme
Nylo supports the ability to switch themes on the fly.
E.g. If you need to switch the theme if a user taps a button to activate the "dark theme".
You can support that by doing the below:
import 'package:nylo_framework/theme/helper/ny_theme.dart';
...
TextButton(onPressed: () {
// set theme to use the "dark theme"
NyTheme.set(context, id: "dark_theme");
setState(() { });
}, child: Text("Dark Theme")
),
// or
TextButton(onPressed: () {
// set theme to use the "light theme"
NyTheme.set(context, id: "light_theme");
setState(() { });
}, child: Text("Light Theme")
),
Fonts
Updating your primary font throughout the app is easy in Nylo. Open the lib/config/design.dart
file and update the below.
final TextStyle appThemeFont = GoogleFonts.lato();
We include the GoogleFonts library in the repository, so you can start using all the fonts with little effort. To update the font to something else, you can do the following:
// OLD
// final TextStyle appThemeFont = GoogleFonts.lato();
// NEW
final TextStyle appThemeFont = GoogleFonts.montserrat();
Check out the fonts on the official Google Fonts library to understand more
Need to use a custom font? Check out this guide - https://flutter.dev/docs/cookbook/design/fonts
Once you've added your font, change the variable like the below example.
final TextStyle appThemeFont = TextStyle(fontFamily: "ZenTokyoZoo"); // ZenTokyoZoo used as an example for the custom font
Design
The config/design.dart file is used for managing the design elements for your app.
appFont
variable contains the font for your app.
logo
variable is used to display your app's Logo.
You can modify resources/widgets/logo_widget.dart to customize how you want to display your Logo.
loader
variable is used to display a loader. Nylo will use this variable in some helper methods as the default loader widget.
You can modify resources/widgets/loader_widget.dart to customize how you want to display your Loader.
Text Extensions
Here are the available text extensions that you can use in Nylo.
Rule Name | Usage | Info |
---|---|---|
Display Large | displayLarge() | Applies the displayLarge textTheme |
Display Medium | displayMedium() | Applies the displayMedium textTheme |
Display Small | displaySmall() | Applies the displaySmall textTheme |
Heading Large | headingLarge() | Applies the headingLarge textTheme |
Heading Medium | headingMedium() | Applies the headingMedium textTheme |
Heading Small | headingSmall() | Applies the headingSmall textTheme |
Title Large | titleLarge() | Applies the titleLarge textTheme |
Title Medium | titleMedium() | Applies the titleMedium textTheme |
Title Small | titleSmall() | Applies the titleSmall textTheme |
Body Large | bodyLarge() | Applies the bodyLarge textTheme |
Body Medium | bodyMedium() | Applies the bodyMedium textTheme |
Body Small | bodySmall() | Applies the bodySmall textTheme |
Label Large | labelLarge() | Applies the labelLarge textTheme |
Label Medium | labelMedium() | Applies the labelMedium textTheme |
Label Small | labelSmall() | Applies the labelSmall textTheme |
Font Weight Bold | fontWeightBold | Applies font weight bold to a Text widget |
Font Weight Light | fontWeightLight | Applies font weight light to a Text widget |
Set Color | setColor(context, (color) => colors.primaryAccent) | Set a different text color on the Text widget |
Align Left | alignLeft | Align the font to the left |
Align Right | alignRight | Align the font to the right |
Align Center | alignCenter | Align the font to the center |
Set Max Lines | setMaxLines(int maxLines) | Set the maximum lines for the text widget |
Display large
Text("Hello World").displayLarge()
Display medium
Text("Hello World").displayMedium()
Display small
Text("Hello World").displaySmall()
Heading large
Text("Hello World").headingLarge()
Heading medium
Text("Hello World").headingMedium()
Heading small
Text("Hello World").headingSmall()
Title large
Text("Hello World").titleLarge()
Title medium
Text("Hello World").titleMedium()
Title small
Text("Hello World").titleSmall()
Body large
Text("Hello World").bodyLarge()
Body medium
Text("Hello World").bodyMedium()
Body small
Text("Hello World").bodySmall()
Label large
Text("Hello World").labelLarge()
Label medium
Text("Hello World").labelMedium()
Label small
Text("Hello World").labelSmall()
Font weight bold
Text("Hello World").fontWeightBold()
Font weight light
Text("Hello World").fontWeightLight()
Set color
Text("Hello World").setColor(context, (color) => colors.primaryAccent)
// Color from your colorStyles
Align left
Text("Hello World").alignLeft()
Align right
Text("Hello World").alignRight()
Align center
Text("Hello World").alignCenter()
Set max lines
Text("Hello World").setMaxLines(5)