How To Create Dark Light Theme Using Flutter Android App

Posted By Bajarangi soft , Posted On 27-11-2020

Flutter theme switching from dark to light modes is explained in this part of the tutorial, we mostly observed this in youtube app.Themes are used to provide the different view of the same screen which can be observed in several apps mainly these themes are used to provide the better visibility to the user.Now a days even the IDE for developing programs too provide these themes to make the user comfortable in writing the code.

How To Create Dark Light Theme Using Flutter Android App

Dark Light Theme
Step 1
We cannot directly remove the time stamp from Dark Light Theme but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code .

dependencies:
  flutter:
    sdk: flutter
  dynamic_theme: 1.0.1

Step 2
After done saving the pubspec.yaml file, Open your flutter project root folder in Command Prompt or Terminal and execute flutter pub get command.

flutter pub get

Complete Code For Dark Light Theme In Flutter
main.dart

import 'package:dynamic_theme/dynamic_theme.dart';
import 'package:dynamic_theme/theme_switcher_widgets.dart';
import 'package:flutter/material.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DynamicTheme(
        defaultBrightness: Brightness.light,
        data: (brightness) => ThemeData(
          primarySwatch: Colors.orange,
          brightness: brightness,
        ),
        themedWidgetBuilder: (context, theme) {
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Flutter Demo',
            theme: theme,
            home: MyHomePage(title: 'Home'),
          );
        });
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink,
        title: Text("Theme"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              onPressed: changeBrightness,
              color: Colors.pink,
              child: const Icon(Icons.brightness_2),
            ),
          ],
        ),
      ),
    );
  }
  void changeBrightness() {
    DynamicTheme.of(context).setBrightness(
        Theme.of(context).brightness == Brightness.dark
            ? Brightness.light
            : Brightness.dark);
  }
}