Flutter应用启动时如何实现18+年龄验证功能？

以下是完整的实现方案，包含基础验证逻辑和可选的记住用户选择功能：

核心实现逻辑 #

• 将年龄验证页面设为应用初始路由
• 点击「Yes, I'm 18 above」按钮后，替换当前路由进入主应用页面
• 点击拒绝按钮时，停留在验证页并给出提示，告知用户无法进入应用

完整代码示例 #

1. 主应用入口 #

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart'; // 可选，用于记住用户选择

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '18+ Age Verification',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const AgeVerificationPage(),
    );
  }
}

2. 年龄验证页面 #

class AgeVerificationPage extends StatefulWidget {
  const AgeVerificationPage({super.key});

  @override
  State<AgeVerificationPage> createState() => _AgeVerificationPageState();
}

class _AgeVerificationPageState extends State<AgeVerificationPage> {
  // 可选：启动时检查是否已保存过验证状态
  @override
  void initState() {
    super.initState();
    _checkVerifiedStatus();
  }

  Future<void> _checkVerifiedStatus() async {
    final prefs = await SharedPreferences.getInstance();
    final isVerified = prefs.getBool('isAgeVerified') ?? false;
    if (isVerified) {
      // 已验证过，直接跳转到主页面
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const HomePage()),
      );
    }
  }

  Future<void> _handleAgeVerification(bool isVerified) async {
    if (isVerified) {
      // 保存验证状态（可选，无需重复验证可删除此段）
      final prefs = await SharedPreferences.getInstance();
      await prefs.setBool('isAgeVerified', true);
      // 替换路由进入主应用，避免返回键回到验证页
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const HomePage()),
      );
    } else {
      // 拒绝验证，显示提示并留在当前页
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('您必须年满18岁才能使用本应用')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 32),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                '您是否年满18岁？',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 40),
              ElevatedButton(
                onPressed: () => _handleAgeVerification(true),
                style: ElevatedButton.styleFrom(
                  minimumSize: const Size(double.infinity, 50),
                  backgroundColor: Colors.green,
                ),
                child: const Text(
                  'Yes, I\'m 18 above',
                  style: TextStyle(fontSize: 18, color: Colors.white),
                ),
              ),
              const SizedBox(height: 20),
              OutlinedButton(
                onPressed: () => _handleAgeVerification(false),
                style: OutlinedButton.styleFrom(
                  minimumSize: const Size(double.infinity, 50),
                  side: const BorderSide(color: Colors.red),
                ),
                child: const Text(
                  'No, I\'m under 18',
                  style: TextStyle(fontSize: 18, color: Colors.red),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 主应用页面示例 #

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主应用页面')),
      body: const Center(child: Text('欢迎进入应用！')),
    );
  }
}

关键细节说明 #

• 路由替换：使用Navigator.pushReplacement而非push，防止用户通过返回键回到验证页面
• 本地存储：通过SharedPreferences保存验证状态，用户下次启动无需重复验证（不需要此功能可直接删除相关代码）
• 用户反馈：拒绝验证时显示SnackBar提示，提升用户体验

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