Implement Dark Mode in Flutter using Adaptive Theme

Dark the flutter

Hi everyone, this blog will help you to implement dark theme in your app using adaptive theme package.

A dark theme displays a dark interface over most of UI. Dark themes reduce the luminance emitted from device screens and reduce eye strain, they save energy and improve accessibility.

Getting Started

Add the following dependency to your pubspec.yaml.

dependencies:
  adaptive_theme: <latest_version>

Initialization

You need to wrap your MaterialApp with AdaptiveTheme to be able to apply themes.

import 'package:adaptive_theme/adaptive_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:supachat/views/login_page.dart';

void main() async {
WidgetsFlutterBinding.ensureInitialized();
final savedThemeMode = await AdaptiveTheme.getThemeMode();
runApp(MyApp(
savedThemeMode: savedThemeMode,
));
}

class MyApp extends StatefulWidget {
final savedThemeMode;

const MyApp({
Key? key,
required this.savedThemeMode,
}) : super(key: key);

@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
final _navigatorKey = GlobalKey<NavigatorState>();

NavigatorState get _navigator => _navigatorKey.currentState!;
@override
Widget build(BuildContext context) {
return AdaptiveTheme(
light: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.blue,
accentColor: Colors.white,
backgroundColor: Color.fromRGBO(243, 243, 243, 1.0),
fontFamily: 'George',
buttonColor: Colors.black,
primaryColor: Color.fromRGBO(84, 104, 255, 1.0),
appBarTheme: AppBarTheme(
backgroundColor: Colors.white,
elevation: 5,
iconTheme: IconThemeData(color: Colors.black),
titleTextStyle: TextStyle(color: Colors.black),
systemOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.white,
),
),
),
dark: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.blue,
accentColor: Color.fromRGBO(38, 42, 53, 1.0),
backgroundColor: Color.fromRGBO(25, 26, 31, 1.0),
fontFamily: 'George',
buttonColor: Colors.white,
primaryColor: Color.fromRGBO(84, 104, 255, 1.0),
appBarTheme: AppBarTheme(
backgroundColor: Colors.black,
elevation: 5,
systemOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.black,
),
),
),
initial: widget.savedThemeMode ?? AdaptiveThemeMode.dark,
builder: (theme, darkTheme) => MaterialApp(
navigatorKey: _navigatorKey,
theme: theme,
darkTheme: darkTheme,
home: LoginPage(),
),
);
}
}

Changing Theme Mode

Now that you have initialized your app as described above. It’s very simple and straightforward to change your theme modes. For this, we created a custom class getCurrentTheme to keep the code clean.

getCurrentTheme() async {
final currentTheme = await AdaptiveTheme.getThemeMode();
if (currentTheme == AdaptiveThemeMode.light)
setState(() {
_lights = true;
});
else
setState(() {
_lights = false;
});
}

We created a method getCurrentTheme() where we fetch current theme.

We have methods to toggle the theme to light to dark, dark to light, or system default.

// sets theme mode to dark
AdaptiveTheme.of(context).setDark();

// sets theme mode to light
AdaptiveTheme.of(context).setLight();

// sets theme mode to system default
AdaptiveTheme.of(context).setSystem();

And if we have a custom button or something to toggle the theme, then we just need to set a condition to change it.

CupertinoSwitch(
value: _lights,
activeColor: theme.primaryColor,
onChanged: (bool value) {
value
? AdaptiveTheme.of(context).setLight()
: AdaptiveTheme.of(context).setDark();
setState(() {
_lights = value;
});
},
),

Check out Github repo for full code.

Download App

Give us a call or fill in the form below to start a 30 days free trial.