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.

Answer 1

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')],
                    ),
                  );
                },
              );
            },
          ),
        )
      ],
    );
  }
}

Answer 2

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.