Question 76810 in Flutter Question posted in
The official Flutter documentation can be found 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

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.

Tags:

2

Answers


  1. 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')],
                    ),
                  );
                },
              );
            },
          ),
        )
      ],
    );
  }
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search