Theme and fonts

WayFar

Search…

WayFar

Introduction

Guide

Getting Started

Clean Architecture

Theme and fonts

Navigation and routes

Internationalization

Dependency Injection

Third-Party Integrations

Template

Theme and fonts

To customize the application theme, head over to the file theme.dart under the folder lib/core/theme/
Theme mode
Currently, there are two theme mode : dark and light. You are free to add other modes by editing AppThemeMode variable.
To switch between the theme modes, you have to use the theme bloc (theme_bloc.dart) :
1
resolve<ThemeBloc>().setThemeMode(AppThemeMode.DARK);
Copied!
Palette
You can change the color scheme used by the app, by customizing another palette.
Fonts
The app integrates GoogleFonts package, so there is already a large number ready to use integrated into the app. To change the font override the textTheme property in ThemeData and use one of the text themes available in google fonts:
theme.dart
1
ThemeData(
2
    ...
3
    textTheme: GoogleFonts.poppinsTextTheme(...),
4
    ...)
Copied!
Extra properties
In the case you need extra properties such as spacing or custom colors, to include into theme data, you can use the extension AdvancedThemeData
lib/core/theme/advanced_theme.dart
1
extension AdvancedThemeData on ThemeData{
2
  //TODO declare custom properties here
3
  EdgeInsets get spacing1x {
4
    return EdgeInsets.all(4);
5
  }
6
  ...
7
  }
Copied!

Folder structure

Next - Guide

Navigation and routes

Last modified 6mo ago

Copy link

Contents