Flutter中如何保存用户自定义首页并在下次打开时加载？

核心思路 #

通过本地持久化存储保存用户的专属首页配置和设置完成状态，结合页面跳转逻辑实现新用户设置、已有用户快速进入专属首页的需求。

1. 选择本地存储方案 #

根据专属首页配置的复杂度选择合适的存储方式：

• 简单键值对（如模块开关、主题色）：用 shared_preferences，轻量易集成。
• 复杂对象结构（如自定义布局、多层级配置）：用 hive 或 isar，支持直接存储对象，无需手动JSON序列化。

本文以 shared_preferences 为例演示（需在 pubspec.yaml 中添加依赖：shared_preferences: ^2.2.2）。

2. 封装存储工具类 #

统一处理配置的保存与读取，避免重复代码：

import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';

class LocalStorage {
  // 保存专属首页配置 + 标记设置完成
  static Future<void> saveHomeConfig(Map<String, dynamic> config) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('home_config', json.encode(config));
    await prefs.setBool('is_setup_done', true);
  }

  // 获取专属首页配置
  static Future<Map<String, dynamic>?> getHomeConfig() async {
    final prefs = await SharedPreferences.getInstance();
    final configStr = prefs.getString('home_config');
    return configStr != null ? json.decode(configStr) : null;
  }

  // 判断是否完成新用户设置
  static Future<bool> hasCompletedSetup() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getBool('is_setup_done') ?? false;
  }
}

3. 实现页面跳转逻辑 #

欢迎页（首页）按钮逻辑 #

class WelcomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 跳转到新用户设置流程
                Navigator.push(context, MaterialPageRoute(builder: (_) => SetupFlowPage()));
              },
              child: const Text('新用户→'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final isSetupDone = await LocalStorage.hasCompletedSetup();
                final homeConfig = await LocalStorage.getHomeConfig();
                
                if (isSetupDone && homeConfig != null) {
                  // 直接进入专属首页，替换当前页面
                  Navigator.pushReplacement(
                    context, 
                    MaterialPageRoute(builder: (_) => CustomHomePage(config: homeConfig))
                  );
                } else {
                  // 提示用户先完成设置
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('请先完成新用户设置'))
                  );
                }
              },
              child: const Text('已有用户→'),
            ),
          ],
        ),
      ),
    );
  }
}

新用户设置流程页 #

完成设置后生成配置并保存，然后跳转到专属首页：

class SetupFlowPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('新用户设置')),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 模拟根据用户选择生成专属首页配置（实际业务中替换为真实用户输入）
            final customHomeConfig = {
              'show_wallet': true,
              'favorite_modules': ['资讯', '任务'],
              'theme_color': 'deepPurple',
            };

            // 保存配置到本地
            await LocalStorage.saveHomeConfig(customHomeConfig);

            // 跳转到专属首页，替换设置页
            Navigator.pushReplacement(
              context, 
              MaterialPageRoute(builder: (_) => CustomHomePage(config: customHomeConfig))
            );
          },
          child: const Text('完成设置'),
        ),
      ),
    );
  }
}

专属首页（根据配置渲染） #

读取保存的配置，动态生成页面内容：

class CustomHomePage extends StatelessWidget {
  final Map<String, dynamic> config;

  const CustomHomePage({super.key, required this.config});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的专属首页'),
        backgroundColor: config['theme_color'] == 'deepPurple' ? Colors.deepPurple : Colors.grey,
      ),
      body: ListView(
        children: [
          // 根据配置显示钱包模块
          if (config['show_wallet'] == true)
            const ListTile(title: Text('钱包入口')),
          // 根据配置显示收藏的模块
          ...(config['favorite_modules'] as List<String>).map(
            (module) => ListTile(title: Text('$module 模块'))
          ),
        ],
      ),
    );
  }
}

4. 关键注意事项 #

• 持久化可靠性：shared_preferences 的写入是异步操作，确保在保存完成后再跳转页面，避免数据丢失。
• 复杂配置处理：如果专属首页包含大量自定义组件或嵌套结构，建议改用 hive 存储自定义对象（需先注册适配器），比JSON序列化更高效。
• 异常处理：在读取存储时添加异常捕获，避免因存储损坏导致页面崩溃。
• 重置机制：可添加“重置首页”功能，通过调用 prefs.remove('home_config') 和 prefs.setBool('is_setup_done', false) 恢复初始状态。

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