Flutter Using Themes To Share Colors and Font Styles

In Flutter App to share colors and font styles throughout the app, we can use themes to perform this  in Flutter App. In Flutter there are two ways to define themes: App-wide or using Theme Widgets that define the colors and font styles for a particular part of our application. In fact, app-wide themes are just Theme Widgets created at the root of our apps by the MaterialApp!

We  have to define a Theme, we can use it within our own Widgets. The Material Widgets provided by Flutter will use our Theme to set the background colors and font styles for App Bars, Buttons, Check boxes, etc.

Creating an app theme In Flutter App:

If we want to share a Theme containing colors and font styles across our entire app, we have to provide ThemeData to the MaterialApp constructor.

If in case no theme is provided, then Flutter creates a fallback theme under the hood.

MaterialApp(
title: title,
theme: ThemeData(
// Define the default Brightness and Colors
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],

// Define the default Font Family
fontFamily: 'Montserrat',

// Define the default TextTheme. Use this to specify the default
// text styling for headlines, titles, bodies of text, and more.
textTheme: TextTheme(
headline: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
title: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
body1: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
)
);

In Flutter App Themes are part of an application:

If we  override the app-wide theme in part of our application, we can wrap a section of our app in a ThemeWidget.

To do this, we have two ways to approach this: creating unique ThemeData, or extending the parent theme.

1. Creating unique ThemeData In Flutter App:

 If you don’t want to inherit existing properties for any application like colors or font styles, then we can create a ThemeData() instance and pass that to the Theme Widget.

Theme(
// Create a unique theme with "ThemeData"
data: ThemeData(
accentColor: Colors.yellow,
),
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);

Extending the parent theme in Flutter App:

 It often makes sense to extend the parent theme  than overriding everything,. We can achieve this by using the copyWith method.

Theme(
// Find and Extend the parent theme using "copyWith". Please see the next
// section for more info on `Theme.of`.
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: FloatingActionButton(
onPressed: null,
child: Icon(Icons.add),
),
);

Using a Theme for Sharing Properties in Flutter:

Here  we’ve defined a theme, we can use it within our Widget build methods by using the Theme.of(context) function!

Theme.of(context) looks up the Widget tree and return the nearest Theme in the tree. If we have a stand-alone Theme defined above our Widget, it returns that. If not found , it returns the App theme.

In fact, we all know that the FloatingActionButton uses this similar method to find the accentColor

Container(
color: Theme.of(context).accentColor,
child: Text(
'Text with a background color',
style: Theme.of(context).textTheme.title,
),
);

Below is the Complete example code for Flutter Using Themes To Share Colors and Font Styles

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

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appName = 'Custom Themes';

return MaterialApp(
title: appName,
theme: ThemeData(
// Define the default Brightness and Colors
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],

// Define the default Font Family
fontFamily: 'Montserrat',

// Define the default TextTheme. Use this to specify the default
// text styling for headlines, titles, bodies of text, and more.
textTheme: TextTheme(
headline: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
title: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
body1: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
),
home: MyHomePage(
title: appName,
),
);
}
}

class MyHomePage extends StatelessWidget {
final String title;

MyHomePage({Key key, @required this.title}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Container(
color: Theme.of(context).accentColor,
child: Text(
'Text with a background color',
style: Theme.of(context).textTheme.title,
),
),
),
floatingActionButton: Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: FloatingActionButton(
onPressed: null,
child: Icon(Icons.add),
),
),
);
}
}

Congratulations You Have Learned To Share Colors and Font Styles Using Themes In Flutter….!!!

If It Is Helpful Share It With Your Friends….!!!

Leave a Reply

Categories