How to use Theme in a Flutter App?

By | November 11, 2018

In this article, I will tell you a simple way to theme a flutter app.

Here is a simple code that illustrates that.
We use the theme property of each widget to theme it.

For example, to theme the whole application, we would do something like this.

import 'package:flutter/material.dart';
import 'Pages/theme_demo.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Test App",
      home: new ThemeDemo(),
      theme: ThemeData(
          primarySwatch: Colors.green,
          brightness: Brightness.light,
          accentColor: Colors.red),
    );
  }
}

Take a look at the theme property of the MaterialApp.
You can customize it the way you want.

and the theme_demo.dart will look simpley like this

import 'package:flutter/material.dart';

class ThemeDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ThemeDemoState();
  }
}

class _ThemeDemoState extends State<ThemeDemo> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Text("Hello Flutter"),
            RaisedButton(
              child: Text("Click"),
              onPressed: () => {},
            )
          ],
        ),
      ),
    );
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *