Điều hướng

Hướng dẫn này đưa ra giả định rằng bạn đang sử dụng go_router trong ứng dụng của mình.

Ghi chú

Nếu bạn đang sử dụng một giải pháp điều hướng khác, việc cài đặt sẽ tùy thuộc vào cách sắp xếp điều hướng của bạn.

Như đã lưu ý trong Hello PiScale Chat, PSChat cần được thiết lập là cấp độ cao nhất của các thành phần trong ứng dụng để PiScale Chat SDK hoạt động như thiết kế.

Router

import 'package:go_router/go_router.dart';

final rootNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'root');

final appRouter = GoRouter(
  navigatorKey: rootNavigatorKey,
  initialLocation: '/threads',
  routes: [
    StatefulShellRoute.indexedStack(
      parentNavigatorKey: rootNavigatorKey,
      builder: (
        context,
        state,
        navigationShell,
      ) {
        return HomePage(
          navigationShell: navigationShell,
        );
      },
      branches: [
        StatefulShellBranch(
          routes: [
            GoRoute(
              path: '/threads',
              builder: (context, state) {
                return const ThreadsPage();
              },
            ),
          ],
        ),
      ],
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: 'messages',
      builder: (context, state) {
        return MessagesPage(
          extra: state.extra as MessagesPageExtra,
        );
      },
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: '/media',
      builder: (context, state) {
        return MediaPage(
          mediaPackage: state.extra as PSMediaPackage,
        );
      },
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: '/threadsProfile',
      builder: (context, state) {
        return ThreadProfilePage(threadId: '${state.extra}');
      },
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: '/mediaCollection',
      builder: (context, state) {
        final data = state.extra as MediaCollectionPageExtra;
        return MediaCollectionPage(
          threadId: data.threadId,
          type: data.type,
        );
      },
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: '/membersInThread',
      builder: (context, state) {
        return MembersInThreadPage(threadId: '${state.extra}');
      },
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: '/addMember',
      builder: (context, state) {
        return AddMemberPage(threadId: '${state.extra}');
      },
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: '/newDirectThread',
      builder: (context, state) {
        return const NewDirectThreadPage();
      },
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: '/newGroupThread',
      builder: (context, state) {
        return const NewGroupThreadPage();
      },
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: '/newNameGroupThread',
      builder: (context, state) {
        final extra = state.extra as NewNameGroupThreadExtra;
        return NewNameGroupThreadPage(listUser: extra.listUser);
      },
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: '/forwardMessage',
      builder: (context, state) {
        return MessageForwardPage(
            psMessageForwardExtra: (state.extra as PSMessageForwardExtra));
      },
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: '/messagePinned',
      builder: (context, state) {
        return MessagePinnedPage(
            psMessagePinnedExtra: (state.extra as PSMessagesPinnedExtra));
      },
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: '/threadsSearch',
      builder: (context, state) {
        return const ThreadSearchPage();
      },
    ),
    GoRoute(
      parentNavigatorKey: rootNavigatorKey,
      path: '/searchMessage',
      builder: (context, state) {
        return SearchMessagePage(threadId: '${state.extra}');
      },
    ),
  ],
  ...
);

App

import 'package:piscale_chat_flutter/piscale_chat_flutter.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: appRouter,
      builder: (context, child) {
        return PSChat(
          userId: 'USER_ID',
          deviceId: 'DEVICE_ID',
          apiClientOptions: PSChatApiClientOptions(
            appId: ('APP_ID'),
            fetchToken: fetchToken,
          ),
          child: child,
        );
      },
    );
  }
}