Flutter Android应用路由导航：启动页→登录页→主仪表盘跳转需求

Got it, let's build out that full navigation flow from Splash → Login → Main Dashboard (plus your existing Registration screen) step by step. I'll keep it practical and aligned with what you've already started.

Step 1: Define All Screen Widgets #

First, let's create separate widgets for each screen. I'll keep them simple so you can plug in your own UI:

Splash Screen #

This screen will auto-navigate to the Login screen after a short delay (common for branding/loading):

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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    // Auto-navigate to Login after 2 seconds
    Future.delayed(const Duration(seconds: 2), () {
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => const LoginScreen()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text("My App Splash Screen"),
      ),
    );
  }
}

Login Screen #

This will have buttons to navigate to Registration (your existing flow) and to the Main Dashboard on successful login:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Login")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Your login form fields here (email, password)
            const TextField(decoration: InputDecoration(labelText: "Email")),
            const SizedBox(height: 16),
            const TextField(decoration: InputDecoration(labelText: "Password")),
            const SizedBox(height: 24),
            // Login button → Navigate to Main Dashboard
            ElevatedButton(
              onPressed: () {
                // Replace login screen with dashboard (no back to login)
                Navigator.of(context).pushReplacement(
                  MaterialPageRoute(builder: (context) => const MainDashboard()),
                );
              },
              child: const Text("Login"),
            ),
            const SizedBox(height: 16),
            // Register button → Navigate to Registration screen
            TextButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => const RegistrationScreen()),
                );
              },
              child: const Text("Don't have an account? Register"),
            ),
          ],
        ),
      ),
    );
  }
}

Registration Screen (Your Existing Screen) #

You already have this set up with a back button, but here's a quick recap to fit the flow:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Registration")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Your registration form fields here
            const TextField(decoration: InputDecoration(labelText: "Name")),
            const SizedBox(height: 16),
            const TextField(decoration: InputDecoration(labelText: "Email")),
            const SizedBox(height: 16),
            const TextField(decoration: InputDecoration(labelText: "Password")),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                // After successful registration, go back to Login
                Navigator.of(context).pop();
              },
              child: const Text("Register"),
            ),
          ],
        ),
      ),
    );
  }
}

Main Dashboard #

This is your app's home screen. We'll add a logout button to navigate back to Login (clearing the stack so you can't go back to Dashboard after logout):

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Main Dashboard"),
        actions: [
          // Logout button → Navigate back to Login
          IconButton(
            onPressed: () {
              Navigator.of(context).pushAndRemoveUntil(
                MaterialPageRoute(builder: (context) => const LoginScreen()),
                (route) => false, // Removes all previous screens from stack
              );
            },
            icon: const Icon(Icons.logout),
          ),
        ],
      ),
      body: const Center(
        child: Text("Welcome to your Dashboard!"),
      ),
    );
  }
}

Step 2: Set Up the Root App #

Finally, set your MaterialApp to start with the Splash Screen:

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Flutter App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const SplashScreen(),
    );
  }
}

Key Navigation Notes #

• Use pushReplacement() when you don't want users to go back to the previous screen (like Splash → Login, Login → Dashboard)
• Use push() for screens where you want a back option (like Login → Registration)
• Use pushAndRemoveUntil() for logout to clear the entire navigation stack, so users can't press back to return to the Dashboard after logging out
• The default back button in the AppBar automatically calls pop() for you, which is why your Registration screen already works to go back to Login

That's the full flow! You can customize each screen's UI to match your app's design, and add validation/logic for login/registration as needed.

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