Adaptive Theme In Flutter

In this blog we will learn about how to use Adaptive Theme In Flutter.

Adaptive themes in Flutter allow your app to automatically change its appearance based on user preferences or device settings, like light and dark modes.

Introduction

Adaptive Theme in Flutter let your app change its look based on user preferences, like switching between light and dark modes.

This makes the app more comfortable to use in different lighting conditions.

This feature is particularly useful for supporting light and dark themes, which help users view content comfortably in various lighting conditions.

Implementation

We are going to implement Adaptive Theme In Flutter so we need to follow below steps to implement this topic.

Step 1:

First of all we need to create a new flutter project and add the following dependency in pubspec.yaml file.

adaptive_theme: ^3.6.0

1	adaptive_theme: ^3.6.0

Add latest version of these dependency in your flutter project.

Step 2:

In this step you need to create Wrap MaterialApp with AdaptiveTheme widget.

AdaptiveTheme(
      light: ThemeData.light(useMaterial3: true),
      dark: ThemeData.dark(useMaterial3: true),
      initial: AdaptiveThemeMode.light,
      builder: (theme, darkTheme) => MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Adaptive Theme Demo',
        theme: theme,
        darkTheme: darkTheme,
        home: const MyHomePage(title: 'Adaptive Theme Demo'),
      ),
    );

AdaptiveTheme(

light: ThemeData.light(useMaterial3: true),

dark: ThemeData.dark(useMaterial3: true),

initial: AdaptiveThemeMode.light,

builder: (theme, darkTheme) => MaterialApp(

debugShowCheckedModeBanner: false,

title: 'Adaptive Theme Demo',

theme: theme,

darkTheme: darkTheme,

home: const MyHomePage(title: 'Adaptive Theme Demo'),

);

With the help of above code we will implement AdaptiveTheme.

AdaptiveTheme Widget:

This widget manages light and dark themes.

Light & Dark:

Both themes are defined using ThemeData.light(useMaterial3: true) and ThemeData.dark(useMaterial3: true), which enables Material 3 design features.

initial:

The app starts with the light theme (AdaptiveThemeMode.light).

builder:

The builder function creates MaterialApp.

Step 3:

In this step you need to create a StatefulWidget and create a button on which you can change app theme mode

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Text("Implement Adaptive Theme"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          AdaptiveTheme.of(context).toggleThemeMode();
        },
        child: Text('Change Theme'),
      ), 
    );
  }
}

class MyHomePage extends StatefulWidget {

const MyHomePage({super.key, required this.title});

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

backgroundColor: Theme.of(context).colorScheme.inversePrimary,

title: Text(widget.title),

body: Center(

child: Text("Implement Adaptive Theme"),

floatingActionButton: FloatingActionButton(

onPressed: (){

AdaptiveTheme.of(context).toggleThemeMode();

child: Text('Change Theme'),

);

}

Above mention code is helpful to change App Theme (light to dark & dark to light).

Output