[GetX] Theme

2022-01-24 hit count image

Let's see how to use Theme with GetX in Flutter.

Outline

In this blog post, I will introduce how to use GetX to manage the theme in Flutter. You can see full source code of this blog post on the link below.

Blog series

This blog post is made in the series about how to use GetX in Flutter. If you want to see the other features of the GetX, please check out the following blog posts.

GetX installation

To check how to use GetX for the theme in Flutter, execute the command below to create a new Flutter project.

flutter create theme

And then, execute the command below to install the GetX package.

flutter pub add get

Next, let’s see how to use Theme with GetX.

Configure Theme

To apply the theme by GetX, we need to configure theme and darkTheme of GetMaterialApp. Open the lib/main.dart file and modify it like the below.

import 'package:get/get.dart';

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      darkTheme: ThemeData.dark().copyWith(primaryColor: Colors.red),
      home: const MyHomePage(),
    );
  }
}

In here, the theme is for the light mode and the darkTheme is for the dark mode. Configure them as you like.

Change Theme

If you configure the theme like above, you can change the theme by GetX. To change the theme, you can use the Get.changeTheme method.

Get.changeTheme(ThemeData.dark());

Check current theme

You can check the current theme is the light or dark by Get.isDarkMode of GetX. You can use it when you change the theme like the below.

Get.changeTheme(
  Get.isDarkMode ? ThemeData.light() : ThemeData.dark(),
);

Get device theme

Normally, when the app is started for the first time, the app theme is configured depending on the device theme. In Flutter, you can get the device theme like the below.

import 'package:flutter/scheduler.dart';
...
final isLight = SchedulerBinding.instance?.window.platformBrightness == Brightness.light;

You can use it to configure the app theme depending on the device theme when the app is started for the first time.

Example

To check GetX theme usage, open the lib/main.dart file and modify it like the below.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: Get.isDarkMode
            ? SystemUiOverlayStyle.light
            : SystemUiOverlayStyle.dark,
        title: Text(
          Get.isDarkMode ? 'Dark Theme' : 'Light Theme',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
      body: Center(
        child: OutlinedButton(
          onPressed: () {
            Get.changeTheme(
              Get.isDarkMode ? ThemeData.light() : ThemeData.dark(),
            );
          },
          child: const Text('Change Theme'),
        ),
      ),
    );
  }
}

When you execute the code, you can see the app with the Light mode.

Flutter - GetX theme

When you press the button on the screen, you can see the app theme is changed to the Dark mode.

Flutter - GetX theme

Configurable theme

The next is the configurable theme that I found when I develop the app. Normally, we can’t configure all themes, so we’ll copy and use the basic theme that Flutter provides like the below.

final themeData = Get.isDarkMode ? ThemeData.dark() : ThemeData.light();
...
themeData.copyWith(
  ...
);

AppBar theme

You can change the text and icon color of the AppBar like the below.

themeData.copyWith(
  ...
  appBarTheme: AppBarTheme(
    color: white,
    titleTextStyle: TextStyle(color: black),
    iconTheme: IconThemeData(color: black),
  ),
  ...
);

Scaffold background color

You can configure the backgroud color of the Scaffold like the below.

themeData.copyWith(
  ...
  scaffoldBackgroundColor: white,
  ...
);

Primary and Secondary color

You can change the Primary and Secondary colors like the below.

themeData.copyWith(
  ...
  primaryColor: black,
  colorScheme: themeData.colorScheme.copyWith(
    primary: black,
    secondary: black,
  ),
  ...
);

Text theme

You can change the text theme in Flutter like the below.

final textStyle = TextStyle(color: black);
final textTheme = TextTheme(
  headline1: textStyle,
  headline2: textStyle,
  headline3: textStyle,
  headline4: textStyle,
  headline5: textStyle,
  headline6: textStyle,
  subtitle1: textStyle,
  subtitle2: textStyle,
  bodyText1: textStyle,
  bodyText2: textStyle,
  caption: textStyle,
  button: textStyle,
  overline: textStyle,
);

themeData.copyWith(
  ...
  textTheme: textTheme,
  primaryTextTheme: textTheme,
  ...
);

Divider color

You can change the Divider color like the below.

themeData.copyWith(
  ...
  dividerColor: lightGray,
  ...
);

Icon theme

You can change the icon theme like the below.

themeData.copyWith(
  ...
  iconTheme: iconTheme,
  primaryIconTheme: iconTheme,
  ...
);

TextButton theme

You can change the TextButton theme like the below.

themeData.copyWith(
  ...
  textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(primary: black),
  ),
  ...
);

OutlinedButton theme

You can change the OutlinedButton theme like the below.

themeData.copyWith(
  ...
  outlinedButtonTheme: OutlinedButtonThemeData(
    style: TextButton.styleFrom(
      primary: black,
      side: BorderSide(color: black, width: 1),
    ),
  ),
  ...
);

TextField selection theme

You can change the selection theme in TextField like the below.

themeData.copyWith(
  ...
  textSelectionTheme: TextSelectionThemeData(
    cursorColor: Constants.black,
    selectionColor: Colors.blue.shade200,
  ),
  ...
);

Completed

Done! we’ve seen how to configure and change the theme with GetX. Also, I’ve shared how to change the widget theme that I’ve changed. Now, try to change the theme with GetX! And, If you know how to change the theme that I don’t know, please share them on the comments!

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku. 지금 보고 계신 블로그를 작성하는 Deku가 개발한 앱을 한번 사용해보세요.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.

Posts