Flutter shared preferences colorTheme

Question

Here is a code that creates 2 clickable containers.

Each container changes the background color.

I'd like to save the background color when I relaunch the application.

I know I need to use shared_preference but I don't know where to put the 'themeColor' variable.

If someone could help me, that would be great.

Thank you

class _ColorSaveState extends State<ColorSave> {

  //VARIABLE
  var themeColor = Colors.red[100];

  //METHOD CHANGE COLOR
  colorBackground(String color){
    setState(() {
      if(color == "themeBlue"){
        themeColor = Colors.blue;
      }else{
        themeColor = Colors.green;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('ColorSave'),
        backgroundColor: Colors.blue,
      ),

      //I would like to save the state of 'themeColor'
      backgroundColor: themeColor,
      body: Center(
        child: Column(
          children:<Widget>[

            //Two Container Clickable
            InkWell(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
            ),
              onTap: (){
                colorBackground("themeBlue");
              },
            ),
            InkWell(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
              onTap: (){
                colorBackground("themeGreen");
              },
            ),
          ]
        )
      )
    );
  }
}

Answer 1

Here is the correct code:

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

class ColorSave extends StatefulWidget {
  @override
  _ColorSaveState createState() => _ColorSaveState();
}

class _ColorSaveState extends State<ColorSave> {
  // Default background color
  Color? themeColor = Colors.red[100];

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

  // Method to load color from SharedPreferences
  Future<void> loadColor() async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    final String? colorName = prefs.getString('themeColor');
    setState(() {
      if (colorName == 'themeBlue') {
        themeColor = Colors.blue;
      } else if (colorName == 'themeGreen') {
        themeColor = Colors.green;
      } else {
        themeColor = Colors.red[100]; 
      }
    });
  }

  // Method to save color to SharedPreferences
  Future<void> saveColor(String colorName) async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setString('themeColor', colorName);
  }

  // Method to change color
  void colorBackground(String color) {
    setState(() {
      if (color == "themeBlue") {
        themeColor = Colors.blue;
      } else {
        themeColor = Colors.green;
      }
    });
    saveColor(color);  // Save the selected color
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('ColorSave'),
        backgroundColor: Colors.blue,
      ),
      backgroundColor: themeColor,
      body: Center(
        child: Column(
          children: <Widget>[
            InkWell(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
              onTap: () {
                colorBackground("themeBlue");
              },
            ),
            InkWell(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
              onTap: () {
                colorBackground("themeGreen");
              },
            ),
          ]
        )
      )
    );
  }
}

This code initializes the color from SharedPreferences when the widget is loaded and updates the stored color whenever the user taps a container. The color name is stored as a string in SharedPreferences, and when the application is launched again, the saved color is applied to the background.