Flutter路由集中管理与全局状态共享实现咨询

一、拆分页面到单独.dart文件 #

步骤1：创建文件结构 #

在Flutter项目的lib目录下，新建pages文件夹，然后创建两个页面文件：

• first_route.dart
• second_route.dart
  入口文件保留为main.dart

步骤2：编写各文件代码 #

first_route.dart

import 'package:flutter/material.dart';

class FirstRoute extends StatelessWidget {
  const FirstRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GFG First Route'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Launch screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

second_route.dart

import 'package:flutter/material.dart';

class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GFG Second Route"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'pages/first_route.dart';
import 'pages/second_route.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes',
      initialRoute: '/',
      routes: {
        '/': (context) => const FirstRoute(),
        '/second': (context) => const SecondRoute(),
      },
    );
  }
}

关键说明 #

• 遵循Dart命名规范：类名采用大驼峰格式（FirstRoute而非firstRoute），移除不必要的ignore注释
• 在main.dart中通过相对路径导入页面文件，路由表直接引用对应类即可正常跳转

二、实现全局状态访问 #

根据项目复杂度，推荐三种常用方案：

方案1：全局变量（简单场景） #

适合存储基础全局数据（如主题色、用户ID），直接在单独文件定义：

创建global_state.dart

import 'package:flutter/material.dart';

// 全局主题色
Color globalThemeColor = Colors.green;
// 全局用户ID示例
String? globalUserId;

在任意页面导入后即可访问：

// first_route.dart中使用示例
import '../global_state.dart';

appBar: AppBar(
  title: const Text('GFG First Route'),
  backgroundColor: globalThemeColor,
),

方案2：InheritedWidget（Flutter原生状态管理） #

适合需要在组件树中共享状态的场景，无需第三方库：

创建app_state.dart

import 'package:flutter/material.dart';

class AppState extends InheritedWidget {
  final String userId;
  final Function(String) updateUserId;

  const AppState({
    Key? key,
    required this.userId,
    required this.updateUserId,
    required Widget child,
  }) : super(key: key, child: child);

  static AppState of(BuildContext context) {
    final AppState? result = context.dependOnInheritedWidgetOfExactType<AppState>();
    assert(result != null, 'No AppState found in context');
    return result!;
  }

  @override
  bool updateShouldNotify(AppState oldWidget) {
    return userId != oldWidget.userId;
  }
}

修改main.dart，用AppState包裹MaterialApp

import 'package:flutter/material.dart';
import 'pages/first_route.dart';
import 'pages/second_route.dart';
import 'app_state.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _userId = 'user_123';

  void _updateUserId(String newId) {
    setState(() {
      _userId = newId;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AppState(
      userId: _userId,
      updateUserId: _updateUserId,
      child: MaterialApp(
        title: 'Named Routes',
        initialRoute: '/',
        routes: {
          '/': (context) => const FirstRoute(),
          '/second': (context) => const SecondRoute(),
        },
      ),
    );
  }
}

在页面中访问/修改状态

// first_route.dart示例
@override
Widget build(BuildContext context) {
  final appState = AppState.of(context);
  return Scaffold(
    appBar: AppBar(
      title: Text('当前用户ID: ${appState.userId}'),
      backgroundColor: Colors.green,
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            child: const Text('Launch screen'),
            onPressed: () {
              Navigator.pushNamed(context, '/second');
            },
          ),
          ElevatedButton(
            child: const Text('修改用户ID'),
            onPressed: () {
              appState.updateUserId('user_456');
            },
          ),
        ],
      ),
    ),
  );
}

方案3：Provider（第三方状态管理库，推荐中大型项目） #

1. 在pubspec.yaml添加依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5

2. 创建状态模型user_model.dart

import 'package:flutter/foundation.dart';

class UserModel extends ChangeNotifier {
  String _userId = 'user_123';

  String get userId => _userId;

  void updateUserId(String newId) {
    _userId = newId;
    notifyListeners();
  }
}

3. 修改main.dart，用ChangeNotifierProvider包裹MaterialApp

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'pages/first_route.dart';
import 'pages/second_route.dart';
import 'user_model.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => UserModel(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes',
      initialRoute: '/',
      routes: {
        '/': (context) => const FirstRoute(),
        '/second': (context) => const SecondRoute(),
      },
    );
  }
}

4. 在页面中访问/修改状态

// first_route.dart示例
import 'package:provider/provider.dart';
import '../user_model.dart';

@override
Widget build(BuildContext context) {
  final userModel = Provider.of<UserModel>(context);
  return Scaffold(
    appBar: AppBar(
      title: Text('当前用户ID: ${userModel.userId}'),
      backgroundColor: Colors.green,
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            child: const Text('Launch screen'),
            onPressed: () {
              Navigator.pushNamed(context, '/second');
            },
          ),
          ElevatedButton(
            child: const Text('修改用户ID'),
            onPressed: () {
              userModel.updateUserId('user_456');
            },
          ),
        ],
      ),
    ),
  );
}

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