How to use Theme in Flutter – Dark and Custom Theme

Basics, Flutter, Flutter Login App, Flutter UI / UX, UI UX

In this tutorial, we will learn how to use themes in a flutter, use Color Swatches or create your own custom swatches. We will then learn to create a custom theme.

We will also cover the Light and Dark Theme. How to switch themes and make it sync with the device using ThemeMode.System

Prerequisite

This is the 3rd tutorial of our Flutter Login App Series.

Watch the previous Flutter Folder Structure tutorial here.

Theme in Flutter

Creating themes in many programming languages is an agitated task. It is also challenging to create custom themes.

In flutter, we can easily create and customize themes. We can play with default themes, design custom swatches, or use our own created themes.

We can also effortlessly create light and dark themes in a flutter design custom themes for text widgets, buttons, FABs, Bottom Navigation Bar, App bar, and much more.

Deprecated Text Theme in Flutter

In Android Studio Electric Eel | 2022.1.1 Patch 1 new way to use Text style properties has been introduced.

All the styles of text themes that was previously used as headline 1, headline 2, headline 3, headline 4, headline 5, headline 6, bodytext1, bodytext 2 and caption are now deprecated.

So we can use these properties instead of others as mentioned below.

  • Headline 1 – DisplayLarge
  • Headline 2 – DisplayMedium
  • Headline 3 – DisplaySmall
  • Headline 4 – HeadlineMedium
  • Headline 5 – HeadlineSmall
  • Headline 6 – TitleLarge
  • Body Text 1 – BodyLarge
  • Body Text 2 – BodyMedium
  • Caption – BodySmall

Watch Youtube tutorial

 

How to use Default Flutter Theme?

Flutter comes with a Material Design Theme as a default theme. Instead of creating a theme from scratch. We can customize default theme which can be used any where in app with any widget.

We can use theme attribute in flutter inside MaterialApp Widget. This theme attribute is a default theme and work as a light theme.

To create a dark theme, we have to call darkTheme inside MaterialApp .

Once we have created light and dark theme, we can switch its modes using themeMode property. There are three themeModes Light, Dark, and System.

Light mode is used to set Light Theme as default. Dark mode is used to set Dark Theme as default. System Mode is used to set whatever the theme is being used by the system.

Note

Dark theme will not be effected until you set brightness attribute to it, as stated below.

theme: ThemeData(brightness:Brightness.light),
darkTheme: ThemeData(brightness:Brightness.dark),

Set Theme style to Widgets

To assign a styles to widgets, we just have to call the Theme.of(context) to assign any theme attribute.

//Set Background color from Theme
backgroundColor: Theme.of(context).backgroundColor,

//Set Text style using TextTheme inside ThemeData 
Text( "Heading", style: Theme.of(context).textTheme.headline2),

Primary Color Swatch in Flutter

Flutter uses Material Design. In Material design we have a property primarySwatches to create a primary swatch color. 

Material Color contain multiple shades of the same color.

Color swatch is a Material Color and most of the Colors in Color list are Swatches.

We have 2 methods to call its shades:-

  • Colors.deepPurple[50]
  • Colors.deepPurple.shade50

How to create a Custom Color Swatch in Flutter

As Color Swatch is a Material Color and it has multiple color shades. It can be created with Material Color as follows:-

//Color division of 0xFF673AB7
//		0x 	- 	Hex Code 
//		FF 	- 	Color Opacity 
//		673AB7 	- 	Actual Color 
static const int _deepPurplePrimaryValue = 0xFF673AB7;

static const MaterialColor deepPurple = MaterialColor(
    _deepPurplePrimaryValue,
    <int, Color>{
       50: Color(0xFFEDE7F6),
      100: Color(0xFFD1C4E9),
      200: Color(0xFFB39DDB),
      300: Color(0xFF9575CD),
      400: Color(0xFF7E57C2),
      500: Color(_deepPurplePrimaryValue),
      600: Color(0xFF5E35B1),
      700: Color(0xFF512DA8),
      800: Color(0xFF4527A0),
      900: Color(0xFF311B92),
    },
  );

How to create Custom Theme in Flutter

