Different Widgets on theme change flutter dart

Question

I wanted to implement multiple themes in my flutter app with certain colors. Now I want the user to be able, to switch between dark- and light mode but the widgets are different when dark mode is applied... Look at the designs below

As you can see the widgets are completely different... If you know how to do it, please leave me an answer, thanks!

Answer 1

to do so, you have to implement a MultiProvider for changing themes, a sharedpreferences plugin for saving and restoring booleans. and to change a certain color you use a boolean. Example :

mytheme.dart

const MaterialColor myColor = MaterialColor(0xFF134E57, <int, Color>{
  50: Color(0xFFE6ECED),
  100: Color(0xFFBFD0D3),
  200: Color(0xFF95B1B5),
  300: Color(0xFF6B9297),
  400: Color(0xFF4B7A81),
  500: Color(0xFF2B636B), //warna tombol add
  600: Color(0xFF265B63),
  700: Color(0xFF205158),
  800: Color(0xFF1A474E),
  900: Color(0xFF10353C),
});

ThemeData light = ThemeData(
  fontFamily: 'NunitoRE',
  brightness: Brightness.light,
  primarySwatch: myColor,
  textTheme: const TextTheme(bodyText2: TextStyle(color: Color(0xff010101))),
  appBarTheme: const AppBarTheme(
    iconTheme: IconThemeData(color: Color(0xfffafafa)),
    backgroundColor: Color(0xFF134E57),
    titleSpacing: 0,
    elevation: 0,
    centerTitle: false,
    titleTextStyle: TextStyle(color: Color(0xfffafafa), fontSize: 18, fontFamily: "NunitoBL", shadows: shaDow),
  ),
);

ThemeData dark = ThemeData(
  fontFamily: 'NunitoRE',
  brightness: Brightness.dark,
  hintColor: const Color(0xb3ffffff),
  focusColor: const Color(0xb3ffffff),
  textTheme: const TextTheme(bodyText2: TextStyle(color: Color(0xfffafafa))),
  appBarTheme: const AppBarTheme(
    elevation: 0,
    iconTheme: IconThemeData(color: Color(0xfffafafa)),
    backgroundColor: Color(0xFF222222),
    titleSpacing: 0,
    centerTitle: false,
    titleTextStyle: TextStyle(color: Color(0xfffafafa), fontSize: 18, fontFamily: "NunitoBL", shadows: shaDow),
  ),

);

this is Provider of theme my_prov.dart

import 'package:flutter/foundation.dart';
import 'package:shared_preferences/shared_preferences.dart';

class MyProv extends ChangeNotifier {
  final String mytheme = "mytheme";
  SharedPreferences _prefs;

  bool _isDark;

  bool get isDark => _isDark;

  MyProv() {
    _isDark = false;
    _loadFromPrefs();
  }

  toggleTheme() {
    _isDark = !_isDark;
    _saveToPrefs();
    notifyListeners();
  }



  _initPrefs() async {
    if (_prefs == null) {
      return _prefs = await SharedPreferences.getInstance();
    }
  }

  _loadFromPrefs() async {
    await _initPrefs();
    _isDark = _prefs.getBool(mytheme) ?? false;
    notifyListeners();
  }

  _saveToPrefs() async {
    await _initPrefs();
    _prefs.setBool(mytheme, _isDark);
  }
}

main.dart we return as Multiprovider

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'home.dart';
import 'package:my_app_name/my_prov.dart';
import 'package:my_app_name/mytheme.dart';

void main() {
  runApp(const MyApp());
}

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

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [
          ChangeNotifierProvider<MyProv>(create: (_) => MyProv()),
        ],
        child: Consumer<MyProv>(
          builder: (context, MyProv notifier, child) {
            return MaterialApp(
              debugShowCheckedModeBanner: false,
              theme: notifier.isGel ? dark : light,
              home: const Home(),
            );
          },
        ));
  }
}

home.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:my_app_name/my_prov.dart';
import 'package:my_app_name/mytheme.dart';

class Home extends StatefulWidget {
  const Home({Key key}) : super(key: key);

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

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    // all colors will follow my_theme.dart theme colors.
    // but if you want to make a different color, simply add a boolean isDark in front of it, then fill it with the color you want
    return Consumer<MyProv>(
      builder: (context, notifier, child) => Scaffold(
        drawer: const Drawer(),
        appBar: AppBar(
          backgroundColor: Theme.of(context).focusColor, //
          title: Text('My App'),
          actions: [
            IconButton(
              onPressed: () {
                notifier.toggleTheme();
              },
              icon: notifier.isDark ? Icon(Icons.brightness_3) : Icon(Icons.light_mode),
            ),
          ],
        ),
        body: Column(
          children: [
            Container(
              height: 200,
              width: double.infinity,
              color: notifier.isDark ? Color(0xFF085C75) : Color(0xFF427508),
            ),
          ],
        ),
      ),
    );
  }
}

I hope this solution can solve your problem