trying to do color picker in flutter

Question

I was trying to do a Color Picker for my app in flutter...

i installed the Mtaerial Color Picker package from pub dev...

then i tried to make a Provider like i made for my Dark Mode...

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

class ThemeProvider with ChangeNotifier {
  ThemeData _selectedTheme;
  int primaryValue;

  static Color secondaryColor;

  ThemeProvider({
    bool isDarkMode,
    int primaryValue,
  }) {
    this._selectedTheme = isDarkMode ? dark : light;
    this.primaryValue = colorValue;
  }
  static int colorValue;

  ThemeData light = ThemeData.light().copyWith(
    primaryColor: Color(colorValue) ?? Colors.teal[700],
  );
  ThemeData dark = ThemeData.dark().copyWith();

  void changeColor(int value) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();

    colorValue = value;
    primaryValue = colorValue;
    print(colorValue);
    prefs.setInt('PrimaryColor', primaryValue);
    notifyListeners();
  }

  void swapTheme() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    if (_selectedTheme == dark) {
      _selectedTheme = light;
      prefs.setBool('isDarkTheme', false);
      print(prefs.getBool('isDarkTheme'));
    } else {
      _selectedTheme = dark;
      prefs.setBool('isDarkTheme', true);
      print(prefs.getBool('isDarkTheme'));
    }
    notifyListeners();
  }

  ThemeData get getTheme => _selectedTheme;
}

the swapTheme() is for my dark Mode and the change Color it is For my problem i get the Color int from my picker like that:

  MaterialColorPicker(
        circleSize: 50,
      selectedColor:
              _selectedColor ?? Colors.teal[700],
        onColorChange: (Color color) {
       setState(() {
           _selectedColor = color;
                        String primaryColorString =
                           _selectedColor.toString();
                        String valueString = primaryColorString
                       .split('(0x')[1]
                           .split(')')[0];
                  int value =
                int.parse(valueString, radix: 16);
             themeProvider.changeColor(value);
          });
         },
        ),

and when i choose a color it just activate the change color function where it should rebuild my app because i am using provider in my main.dart thats how my Dark Mode is working

return runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (BuildContext context) => ThemeProvider(
            isDarkMode: prefs.getBool('isDarkTheme') ?? false,
            primaryValue: prefs.getInt('PrimaryColor') ?? 4293467747,
          ),
        ),
      ],
      child: MyApp(),
    ),
  );
}
return Consumer<ThemeProvider>(
      builder: (context, themeProvider, _) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Demo',
          theme: themeProvider.getTheme,

tho its giving me This Error

The method '&' was called on null.

Receiver: null Tried calling:

&(4294967295)

and this too

Bad state: Tried to read a provider that threw during the creation of its value.

The exception occurred during the creation of type ThemeProvider.

Answer 1

okay so it should be done this way this is my darkMode changer the theme one :

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

class DarkModeProvider with ChangeNotifier {
  ThemeData _selectedTheme;

  DarkModeProvider({
    bool isDarkMode,
  }) {
    this._selectedTheme = isDarkMode ? dark : light;
  }
  ThemeData light = ThemeData.light();
  ThemeData dark = ThemeData.dark();

  void swapDarkMode() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    if (_selectedTheme == dark) {
      _selectedTheme = light;
      prefs.setBool('isDarkMode', false);
    } else {
      _selectedTheme = dark;
      prefs.setBool('isDarkMode', true);
    }
    notifyListeners();
  }

  ThemeData get getTheme => _selectedTheme;
}

my color changer file:

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

class ColorChanger with ChangeNotifier {
  int primary;
  int secondary;
  ColorChanger({
    this.primary,
    this.secondary,
  });
  void changePrimaryColor(int prim) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    primary = prim;
    prefs.setInt('Primary', primary);
    notifyListeners();
  }

  void changeSecondaryColor(int second) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    secondary = second;
    prefs.setInt('Secondary', secondary);
    notifyListeners();
  }

  int get getPrimColor => primary;
  int get getSecondColor => secondary;
}

where i change both is my setting page you put the widgets in any page...

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter_material_color_picker/flutter_material_color_picker.dart';

import '../providers/color_provider.dart';
import '../providers/dark_mode_provider.dart';

class SettingsScreen extends StatefulWidget {
  static const routeName = '/settings';
  @override
  _SettingsScreenState createState() => _SettingsScreenState();
}

class _SettingsScreenState extends State<SettingsScreen> {
  bool _darkValue = false;

  Color _selectedPrimaryColor;
  Color _selectedSecondaryColor;

  _onBackPressed() {
    Navigator.of(context).pushReplacementNamed('/home');
  }

