[flutter_adaptive_scaffold] : Bottom Navigation bar height is too much in Flutter 3.10.1 #127088

aliasgar4558 · 2023-05-18T06:16:04Z

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

Run adaptive scaffold demo example in iPhone or Android platform.
Check the height of bottom navigation bar.
It is way bigger than it should be.

Expected results

Height should be constraints to the height given or default height.
Height is not proper as of now and takes a very large amount of screen with it. (screenshot below)

Actual results

Bottom navigation bar's height shall be proper as it was before.

Code sample

NO code changes made.

Screenshots or Video

Screenshot for issue

Logs

No crash logs, but able to reproduce with Flutter version 3.10.1

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.10.1, on macOS 13.1 22C65 darwin-arm64, locale en-IN)
    • Flutter version 3.10.1 on channel stable at /Users/aliasgarvohra/Development/FlutterSDK/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d3d8effc68 (29 hours ago), 2023-05-16 17:59:05 -0700
    • Engine revision b4fb11214d
    • Dart version 3.0.1
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/aliasgarvohra/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.78.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.64.0

[✓] Connected device (3 available)
    • iPhone 14 Pro Max (mobile) • FEE2A9D1-191A-4907-B550-894D99F1E0E7 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 13.1 22C65 darwin-arm64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 113.0.5672.126

[✓] Network resources
    • All expected network resources are available.

• No issues found!

huycozy · 2023-05-18T10:18:08Z

Thank you for the report. This issue seems to be introduced on flutter_adaptive_scaffold: ^0.1.4 version, see changelog.

And this issue doesn't occur in the previous version 0.1.3 as it used BottomNavigationBar. Related issue: #124984.

Labeling the issue for further investigation.

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.10.1, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.10.1 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d3d8effc68 (26 hours ago), 2023-05-16 17:59:05 -0700
    • Engine revision b4fb11214d
    • Dart version 3.0.1
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.78.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.64.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 113.0.5672.126

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.11.0-6.0.pre.134, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.11.0-6.0.pre.134 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f31dae2a80 (3 hours ago), 2023-05-17 17:18:51 -0700
    • Engine revision d970370779
    • Dart version 3.1.0 (build 3.1.0-118.0.dev)
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.78.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.64.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 113.0.5672.126

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

fmt-Println-MKO · 2023-05-19T00:15:32Z

it only happens on iOS and Android, Web is fine.

there is a padding added, somewhere from SlotLayout. I think it have something todo with the animation.

aliasgar4558 · 2023-05-19T10:38:05Z

@fmt-Println-MKO : Seems like in SlotLayout, there is no change since 2022-August. So need to check the root cause of this issue. Also as you said, it is working fine in web, I checked that as well.

fmt-Println-MKO · 2023-05-19T10:46:02Z

@aliasgar4558 Yes, I just checked the NavigationBar without SlotLayout and there it's fine, no padding.
I think the padding is somewhere calculated as the space for the animation that is used.
If you browse the widget tree you see the padding inside the Ink Widget
As it's fine for the web, there needs to be a calculation with Android iOS check before.

heralight · 2023-06-02T20:16:15Z

hi,

is it perhaps related to #119526 and #123746 ?
I have the same problem after migrating from 3.7 to 3.10 with the simple Scaffold.bottomNavigationBar.

aliasgar4558 · 2023-06-03T07:16:28Z

@heralight, I faced this one in latest package version. Flutter sdk version won't matter, like if you are on 3.7 and try same thing with latest package version, then also it will be reproduced.

JonasESmith · 2023-06-06T17:11:08Z

I am running into this problem as well, I created a new Flutter project and installed flutter_adaptive_scaffold, and the padding problem was no longer there.

fmt-Println-MKO · 2023-06-06T17:31:54Z

so you have that problem with an existing app, but not with a new one?

aliasgar4558 · 2023-06-07T12:41:25Z

@JonasESmith : Can you please verify if you are on latest version of the package in both, pubspec.yaml and pubspec.lock..?

JonasESmith · 2023-06-07T13:04:21Z

@JonasESmith : Can you please verify if you are on latest version of the package in both, pubspec.yaml and pubspec.lock..?

I was incorrect after getting the correct version the padding is still there on a new project. Sorry.

aliasgar4558 · 2023-06-07T13:05:11Z

Yeah, no problem mate @JonasESmith

aliasgar4558 · 2023-06-07T13:07:14Z

EdgeInsets padding = MediaQuery.paddingOf(context);
This line in safe_area.dart (line-90) is causing issue I guess, as it is returning unexpected values for top padding (59 to be specific), so we need to check. @JonasESmith, @fmt-Println-MKO @huycozy , @heralight

austinn · 2023-06-23T18:30:47Z

I have also noticed there is an issue with the top navigation padding as well

austinn · 2023-06-23T18:33:40Z

It is worth noting that I'm only seeing this on ios

fmt-Println-MKO · 2023-06-27T19:09:28Z

it is also on Android.

aliasgar4558 · 2023-06-28T04:08:24Z

@fmt-Println-MKO : Is it working fine now?

fmt-Println-MKO · 2023-06-28T08:26:02Z

@aliasgar4558 no, I haven't had time for further investigation. Just found the same place that might cause the issue as you.

sunndog · 2023-07-03T21:32:04Z

Does adding MediaQuery.removePadding make sense in adaptive_scaffold.dart for the bottomNavigation in Scaffold?

bottomNavigation: !widget.drawerBreakpoint.isActive(context) || !widget.useDrawer
            ? SlotLayout(
                config: <Breakpoint, SlotLayoutConfig>{
                  widget.smallBreakpoint: SlotLayout.from(
                    key: const Key('bottomNavigation'),
                    builder: (_) => MediaQuery.removePadding(
                      removeTop: true,
                      removeBottom: false,
                      removeLeft: false,
                      removeRight: false,
                      context: context,
                      child: AdaptiveScaffold.standardBottomNavigationBar(
                        currentIndex: widget.selectedIndex,
                        destinations: widget.destinations,
                        onDestinationSelected: widget.onSelectedIndexChange,
                      ),
                    ),
                  ),
                },
              )
            : null,

aliasgar4558 · 2023-07-06T12:22:11Z

@sunndog but it is working fine in case of web, if we minimize the web size to something as mobile, so I am not sure if this would be an ideal solution in adaptive scaffold??

Let's see what other members suggest 🙌🏼

maheshmnj · 2023-07-09T05:41:35Z

I am also affected by this issue, Also This is a bug in NavigationBar and not in adaptive_scaffold. Here is a simple reproducible code when a NavigationBar is placed in a stack.

code sample

import 'package:flutter/material.dart';

/// Flutter code sample for [NavigationBar].

void main() => runApp(const NavigationBarApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: NavigationExample());
  }
}

class NavigationExample extends StatefulWidget {
  const NavigationExample({super.key});

  @override
  State<NavigationExample> createState() => _NavigationExampleState();
}

class _NavigationExampleState extends State<NavigationExample> {
  int currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: <Widget>[
        Container(
          color: Colors.red,
          alignment: Alignment.center,
          child: const Text('Page 1'),
        ),
        Container(
          color: Colors.green,
          alignment: Alignment.center,
          child: const Text('Page 2'),
        ),
        Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: const Text('Page 3'),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: NavigationBar(
            onDestinationSelected: (int index) {
              setState(() {
                currentPageIndex = index;
              });
            },
            selectedIndex: currentPageIndex,
            destinations: const <Widget>[
              NavigationDestination(
                icon: Icon(Icons.explore),
                label: 'Explore',
              ),
              NavigationDestination(
                icon: Icon(Icons.commute),
                label: 'Commute',
              ),
              NavigationDestination(
                selectedIcon: Icon(Icons.bookmark),
                icon: Icon(Icons.bookmark_border),
                label: 'Saved',
              ),
            ],
          ),
        )
      ]),
    );
  }
}

~~Removing the package label since its an issue in NavigationBar. Please feel free to add it back if I am wrong.~~

Adding back the labels since it is also affecting the package.

cc: @stuartmorgan

darkalfx · 2023-07-12T16:14:44Z

Not a problem on Windows, but a pretty big one on ios.

The worst part about it how difficult a workaround is to fix it.

Im gonna have to use a stack instead of relying on the scaffold and why?

Just let us specify the padding.

aliasgar4558 · 2023-07-31T02:42:10Z

Any fix on the same ??

JonasESmith · 2023-07-31T13:09:31Z

For the time being I am just using something like bellow so that it functions at all.


    var isMobile = false;

    if (!kIsWeb) {
      isMobile = Platform.isAndroid || Platform.isIOS;
    }
   


    return BlocProvider(
     .... 
      child: isMobile
          ? Scaffold(
             // ... mobile version 
            )
          : AdaptiveScaffold(
            //  ... other versions
            ),
    );

hgaron-blockbar · 2023-08-21T02:25:05Z

I also have this issue - I didn't notice as I've been building for mac and didn't have the issue. Then I previewed in iOS and noticed it right away.

This pr removes the top padding in `MediaQuery` for NavigationBar to fix unexpected padding. The `Scaffold` in flutter framework actually did this but this package didn't. Fix flutter/flutter#127088

github-actions · 2023-09-05T20:00:37Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

huycozy added the in triage Presently being triaged by the triage team label May 18, 2023

huycozy mentioned this issue May 18, 2023

[flutter_adaptive_scaffold] Use NavigationBar instead of BottomNavigationBar for Material 3 Apps #124984

Closed

stuartmorgan added the P2 Important issues not at the top of the work list label May 23, 2023

flutter-triage-bot bot added the team-ecosystem Owned by Ecosystem team label Jul 8, 2023

flutter-triage-bot bot added the triaged-ecosystem Triaged by Ecosystem team label Jul 8, 2023

maheshmnj mentioned this issue Jul 9, 2023

Navbar Height is too much on Android and IOS maheshmnj/navbar_router#17

Closed

ctrysbita mentioned this issue Aug 7, 2023

[flutter_adaptive_scaffold] Fix top padding for NavigationBar flutter/packages#4661

Merged

11 tasks

auto-submit bot closed this as completed in flutter/packages#4661 Aug 22, 2023

github-actions bot locked as resolved and limited conversation to collaborators Sep 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[flutter_adaptive_scaffold] : Bottom Navigation bar height is too much in Flutter 3.10.1 #127088

[flutter_adaptive_scaffold] : Bottom Navigation bar height is too much in Flutter 3.10.1 #127088

aliasgar4558 commented May 18, 2023

huycozy commented May 18, 2023

fmt-Println-MKO commented May 19, 2023

aliasgar4558 commented May 19, 2023

fmt-Println-MKO commented May 19, 2023

heralight commented Jun 2, 2023

aliasgar4558 commented Jun 3, 2023 •

edited

JonasESmith commented Jun 6, 2023

fmt-Println-MKO commented Jun 6, 2023

aliasgar4558 commented Jun 7, 2023

JonasESmith commented Jun 7, 2023

aliasgar4558 commented Jun 7, 2023

aliasgar4558 commented Jun 7, 2023

austinn commented Jun 23, 2023

austinn commented Jun 23, 2023 •

edited

fmt-Println-MKO commented Jun 27, 2023

aliasgar4558 commented Jun 28, 2023

fmt-Println-MKO commented Jun 28, 2023

sunndog commented Jul 3, 2023

aliasgar4558 commented Jul 6, 2023

maheshmnj commented Jul 9, 2023 •

edited

darkalfx commented Jul 12, 2023 •

edited

aliasgar4558 commented Jul 31, 2023

JonasESmith commented Jul 31, 2023 •

edited

hgaron-blockbar commented Aug 21, 2023

github-actions bot commented Sep 5, 2023

[flutter_adaptive_scaffold] : Bottom Navigation bar height is too much in Flutter 3.10.1 #127088

[flutter_adaptive_scaffold] : Bottom Navigation bar height is too much in Flutter 3.10.1 #127088

Comments

aliasgar4558 commented May 18, 2023

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

huycozy commented May 18, 2023

fmt-Println-MKO commented May 19, 2023

aliasgar4558 commented May 19, 2023

fmt-Println-MKO commented May 19, 2023

heralight commented Jun 2, 2023

aliasgar4558 commented Jun 3, 2023 • edited

JonasESmith commented Jun 6, 2023

fmt-Println-MKO commented Jun 6, 2023

aliasgar4558 commented Jun 7, 2023

JonasESmith commented Jun 7, 2023

aliasgar4558 commented Jun 7, 2023

aliasgar4558 commented Jun 7, 2023

austinn commented Jun 23, 2023

austinn commented Jun 23, 2023 • edited

fmt-Println-MKO commented Jun 27, 2023

aliasgar4558 commented Jun 28, 2023

fmt-Println-MKO commented Jun 28, 2023

sunndog commented Jul 3, 2023

aliasgar4558 commented Jul 6, 2023

maheshmnj commented Jul 9, 2023 • edited

darkalfx commented Jul 12, 2023 • edited

aliasgar4558 commented Jul 31, 2023

JonasESmith commented Jul 31, 2023 • edited

hgaron-blockbar commented Aug 21, 2023

github-actions bot commented Sep 5, 2023

aliasgar4558 commented Jun 3, 2023 •

edited

austinn commented Jun 23, 2023 •

edited

maheshmnj commented Jul 9, 2023 •

edited

darkalfx commented Jul 12, 2023 •

edited

JonasESmith commented Jul 31, 2023 •

edited