Home > OS >  Passing data between screens using the Navigator.pushNamed () function in Flutter
Passing data between screens using the Navigator.pushNamed () function in Flutter

Time:01-18

Data from the CollectionCard widget needs to be transferred to the CollectionPage screen using the function Navigator.pushNamed function (context, '/ collection', arguments: data). When I do this and try to capture the value of the arguments using function:

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

an error occurs:

_CastError (type 'Null' is not a subtype of type 'Map <String, String?>' in type cast).

This error occurs because the value obtained from the function above is always null.

widgets/collection_card.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/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,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response:

I would recommend you to pass your data directly inside 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);
    // ...
  }
}
  •  Tags:  
  • Related