Flutter中如何保存Container组件的颜色状态？

要实现退出应用后保留Container的颜色状态，最适合新手的方案是用SharedPreferences——它能把简单数据存在本地设备上，重启应用后可直接读取。

步骤1：添加依赖 #

在项目根目录的pubspec.yaml文件中，给dependencies节点添加shared_preferences：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2 # 可替换为最新版本

执行flutter pub get完成依赖安装。

步骤2：修改State类实现持久化 #

核心要做这几件事：

• 用布尔变量记录选中状态（比直接存颜色更简单可靠）
• 页面初始化时读取本地保存的状态
• 长按切换状态时，同步把新状态保存到本地

修改后的完整代码：

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

class ToolsScreen2State extends State<ToolsScreen2> {
  late SharedPreferences _prefs;
  bool _isSelected = false; // 标记是否处于绿色选中状态

  @override
  void initState() {
    super.initState();
    _loadSavedState(); // 初始化时读取本地状态
  }

  // 从本地读取保存的状态
  Future<void> _loadSavedState() async {
    _prefs = await SharedPreferences.getInstance();
    setState(() {
      _isSelected = _prefs.getBool('container_selected') ?? false; // 默认未选中
    });
  }

  // 将状态保存到本地
  Future<void> _saveState(bool value) async {
    await _prefs.setBool('container_selected', value);
  }

  @override
  Widget build(BuildContext context) {
    // 根据选中状态动态设置颜色
    Color colorContainer = _isSelected ? Colors.green.shade600 : Colors.white24;

    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const SearchPage()),
              );
            },
            icon: const Image(
              image: AssetImage('images/Search.png'),
              width: 40,
            ),
          ),
        ],
        title: const Text('Tool Videos'),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 10),
          InkWell(
            onLongPress: () {
              setState(() {
                _isSelected = !_isSelected;
              });
              _saveState(_isSelected); // 切换后立即保存状态
            },
            child: Container(
              width: 500,
              color: colorContainer,
              height: 125,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Image.asset('images/UM.png'),
                  Padding(
                    padding: const EdgeInsets.only(right: 100.0),
                    child: GestureDetector(
                      onTap: () => launchUrl(Uri.parse(
                          'https://www.youtube.com/watch?v=sRc-uB6IrS4&list=PLNJd3WswnfgMo0suCaTpkNN1Sf8&index=x')),
                      child: const Center(
                        child: Text(
                          'UM',
                          style: TextStyle(color: Colors.white, fontSize: 30),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// 补充原代码中缺失的SearchPage类
class SearchPage extends StatelessWidget {
  const SearchPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Search')),
    );
  }
}

关键说明 #

• 用布尔值代替直接保存Color：Color无法直接序列化存储，用布尔标记选中状态更简单
• 初始化读取：initState中调用读取方法，确保页面打开时就恢复之前的状态
• 多Container扩展：如果后续有多个需要保存状态的Container，给每个设置唯一的键名即可，比如'container_1_selected'、'container_2_selected'

内容的提问来源于stack exchange，提问作者Spicy Pumpkin