I want to have Navigator Widget in the CustomScrollView(CustomScrollView as a parent of Navigator) but It gives an error in my flutter app

Question

I want to have Navigator Widget in the CustomScrollView(CustomScrollView as a parent of Navigator) but It gives an error in my flutter app: constraints.biggest.isFinite is not true

My Code:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverToBoxAdapter(
          child: Navigator(
            onGenerateRoute: (settings) {
              return MaterialPageRoute(builder: (BuildContext context) {
                return Scaffold(
                  body: Column(
                    children: [Text('some Teext')],
                  ),
                );
              });
            },
          ),
        )
      ],
    );
  }
}

I know that If I wrap my Navigator widget with SizedBox having specific height, the error will be gone but I don't want specific height.

I want to add CustomScrollView because I want my top app bar as floating on the screen as well as above my Navigator. Basically this navigator is a nested navigator. Thanks in advance.I Appreciate your answers.

score 0 · Answer 1 · answered Feb 04 '23 at 12:43

0

The issue is about constraints , you can use SliverFillRemaining

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

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverFillRemaining(
          child: Navigator(
            onGenerateRoute: (settings) {
              return MaterialPageRoute(
                builder: (BuildContext context) {
                  return Scaffold(
                    body: Column(
                      children: [Text('some Teext')],
                    ),
                  );
                },
              );
            },
          ),
        )
      ],
    );
  }
}

answered Feb 04 '23 at 12:43

Md. Yeasin Sheikh

54,221
7
29
56

I used that approach before but the Issue I got is when I add more widgets into Column I face overflow error and then If I try to wrap my column to SingleChildScrollWidget the error got vanished but after that CustomScrollView doesn't work but SingleChildView scrolls the body and Ultimately I don't get the desired out that is floating app bar – Mehroze Zaidi Feb 05 '23 at 11:53
Actually I prefer using `body:CustomScrolView`. you can just add the sliverAppbar on every page – Md. Yeasin Sheikh Feb 05 '23 at 12:05
Bro this could be redundant code and will be built when navigating between screens. – Mehroze Zaidi Feb 05 '23 at 12:11
can't we have a good approach. – Mehroze Zaidi Feb 05 '23 at 12:11

Karlo Verde · Answer 2 · 2023-04-11T23:29:12.420

You can use a NestedScrollView to achieve what you are looking for.

Here you have an example:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          final handle =
              NestedScrollView.sliverOverlapAbsorberHandleFor(context);
          return [
            SliverOverlapAbsorber(
              handle: handle,
              sliver: SliverAppBar(
                title: const Text('My Reusable Sliver App Bar'),
                floating: true,
                forceElevated: innerBoxIsScrolled,
              ),
            ),
          ];
        },
        body: Builder(
          builder: (context) {
            final handle =
                NestedScrollView.sliverOverlapAbsorberHandleFor(context);
            return Navigator(
              onGenerateRoute: (settings) => MaterialPageRoute(
                builder: (context) => CustomScrollView(
                  slivers: [
                    SliverOverlapInjector(handle: handle),
                    // Other slivers here.
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Beware of a limitation: nesting multiple NestedScrollViews one inside another results in an overflow issue. See more here.

I want to have Navigator Widget in the CustomScrollView(CustomScrollView as a parent of Navigator) but It gives an error in my flutter app

2 Answers2