How do I save a value selected from time picker Inside sharedpreferences?

Question

When a value is selected inside the time picker and then exiting the application and returning again, the value is retrieved. The first value. How can I save it inside sharedpreferences? I tried to store it as a string, but to no avail.

Answer 1

Here are the smallest amount of changes to make this demo app work.

1. I changed the prefs store to save the hour as an int instead of a string. It just makes it easier with less conversions needed.

2. getSavedData was changed to construct a TimeOfDay object from hour value saved in prefs store.

   For minute, I just used the default value from _timeOfDaybgm which will always be 30 for now. You can update the code to also store minute in prefs store. You can store it separately from hour to make it easier.

   You cannot use DateTime.parse on _timeOfDaybgm.toString() because DateTime.parse doesn't understand the syntax. You can try printing what _timeOfDaybgm.toString() produces and it is definitely not a DateTime object.

   So the new function looks like:

   getSavedData() async {
       final pref = await SharedPreferences.getInstance();
       setState(() {
         int savedHour = pref.getInt('_timeOfDay') ?? _timeOfDaybgm.hour;
         _timeOfDaybgm = TimeOfDay(hour: savedHour, minute: 
    _timeOfDaybgm.minute);
       });
     }
   

And all together:

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
// import 'package:flutter_localization/flutter_localization.dart';
TimeOfDay _timeOfDaybgm =  const TimeOfDay(hour: 5, minute: 30);
void main() {
  runApp(
      const  MaterialApp(
          debugShowCheckedModeBanner: false,
          home: MyApp()
      ));
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'لا اله الا الله '),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    getSavedData();
  }

  getSavedData() async {
    final pref = await SharedPreferences.getInstance();
    // get the saved value from stored prefs
    // and make sure to do it inside `setState`
    // cannot use DateTime.parse because _timeOfDaybgm.toString() doesn't return a value 
    // DateTime.parse can understand
    setState(() {
      int savedHour = pref.getInt('_timeOfDay') ?? _timeOfDaybgm.hour;
      _timeOfDaybgm = TimeOfDay(hour: savedHour, minute: 0);
    });
  }

  @override
  void dispose(){
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body:  Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(onPressed:() async {
              final TimeOfDay?timeOfDay = await showTimePicker(
                context: context,
                initialTime:_timeOfDaybgm,
              );
              if (timeOfDay!= null) {
                setState(() {
                  _timeOfDaybgm=timeOfDay;
                });
                FocusScope.of(context).unfocus();
                final prefs = await SharedPreferences.getInstance();
                // changed setString to setInt, just makes it easier
                await prefs.setInt('_timeOfDay', _timeOfDaybgm.hour);
              }
              //notfi();
            }, child:const Text("Added time"),
            ),
            Center(child: Text(_timeOfDaybgm.format(context).toString(),style: TextStyle(color: const Color.fromARGB(255, 5, 2, 2)),)),
          ],
        ),
      ),

    );
  }
}