Flutter Slider – Keep it on/off even when user close app & re-visit with Getx

Issue

Flutter Beginner needs help.
How to keep a slider in is position and maintain is values even when we close the app and re-visit the app using Getx or some other Statemanegment.
Folowing this tutorial Flutter Switch i tried to make the same with a Slider, but my coding knowledge is not enough and i could not find any tutorial to make the same with a Slider.


import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

 static const String _title = 'Flutter Code Sample';

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: _title,
     home: Scaffold(
       appBar: AppBar(title: const Text(_title)),
       body: const MyStatefulWidget(),
     ),
   );
 }
}

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

 @override
 State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
 double _currentSliderValue = 20;

 @override
 Widget build(BuildContext context) {
   return Slider(
     value: _currentSliderValue,
     min: 0,
     max: 100,
     divisions: 5,
     label: _currentSliderValue.round().toString(),
     onChanged: (double value) {
       setState(() {
         _currentSliderValue = value;
       });
     },
   );
 }
}

Solution

The tutorial you have linked seems to be to complicated for starters, cause it explains storage and state management at the same time.

For me it seems to be easier, to just concentrate on the storage part.

You could use shared_prefences, like described at the official flutter pages. But this is only for simple data (get_storage too). If your app will be more complicated and you have to store more data, you should think about some other storage like sqlite.

Cause I don’t know getX, here is an example for sharedPreferences:

1.Add package to pubspec.yaml:

dependencies:
  shared_preferences: "<newest version>"

2.Your code with shared_preferences:

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

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  double _currentSliderValue = 20;

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

  //Loading slider value on start
  void _loadSlider() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _currentSliderValue = (prefs.getDouble('slider') ?? 20);
    });
  }

  // change slider value to value
  void _changeSlider(double value) {
    setState(() {
      _currentSliderValue = value;
    });
  }

  // store slider value
  void _storeSlider() async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setDouble('slider', _currentSliderValue);
  }

  @override
  Widget build(BuildContext context) {
    return Slider(
      value: _currentSliderValue,
      min: 0,
      max: 100,
      divisions: 5,
      label: _currentSliderValue.round().toString(),
      onChanged: (double value) {
        _changeSlider(value);
        _storeSlider();
      },
    );
  }
}

Answered By – Andreas Müller

Answer Checked By – Jay B. (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *