Create a custom color constant with BlockPicker and importable for the whole application

Question

How to make this kind of color function Color pickerColor = kPrimaryColor; with sharedPreference reusable?

import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import '../../Config/Widgets/constants.dart';

class ColorPickerBtn extends StatefulWidget {
  ColorPickerBtn({
    Key? key,
    required this.text,
    required this.subtitle,
    required this.icon,
    required this.size,
    required this.style,
    this.iconColor,
    this.child,
  }) : super(key: key);

  final String text, subtitle;
  final IconData icon;
  final double size;
  final TextStyle style;
  final iconColor;
  final child;
  //

  @override
  State<ColorPickerBtn> createState() => _ColorPickerBtnState();
}

class _ColorPickerBtnState extends State<ColorPickerBtn> {
  //Void Confrim
  void _confirmed() async {
    setState(() {
      changeColor(pickerColor);
    });
    Navigator.pop(context);
  }

  //
  final hoverColor = Colors.white70;

  void changeColor(Color color) {
    setState(() {
      pickerColor = color;
    });
  }

  //Shared Preferences

  Color color = Colors.green;
  Color pickerColor = kPrimaryColor;

  Widget buildColorPicker(BuildContext context) {
    return BlockPicker(
      availableColors: [
        Colors.red,
        Colors.green,
        Colors.yellowAccent,
        Colors.blue,
        Colors.grey,
        Colors.indigo,
        Colors.deepOrangeAccent,
        Colors.tealAccent,
        Colors.pink,
        Colors.amber,
        Colors.deepPurple,
        Colors.brown
      ],
      onColorChanged: changeColor,
      pickerColor: pickerColor,
    );
  }

  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    return ListTile(
      leading: Icon(
        widget.icon,
        size: widget.size,
      ),
      title: Text(
        widget.text,
        style: widget.style,
      ),
      trailing: CircleAvatar(radius: 9, backgroundColor: pickerColor),
      subtitle: Text(widget.subtitle),
      iconColor: widget.iconColor,
      hoverColor: hoverColor,
      onTap: () async {
        showDialog(
            barrierDismissible: false,
            useSafeArea: true,
            context: context,
            builder: (context) => AlertDialog(
                  content: Stack(
                    clipBehavior: Clip.none,
                    alignment: Alignment.center,
                    children: <Widget>[
                      Container(
                          width: double.infinity,
                          height: height - 550,
                          child: SingleChildScrollView(
                            child: buildColorPicker(context),
                          )),
                      SizedBox(height: 95),
                      Positioned(
                          bottom: 0,
                          right: 0,
                          child: TextButton(
                              onPressed: _confirmed,
                              child: Text(
                                'Confirm',
                                style: TextStyle(color: pickerColor),
                              )))
                    ],
                  ),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(20.0))),
                ));
      },
    );
  }
}

Answer 1

Well I tried it like this

  Future<void> _getColorValues() async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    String encodedMap = pref.getString("ColorValues") ?? "";
    if (encodedMap.isNotEmpty) {
      Map<String, dynamic> decodedMap = json.decode(encodedMap);
      setState(
        () {
          savedColors = decodedMap;
        },
      );
    }
  }

  Future<void> _storeColorValue() async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    String encodedMap = json.encode(savedColors);

    pref.setString("ColorValues", encodedMap);
  }

Maybe it helps you