To manage theme in flutter we can adopt many ways. However, before getting accustomed with some tips and tricks, we need to understand the concept.

A theme in Flutter is an integral part of the user interface. Moreover, it is an extended part of Material design.

In this article, we'll try to understand how we can use theme to design color, and font to make our flutter app more visually good-looking.

Firstly, we can define our global theme in the MaterialApp widget.

In our previous articles, we've seen how we can influence the child widgets through MaterialApp. We could've done that because MaterialApp is the parent widget and maintains the material design principles.

Therefore, we can apply the same logic in our theme also.

Subsequently, we can define our global theme in the MaterialApp widget.

Before we delve into detail, let me tell you that we keep the full code snippet in this GitHub Repository.

Firstly, let us take a look at the MaterialApp theme definition.

import 'package:flutter/material.dart'; import 'default_page.dart'; import 'first_page.dart'; import 'home_page.dart'; import 'second_page.dart';  class MaterialAppExample extends StatelessWidget {   const MaterialAppExample({Key? key}) : super(key: key);    @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'Daily News',       theme: ThemeData(         primarySwatch: Colors.brown,         primaryColor: Colors.blue,         canvasColor: const Color.fromRGBO(255, 254, 229, 1),         textTheme: ThemeData.light().textTheme.copyWith(               bodyText2: const TextStyle(                 color: Color.fromRGBO(0, 155, 0, 1.0),                 fontSize: 30,                 fontWeight: FontWeight.bold,                 //fontFamily: 'Allison',               ),               bodyText1: const TextStyle(                 color: Color.fromRGBO(20, 51, 51, 1),                 fontSize: 30,                 fontWeight: FontWeight.bold,               ),               headline6: const TextStyle(                 fontSize: 20,                 fontWeight: FontWeight.bold,               ),             ),       ),       // home: CategoriesScreen(),       initialRoute: '/', // default is '/'       routes: {         '/': (ctx) => const HomePage(),         FirstPage.routename: (ctx) => const FirstPage(),         SecondPage.routename: (ctx) => const SecondPage(),       },       onUnknownRoute: (settings) {         return MaterialPageRoute(           builder: (ctx) => const DefaultPage(),         );       },     );   } }

Since we've defined our theme in MaterialApp widget, we can apply that theme globally with the help of Theme.of method.

Through this method we can pass the context and moreover, we can select what type of text style we need to adopt.

Let us take a close look at the theme property.

Feeling interested?

I have written a complete tutorial on this topic.

What is a theme in Flutter?

And to learn flutter from scratch along with dart programing language, get the following bundle of three Flutter books.

https://leanpub.com/b/acompleteflutterguidefrombeginnerstoadvanced
 This free site is ad-supported. Learn more
​