Working with Themes in Flutter

Working with Themes in Flutter, themes are the most basic and undoubtedly the most important aspect in terms of websites and applications.

In flutter, we can define App-wide themes or we can also use Theme widgets that define the color and font style for a particular part of the app.

In order to create an App-wide Theme, we will need to define ThemeData to the MaterialApp Widget.

Widget build(BuildContext context) {
return MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.redAccent,
    accentColor: Colors.white),
    debugShowCheckedModeBanner: false,
    home: HomePage(),
);
}

Widget build(BuildContext context) {

return MaterialApp(

theme: ThemeData(

primaryColor: Colors.redAccent,

accentColor: Colors.white),

debugShowCheckedModeBanner: false,

home: HomePage(),

);

}

Here, we have specified two colors in our ThemeData, i.e., primary color and accent color.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          primaryColor: Colors.redAccent,
          accentColor: Colors.white,
          elevatedButtonTheme: ElevatedButtonThemeData(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.redAccent)
            )
          ),
        ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Working on Themes"),
          actions: [
            Padding(
              padding: const EdgeInsets.only(right: 8.0),
              child: Icon(Icons.wb_sunny),
            ),
          ],
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Image.network(
                  'https://api.timeforkids.com/wp-content/uploads/2019/09/final-cover-forest.jpg'),
              Padding(
                padding: const EdgeInsets.only(top: 16.0),
                child: Text(
                  'Forests provide us with shelter, livelihoods, water, food and fuel security. All these activities directly or indirectly involve forests. Some are easy to figure out - fruits, paper and wood from trees, and so on. Others are less obvious, such as by-products that go into everyday items like medicines, cosmetics and detergents.',
                  style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
                ),
              ),
              Text('In addition, 300 million people live in forests, including 60 million indigenous people.Yet, we are losing them.', style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold)),
              Padding(
                padding: const EdgeInsets.only(top: 16.0),
                child: Container(
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("More Info"),
                  ),
                  width: MediaQuery.of(context).size.width,
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16.0),
                child: Container(
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("Submit"),
                  ),
                  width: MediaQuery.of(context).size.width,
                ),
              ),
            ],
          ),
        ));
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

theme: ThemeData(

primaryColor: Colors.redAccent,

accentColor: Colors.white,

elevatedButtonTheme: ElevatedButtonThemeData(

style: ButtonStyle(

backgroundColor: MaterialStateProperty.all(Colors.redAccent)

)

debugShowCheckedModeBanner: false,

home: HomePage(),

);

}

class HomePage extends StatefulWidget {

@override

_HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Working on Themes"),

actions: [

Padding(

padding: const EdgeInsets.only(right: 8.0),

child: Icon(Icons.wb_sunny),

body: Padding(

padding: const EdgeInsets.all(8.0),

child: Column(

children: [

Image.network(

'https://api.timeforkids.com/wp-content/uploads/2019/09/final-cover-forest.jpg'),

Padding(

padding: const EdgeInsets.only(top: 16.0),

child: Text(

'Forests provide us with shelter, livelihoods, water, food and fuel security. All these activities directly or indirectly involve forests. Some are easy to figure out - fruits, paper and wood from trees, and so on. Others are less obvious, such as by-products that go into everyday items like medicines, cosmetics and detergents.',

style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),

Text('In addition, 300 million people live in forests, including 60 million indigenous people.Yet, we are losing them.', style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold)),

Padding(

padding: const EdgeInsets.only(top: 16.0),

child: Container(

child: ElevatedButton(

onPressed: () {},

child: Text("More Info"),

width: MediaQuery.of(context).size.width,

Padding(

padding: const EdgeInsets.only(top: 16.0),

child: Container(

child: ElevatedButton(

onPressed: () {},

child: Text("Submit"),

width: MediaQuery.of(context).size.width,

));

}

In addition to primary Color and accent Color, we have specified the elevatedButtonTheme. ElevatedButtonThemeData contains multiple properties within it.

Here, we have used the backgroundColor property to specify the background color for the Elevated Buttons used in our app.

Now, if we specify the darkTheme property in the MaterialApp, the app will work in Dark Mode, if the Device Display Mode is turned to DarkMode.

Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          primaryColor: Colors.redAccent,
          accentColor: Colors.white,
          elevatedButtonTheme: ElevatedButtonThemeData(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.redAccent)
            )
          ),
        ),
      darkTheme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }

Widget build(BuildContext context) {

return MaterialApp(

theme: ThemeData(

primaryColor: Colors.redAccent,

accentColor: Colors.white,

elevatedButtonTheme: ElevatedButtonThemeData(

style: ButtonStyle(

backgroundColor: MaterialStateProperty.all(Colors.redAccent)

)

darkTheme: ThemeData.dark(),

debugShowCheckedModeBanner: false,

home: HomePage(),

);

}

The output will be –

If we want to add the specific theme to a particular widget or part of the app, we can wrap it with Theme Widget.

In Theme Widget, we have the property as data in which we can add the ThemeData.

 Padding(
                padding: const EdgeInsets.only(top: 16.0),
                child: Container(
                  child: Theme(
                    data: ThemeData(
                      elevatedButtonTheme: ElevatedButtonThemeData(
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all(Colors.green)
                        )
                      ),
                    ),
                    child: ElevatedButton(
                      onPressed: () {},
                      child: Text("More Info"),
                    ),
                  ),
                  width: MediaQuery.of(context).size.width,
                ),
              ),

Padding(

padding: const EdgeInsets.only(top: 16.0),

child: Container(

child: Theme(

data: ThemeData(

elevatedButtonTheme: ElevatedButtonThemeData(

style: ButtonStyle(

backgroundColor: MaterialStateProperty.all(Colors.green)

)

child: ElevatedButton(

onPressed: () {},

child: Text("More Info"),

width: MediaQuery.of(context).size.width,

The output will be –

Conclusion

In this blog, we have read about Working with Themes in Flutter.

I hope it will help you out in understanding and getting a brief idea about it.

Thank you for reading!!

References

https://wwf.panda.org/discover/our_focus/forests_practice/importance_forests/

https://flutter.dev/docs/cookbook/design/themes

Tanya Goel 31 March 2021

. . .

Working with Themes in Flutter

Conclusion

References

Leave a Comment Cancel Reply

Message Sent!