Flutter自定义Splash Screen已读校验与页面跳转实现咨询

Hey there! Let's get your splash screen navigation working correctly. I notice a couple of key issues in your current code that are preventing proper screen routing—let's fix them step by step.

Key Problems in Your Current Code #

1. Missing runApp call: Your main function doesn't actually start the Flutter app with runApp, which is essential for rendering any widgets.
2. Incorrect navigation logic: The _handleCurrentScreen method returns a widget but doesn't trigger any navigation action. We need to use Flutter's Navigator to switch screens after the splash delay.
3. Improper initialization flow: You're creating the SplashScreen directly without wrapping it in a MaterialApp, which is required for navigation to work.

Corrected Full Code #

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:binder/ui/screens/root_screen.dart';
import 'package:binder/ui/screens/walk_screen.dart';

void main() async {
  // Ensure Flutter's bindings are initialized before async operations
  WidgetsFlutterBinding.ensureInitialized();
  Firestore.instance.settings(timestampsInSnapshotsEnabled: true);
  
  // Get SharedPreferences instance before starting the app
  final prefs = await SharedPreferences.getInstance();
  runApp(MyApp(prefs: prefs));
}

class MyApp extends StatelessWidget {
  final SharedPreferences prefs;

  const MyApp({Key? key, required this.prefs}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your App Title',
      theme: ThemeData(primarySwatch: Colors.blue), // Adjust theme to your needs
      home: SplashScreen(prefs: prefs),
    );
  }
}

class SplashScreen extends StatefulWidget {
  final SharedPreferences prefs;

  const SplashScreen({Key? key, required this.prefs}) : super(key: key);

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    // Navigate to the appropriate screen after 3 seconds
    Timer(const Duration(seconds: 3), () => _navigateToNextScreen());
  }

  void _navigateToNextScreen() {
    // Check if user has seen the walkthrough before
    bool hasSeenWalkthrough = widget.prefs.getBool('seen') ?? false;
    
    // Determine which screen to show next
    Widget nextScreen = hasSeenWalkthrough 
        ? const RootScreen() 
        : WalkthroughScreen(prefs: widget.prefs);
    
    // Replace the splash screen with the next screen (removes splash from navigation stack)
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(builder: (context) => nextScreen),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'hero',
          child: // Insert your splash screen content here (logo, animation, etc.)
              Image.asset('assets/your_logo.png'), // Replace with your actual asset path
        ),
      ),
    );
  }
}

Critical Explanations #

• Proper Initialization: We use WidgetsFlutterBinding.ensureInitialized() before any async operations in main()—this is required when you run async code before runApp.
• Navigation with pushReplacement: This method replaces the current splash screen with the next screen in the navigation stack, so users can't navigate back to the splash screen using the back button (which is the expected behavior).
• Walkthrough Completion Handling: Don't forget to update the seen flag in your WalkthroughScreen when the user finishes the guide. Add this code to your completion button's onTap event:

  widget.prefs.setBool('seen', true);
  Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => const RootScreen()));
  

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