skip to Main Content

I have a page in my app that shows a message saying ‘Feature is implementing’, and it has a back button to return to the same route the user was on before. I have tried using navigator.pop() and keeping the history, but neither of those solutions have worked. I have also tried adding an extra parameter to the route, but it doesn’t seem to be working as expected.

I am using GoRouter, and I have defined a route for the ‘Feature is implementing’ page like this:

router.dart

      GoRoute(
      path: '/coming-soon/:previousRoute',
      pageBuilder: (context, state) {
        final previousRoute = state.params['previousRoute'];
        return MaterialPage(
          key: ValueKey('coming-soon'),
          child: AppComingSoon(previousRoute: previousRoute),
        );
      },
    ),

And here is the code for the AppComingSoon widget:

class AppComingSoon extends StatelessWidget {
  final String? previousRoute;
  final String? extraData;

  const AppComingSoon({Key? key, this.previousRoute, this.extraData})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        titleSpacing: 4,
        leading: IconButton(
          icon: const Icon(PhosphorIcons.arrowLeft),
          onPressed: () {
            (context).go("/$previousRoute");
          },
        ),
        elevation: 0,
        title: Text(context.l10n.buttonBack),
      ),
      body: Column(
        children: [
          Container(
            width: SizeConfig.screenWidth,
            height: SizeConfig.screenHeight * 0.55,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: Image.asset(
                  'assets/Graphics/coming-soon.png',
                ).image,
                fit: BoxFit.fill,
                alignment: Alignment.topCenter,
              ),
            ),
          ),
          SizedBox(
            height: getProportionateScreenWidth(16),
          ),
          Padding(
            padding: EdgeInsets.only(
              left: getProportionateScreenWidth(20),
              right: getProportionateScreenWidth(20),
            ),
            child: Column(
              children: [
                Text(
                  "implementing this feature in the app.",
                  style: Theme.of(context).textTheme.substitleSemiBold,
                  textAlign: TextAlign.center,
                ),
                SizedBox(
                  height: getProportionateScreenWidth(16),
                ),
                Text(
                  "If you need support with this topic",
                  style: Theme.of(context).textTheme.body1Regular,
                  textAlign: TextAlign.center,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

I am calling the ‘Feature is implementing’ page from multiple places in my app, including this example code for the GoalsPageBodyGoals widget:

class GoalsPageBodyGoals extends StatelessWidget {
  final List<Widget> data;

  const GoalsPageBodyGoals({Key? key, required this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ...data,
      const SizedBox(height: 24),
      Column(
        key: const Key('goals_page_action_buttons'),
        children: [
          AppButtons.button(
              onPressed: () => context.go('/add-goal'),
              child: Text(context.l10n.goalsListPrimaryButtonText)),
          AppButtons.textButton(
            onPressed: () => context.go('/coming-soon/goals'),
            phosphorIcon: PhosphorIcons.arrowRight,
            child: Text(context.l10n.goalsListTextLink),
          ),
        ],
      ),
    ]);
  }
}

Please help!

2

Answers


  1. Chosen as BEST ANSWER
            GoRoute(
          name: 'coming-soon',
          path: '/coming-soon',
          builder: (context, _) {
            final data = _.extra as Map<String, dynamic>;
            return AppComingSoon(
              previousRoute: data['route']!,
              extraData: data['data'],
            );
          },
        ),
    

    this solution worked for me

    and in the back button

         onPressed: () {
            (context).go("$previousRoute", extra: extraData);
          },
        ),
    

  2. You can use context.pop(); to pop like we do on navigator1 navigator.pop().

    and navigator.push is like context.push() and context.pushNamed().

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search