Flutter如何用Getx实现Slider关闭重启应用后仍保留位置与数值

步骤1：添加依赖 #

在项目pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5
  get_storage: ^2.1.1

添加后执行flutter pub get完成安装，注：版本号可根据自身项目兼容情况调整。

步骤2：完整可运行代码 #

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';

// 初始化持久化存储工具
void main() async {
  await GetStorage.init();
  runApp(const MyApp());
}

// Slider状态管理控制器
class SliderController extends GetxController {
  final storage = GetStorage();
  // 初始化时读取本地存储的滑块值，无存储值则用默认值20
  late RxDouble currentSliderValue = (storage.read('slider_pos') ?? 20.0).obs;

  // 滑动时更新数值并同步写入本地存储
  void changeSliderValue(double value) {
    currentSliderValue.value = value;
    storage.write('slider_pos', value);
  }
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    // 全局注册控制器
    Get.put(SliderController());
    return GetMaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // 获取已注册的控制器
    final controller = Get.find<SliderController>();
    // Obx监听数值变化自动刷新UI
    return Obx(() => Slider(
      value: controller.currentSliderValue.value,
      min: 0,
      max: 100,
      divisions: 5,
      label: controller.currentSliderValue.value.round().toString(),
      onChanged: (double value) {
        controller.changeSliderValue(value);
      },
    ));
  }
}

实现逻辑 #

• 应用启动时自动读取本地存储的滑块位置作为初始值
• 滑动过程中数值变更实时同步写入本地存储
• 无需手动调用setState，响应式变量变更自动触发UI刷新

内容的提问来源于stack exchange，提问作者Carlos Costa