  getSharedPrefs() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    var value = prefs.getBool('isDarkMode') ?? false;
    if (value == false) {
      setState(() {
        _darkValue = false;
      });
    } else {
      setState(() {
        _darkValue = true;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    getSharedPrefs();
  }

  @override
  Widget build(BuildContext context) {
    DarkModeProvider darkModeProvider = Provider.of<DarkModeProvider>(
      context,
      listen: false,
    );
    ColorChanger colorChanger = Provider.of<ColorChanger>(
      context,
      listen: false,
    );
    return WillPopScope(
      onWillPop: () {
        return _onBackPressed();
      },
      child: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () {
              _onBackPressed();
            },
          ),
        ),
        body: Container(
          margin: EdgeInsets.symmetric(
            horizontal: 20,
            vertical: 5,
          ),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Flexible(
                    child: Container(
                      child: Text(
                        'Dark Mode',
                        style: TextStyle(
                          fontSize: 20,
                        ),
                      ),
                    ),
                  ),
                  Switch(
                      value: _darkValue,
                      onChanged: (toggle) {
                        darkModeProvider.swapDarkMode();
                        getSharedPrefs();
                      }),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Flexible(
                    child: Container(
                      child: Text(
                        'Primary Colors',
                        style: TextStyle(
                          fontSize: 20,
                        ),
                      ),
                    ),
                  ),
                  TextButton(
                    onPressed: () {
                      return showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          return AlertDialog(
                            actions: <Widget>[
                              IconButton(
                                onPressed: () {
                                  Navigator.of(context).pop(true);
                                },
                                icon: Icon(Icons.check),
                              ),
                            ],
                            content: SingleChildScrollView(
                              child: Container(
                                height:
                                    MediaQuery.of(context).size.height * 0.35,
                                child: MaterialColorPicker(
                                  circleSize: 50,
                                  selectedColor:
                                      Color(colorChanger.getPrimColor) ??
                                          Colors.teal[700],
                                  onColorChange: (Color color) {
                                    setState(() {
                                      _selectedPrimaryColor = color;
                                      colorChanger.changePrimaryColor(
                                          _selectedPrimaryColor.value);
                                    });
                                  },
                                ),
                              ),
                            ),
                          );
                        },
                      );
                    },
                    child: CircleAvatar(
                      child: Icon(
                        Icons.color_lens,
                        color: Colors.white54,
                      ),
                      backgroundColor:
                          Color(colorChanger.getPrimColor) ?? Colors.teal[700],
                    ),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Flexible(
                    child: Container(
                      child: Text(
                        'Secondary Colors',
                        style: TextStyle(
                          fontSize: 20,
                        ),
                      ),
                    ),
                  ),
                  TextButton(
                    onPressed: () {
                      return showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          return AlertDialog(
                            actions: <Widget>[
                              IconButton(
                                onPressed: () {
                                  Navigator.of(context).pop(true);
                                },
                                icon: Icon(Icons.check),
                              ),
                            ],
                            content: SingleChildScrollView(
                              child: Container(
                                height:
                                    MediaQuery.of(context).size.height * 0.35,
                                child: MaterialColorPicker(
                                  circleSize: 50,
                                  selectedColor:
                                      Color(colorChanger.getSecondColor) ??
                                          Colors.amber,
                                  onColorChange: (Color color) {
                                    setState(() {
                                      _selectedSecondaryColor = color;
                                      colorChanger.changeSecondaryColor(
                                          _selectedSecondaryColor.value);
                                    });
                                  },
                                ),
                              ),
                            ),
                          );
                        },
                      );
                    },
                    child: CircleAvatar(
                      child: Icon(
                        Icons.color_lens,
                        color: Colors.white54,
                      ),
                      backgroundColor:
                          Color(colorChanger.getSecondColor) ?? Colors.amber,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

here i used shared prefs.. so i can see my switch button functioning with the shared prefs

and here how you can use the both provider in the Themedata in the main dart:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:todo/providers/task_provider.dart';
import 'package:todo/screens/add_task_screen.dart';

import './screens/settings_screen.dart';
import './providers/color_provider.dart';
import './providers/dark_mode_provider.dart';
import './screens/home_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  SharedPreferences prefs = await SharedPreferences.getInstance();
  return runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (BuildContext context) => TaskProvider(),
        ),
        ChangeNotifierProvider(
          create: (BuildContext context) => DarkModeProvider(
            isDarkMode: prefs.getBool('isDarkTheme') ?? false,
          ),
        ),
        ChangeNotifierProvider(
          create: (BuildContext context) => ColorChanger(
            primary: prefs.getInt('Primary') ?? Colors.teal[700].value,
            secondary: prefs.getInt('Secondary') ?? Colors.amber.value,
          ),
        ),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    return Consumer2<DarkModeProvider, ColorChanger>(
        builder: (context, darkmode, colorChanger, _) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: darkmode.getTheme.copyWith(
          primaryColor: Color(colorChanger.getPrimColor),
          accentColor: Color(colorChanger.getSecondColor),
        ),
        home: HomeScreen(),
        routes: {
          HomeScreen.routeName: (context) => HomeScreen(),
          SettingsScreen.routeName: (context) => SettingsScreen(),
          AddTaskScreen.routeNamed: (context) => AddTaskScreen(),
        },
      );
    });
  }
}

i guess its helpful i used it in my app..

thank you guys..