Toggle between LIGHT and DARK theme (flutter_neumorphic: ^2.0.0)


I use flutter_neumorphic: ^2.0.0 package to give my app a cool look and I like to add a toggle to switch between LIGHT and DARK. Unfortunately I'm new to coding and I can't do this toggle button by my self, can you help me please.

Thank you

import 'package:babysoundtrips/screens/sound_screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';

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

class BabySoundTrips extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
      home: NeumorphicTheme(
        usedTheme: UsedTheme.LIGHT,
        theme: NeumorphicThemeData(
          baseColor: Color(0xFFFFFFFF),
          lightSource: LightSource.topLeft,
          depth: 10,
        darkTheme: NeumorphicThemeData(
          baseColor: Color(0xFF3E3E3E),
          lightSource: LightSource.topLeft,
          depth: 6,
        child: SoundScreen(),
      routes: { (context) => SoundScreen(),

2 Answers


Here is an example of the toggle button

  child: Row(
    children: <Widget>[
      Expanded(child: Text("Change theme")),
          value: true,
          onChanged: null),
  onPressed: () {
    // handle change value here

This snip code needs to embed in the stateful widget and pass the value that you want to change to Switch value, and update this value via my comment "// handle change value here".

answered on Stack Overflow May 11, 2020 by Liem Vo

The darktheme attribute is the default dark mode theme for the system.You can store a variable

bool isLightMode = true ;

And connect it to the toggle button...Then you can use it to put condition inside the theme.

User contributions licensed under CC BY-SA 3.0