如何在Flutter应用中设置用户自定义的首选启动页面？

1. 持久化存储用户偏好 #

用shared_preferences包保存用户选择的启动页标识，这是Flutter生态里最常用的轻量本地存储方案。

• 先在pubspec.yaml添加依赖：

  dependencies:
    shared_preferences: ^2.2.2
  

• 封装读写逻辑，给每个可选页面分配唯一标识（比如A.dart对应'A'，B.dart对应'B'）：

  // 读取用户选择的启动页，默认返回原启动页标识'A'
  Future<String> getStartupPage() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getString('startup_page') ?? 'A';
  }
  
  // 保存用户选择的启动页标识
  Future<void> saveStartupPage(String pageKey) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('startup_page', pageKey);
  }
  

2. 设置页面添加选择UI #

在设置页里添加单选组件，让用户直观选择偏好页面，这里用RadioListTile示例：

class SettingsPage extends StatefulWidget {
  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  String _selectedPage = 'A';

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

  void _loadSelectedPage() async {
    final page = await getStartupPage();
    setState(() => _selectedPage = page);
  }

  void _onPageSelected(String pageKey) async {
    await saveStartupPage(pageKey);
    setState(() => _selectedPage = pageKey);
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('已设置启动页为${pageKey == 'A' ? '首页' : pageKey == 'B' ? '页面B' : '页面C'}')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('设置')),
      body: ListView(
        children: [
          const ListTile(title: Text('选择启动页')),
          RadioListTile(
            title: const Text('首页（A.dart）'),
            value: 'A',
            groupValue: _selectedPage,
            onChanged: (value) => _onPageSelected(value!),
          ),
          RadioListTile(
            title: const Text('页面B（B.dart）'),
            value: 'B',
            groupValue: _selectedPage,
            onChanged: (value) => _onPageSelected(value!),
          ),
          RadioListTile(
            title: const Text('页面C（C.dart）'),
            value: 'C',
            groupValue: _selectedPage,
            onChanged: (value) => _onPageSelected(value!),
          ),
        ],
      ),
    );
  }
}

3. 启动时动态加载目标页面 #

修改main函数，先读取用户偏好再决定启动页：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final startupPageKey = await getStartupPage();
  runApp(MyApp(startupPageKey: startupPageKey));
}

class MyApp extends StatelessWidget {
  final String startupPageKey;

  const MyApp({super.key, required this.startupPageKey});

  @override
  Widget build(BuildContext context) {
    Widget homePage;
    switch(startupPageKey) {
      case 'B':
        homePage = const BPage();
        break;
      case 'C':
        homePage = const CPage();
        break;
      default:
        homePage = const APage();
    }

    return MaterialApp(
      title: 'Flutter Demo',
      home: homePage,
      // 如果用命名路由，也可以设置initialRoute
      // initialRoute: startupPageKey == 'B' ? '/b' : startupPageKey == 'C' ? '/c' : '/a',
      // routes: {
      //   '/a': (context) => const APage(),
      //   '/b': (context) => const BPage(),
      //   '/c': (context) => const CPage(),
      // },
    );
  }
}

额外注意点 #

• 如果有启动闪屏页，要在闪屏结束后再执行跳转逻辑，不要直接替换闪屏页。
• 确保所有可选页面的Widget已正确定义（比如BPage、CPage）。
• 可根据UI需求调整选择组件，比如用下拉框、按钮组代替单选框。

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