Creating custom in flutter is very easy. We just to add desire design in ThemeData() for light and dark design. 

class TAppTheme {
  TAppTheme._();

  static ThemeData lightTheme = ThemeData(
    primarySwatch: Colors.yellow,
    brightness: Brightness.light,
    textTheme: TTextTheme.lightTextTheme,
    appBarTheme: AppBarTheme(),
    floatingActionButtonTheme: FloatingActionButtonThemeData(),
    elevatedButtonTheme:
        ElevatedButtonThemeData(style: ElevatedButton.styleFrom()),
  );

  static ThemeData darkTheme = ThemeData(
    primarySwatch: Colors.yellow,
    brightness: Brightness.dark,
    textTheme: TTextTheme.darkTextTheme,
    appBarTheme: AppBarTheme(),
    floatingActionButtonTheme: FloatingActionButtonThemeData(),
    elevatedButtonTheme: ElevatedButtonThemeData(style: ElevatedButton.styleFrom()),
  );
}

Complete Code

import 'package:flutter/material.dart';
import 'package:login_flutter_app/src/utils/theme/theme.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
const App({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: TAppTheme.lightTheme,
darkTheme: TAppTheme.darkTheme,
themeMode: ThemeMode.system,
home: AppHome(),
);
}
}

class AppHome extends StatelessWidget {
const AppHome({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(".appable/"),
leading: const Icon(Icons.ondemand_video)),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add_shopping_cart_outlined),
onPressed: () {},
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: ListView(
children: [
Text(
"Heading",
style: Theme.of(context).textTheme.headline2,
),
Text(
"Sub-heading",
style: Theme.of(context).textTheme.subtitle2,
),
Text(
"Paragraph",
style: Theme.of(context).textTheme.bodyText1,
),
ElevatedButton(
onPressed: () {},
child: const Text("Elevated Button"),
),
OutlinedButton(
onPressed: () {},
child: const Text("Outlined Button"),
),
const Padding(
padding: EdgeInsets.all(20.0),
child: Image(image: AssetImage("assets/images/books.png")),
),
],
),
),
);
}
}

import 'package:flutter/material.dart';
import 'package:login_flutter_app/src/utils/theme/widget_themes/text_theme.dart';

class TAppTheme {
TAppTheme._();

static ThemeData lightTheme = ThemeData(
primarySwatch: Colors.yellow,
brightness: Brightness.light,
textTheme: TTextTheme.lightTextTheme,
appBarTheme: AppBarTheme(),
floatingActionButtonTheme: FloatingActionButtonThemeData(),
elevatedButtonTheme:
ElevatedButtonThemeData(style: ElevatedButton.styleFrom()),
);

static ThemeData darkTheme = ThemeData(
primarySwatch: Colors.yellow,
brightness: Brightness.dark,
textTheme: TTextTheme.darkTextTheme,
appBarTheme: AppBarTheme(),
floatingActionButtonTheme: FloatingActionButtonThemeData(),
elevatedButtonTheme: ElevatedButtonThemeData(style: ElevatedButton.styleFrom()),
);
}

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class TTextTheme {
static TextTheme lightTextTheme = TextTheme(
headline2: GoogleFonts.montserrat(color: Colors.black87),
subtitle2: GoogleFonts.poppins(color: Colors.deepPurple, fontSize: 24),
);
static TextTheme darkTextTheme = TextTheme(
headline2: GoogleFonts.montserrat(color: Colors.white70),
subtitle2: GoogleFonts.poppins(color: Colors.white60, fontSize: 24),
);
}

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Source code

COURSES

Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Learn Flutter

1.2 # How to install flutter on android studio 2022 - Flutter Basic Crash Course
2.2 - Add Image in Flutter - Assets Network- Flutter Basic Crash Course 2022

flutter Design

How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
16 - Product Card and Grid Layout, How to create a Grid View in Flutter. How to add Products in GridView Layout. Flutter eCommerce app UI Design
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design
23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Flutter Backend

33 - How to Setup Firebase - Firebase Basics - Flutter Firebase - Flutter ecommerce app with firebase as backend
38 - How to Sign-in with Google in flutter Firebase, Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
40 - Flutter Firebase CRUD,  Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend