使用Navigator.pushNamed ()函数在屏幕间传递数据

Question

需要使用函数CollectionCard将来自CollectionPage小部件的数据传输到CollectionPage屏幕。当我这样做并尝试使用函数捕获参数的值时：

final data =
        ModalRoute.of (context) !. settings.arguments as Map <String, String?>;

发生错误：

_CastError (类型'Null‘不是类型为'Map ’在类型类型中的子类型)。

发生此错误是因为从上述函数获得的值始终为null。

小部件/收集卡. :

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_feather_icons/flutter_feather_icons.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:memories/models/collection.dart';
import 'package:memories/theme/colors.dart';

class CollectionCard extends StatelessWidget {
  CollectionModel collection;
  CollectionCard({
    Key? key,
    required this.collection,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        final data = collection.toJson();
        Navigator.pushNamed(
          context,
          '/collection',
          arguments: data,
        );
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          (collection.coverPhotoUrl == null)
              ? Container(
                  width: 140.w,
                  height: 140.h,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(7.r),
                    color: backgroundColor,
                  ),
                  child: Align(
                    alignment: Alignment.center,
                    child: Icon(
                      FeatherIcons.image,
                      size: 50.w,
                    ),
                  ),
                )
              : Container(
                  width: 140.w,
                  height: 140.h,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(7.r),
                    color: backgroundColor,
                    image: DecorationImage(
                      image: NetworkImage(collection.coverPhotoUrl!),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
          SizedBox(height: 3.h),
          Text(
            collection.title,
            style: Theme.of(context).textTheme.headline3,
            overflow: TextOverflow.ellipsis,
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

router/router.dart

import 'package:flutter/material.dart'; import 'package:memories/presentation/pages/add_collection/add_collection.dart'; import 'package:memories/presentation/pages/add_memory/add_memory_page.dart'; import 'package:memories/presentation/pages/collection/collection_page.dart'; import 'package:memories/presentation/pages/edit_collection/edit_collection_page.dart'; import 'package:memories/presentation/pages/edit_memory/edit_memory_page.dart'; import 'package:memories/presentation/pages/edit_user_info/edit_user_info_page.dart'; import 'package:memories/presentation/pages/home/home_page.dart'; import 'package:memories/presentation/pages/memory/memory_page.dart'; import 'package:memories/presentation/pages/more_info/more_info_page.dart'; import 'package:memories/presentation/pages/profile_options/profile_options_page.dart'; import 'package:memories/presentation/pages/reset_password/reset_password_page.dart'; import 'package:memories/presentation/pages/signin/signin_page.dart'; import 'package:memories/presentation/pages/signup/signup_page.dart'; import 'package:memories/router/routes.dart';

Route generateApplicationRouter(RouteSettings settings) {   switch (settings.name) {
    case homeRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const HomePage());
    case memoryRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const MemoryPage());
    case collectionRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const CollectionPage());
    case addCollectionRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const AddCollectionPage());
    case addMemoryRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const AddMemoryPage());
    case editCollectionRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const EditCollectionPage());
    case editMemoryRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const EditMemoryPage());
    case settingsRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const ProfileOptionsPage());
    case moreInfoRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const MoreInfoPage());
    case resetPasswordRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const ResetPasswordPage());
    case editProfileRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const EditUserInfoPage());
    case signInRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const SigninPage());
    case signUpRoute:
      return MaterialPageRoute(
          builder: (BuildContext context) => const SignupPage());
    default:
      return MaterialPageRoute(
          builder: (BuildContext context) => const HomePage());   } }

router/routes.dart

const String homeRoute = '/';
const String addMemoryRoute = '/add-memory';
const String editMemoryRoute = '/edit-memory';
const String memoryRoute = '/memory';
const String addCollectionRoute = '/add-collection';
const String editCollectionRoute = '/edit-collection';
const String collectionRoute = '/collection';
const String editProfileRoute = '/edit-profile';
const String settingsRoute = '/settings';
const String resetPasswordRoute = '/reset-password';
const String signInRoute = '/sign-in';
const String signUpRoute = '/sign-up';
const String moreInfoRoute = '/more-info';

presentation/collection/collection_page.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_feather_icons/flutter_feather_icons.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:memories/theme/colors.dart';

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

  @override
  Widget build(BuildContext context) {
    final data =
        ModalRoute.of(context)!.settings.arguments as Map<String, String?>;
    print(data);
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Naslov kolekcije",
          overflow: TextOverflow.fade,
        ),
        actions: [
          Padding(
            padding: EdgeInsets.only(right: 10.w),
            child: PopupMenuButton(
              child: Icon(
                FeatherIcons.moreVertical,
                size: 30.w,
              ),
              itemBuilder: (context) => [
                PopupMenuItem(
                  value: 'edit-memory',
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Icon(
                        FeatherIcons.edit3,
                        size: 24.w,
                      ),
                      SizedBox(
                        width: 10.w,
                      ),
                      const Text('Izmijenite kolekciju'),
                    ],
                  ),
                ),
                PopupMenuItem(
                  value: 'edit-memory',
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Icon(
                        FeatherIcons.trash2,
                        size: 24.w,
                      ),
                      SizedBox(
                        width: 10.w,
                      ),
                      const Text('Obrišite kolekciju'),
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
      body: SafeArea(
        minimum: EdgeInsets.fromLTRB(20.w, 0.h, 20.h, 0.h),
        child: NotificationListener<OverscrollIndicatorNotification>(
          onNotification: (overscroll) {
            overscroll.disallowIndicator();
            return true;
          },
          child: SingleChildScrollView(
            physics: const ClampingScrollPhysics(),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(
                  height: 50.h,
                ),
                Container(
                  width: double.infinity,
                  height: 150.h,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(7.r),
                    color: backgroundColor,
                  ),
                  child: Align(
                    alignment: Alignment.center,
                    child: Icon(
                      FeatherIcons.image,
                      size: 50.w,
                    ),
                  ),
                ),
                SizedBox(
                  height: 20.h,
                ),
                const Text('2 uspomene'),
                SizedBox(
                  height: 20.h,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

我建议您直接在generateApplicationRouter中传递数据。

Route generateApplicationRouter() {
  switch (settings.name) {
    // ...
    case collectionRoute:
      return MaterialPageRoute(
        settings: settings, // Just adding settings to your route might also work
        builder: (_) => CollectionPage(settings.arguments as Map<String, String?>),
      );
    // ...
  }
}

class CollectionPage extends StatelessWidget {
  const CollectionPage(Map<String, String?> data, {Key? key})
    : super(key: key);

  @override
  Widget build(BuildContext context) {
    print(data);
    // ...
  }
}