search

flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
164.54k stars 27.13k forks source link

[flutter_adaptive_scaffold] Drawer items do not scroll #114175

Open percula opened 1 year ago

percula commented 1 year ago

If a large amount of navigation items are used and useDrawer is set to true, the ones at the bottom are cut off.

Sample:


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart';

class Test extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // Define the children to display within the body at different breakpoints.
    final List<Widget> children = <Widget>[
      for (int i = 0; i < 10; i++)
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            color: const Color.fromARGB(255, 255, 201, 197),
            height: 400,
          ),
        )
    ];

    return BottomNavigationBarTheme(
        data: const BottomNavigationBarThemeData(
          unselectedItemColor: Colors.black,
          selectedItemColor: Colors.black,
          backgroundColor: Colors.white,
        ),
        child: AdaptiveScaffold(
          // An option to override the default breakpoints used for small, medium,
          // and large.
            smallBreakpoint: const WidthPlatformBreakpoint(end: 700),
            mediumBreakpoint:
            const WidthPlatformBreakpoint(begin: 700, end: 1000),
            largeBreakpoint: const WidthPlatformBreakpoint(begin: 1000),
            useDrawer: true,
            destinations: const <NavigationDestination>[
              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
              NavigationDestination(
                  icon: Icon(Icons.article), label: 'Articles'),
              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
              NavigationDestination(
                  icon: Icon(Icons.video_call), label: 'Video'),
              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
              NavigationDestination(
                  icon: Icon(Icons.article), label: 'Articles'),
              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
              NavigationDestination(
                  icon: Icon(Icons.video_call), label: 'Video'),
              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
              NavigationDestination(
                  icon: Icon(Icons.article), label: 'Articles'),
              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
              NavigationDestination(
                  icon: Icon(Icons.video_call), label: 'Video'),
              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
              NavigationDestination(
                  icon: Icon(Icons.article), label: 'Articles'),
              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
              NavigationDestination(
                  icon: Icon(Icons.video_call), label: 'Video'),
              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
              NavigationDestination(
                  icon: Icon(Icons.article), label: 'Articles'),
              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
              NavigationDestination(
                  icon: Icon(Icons.video_call), label: 'Video'),
              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
              NavigationDestination(
                  icon: Icon(Icons.article), label: 'Articles'),
              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
              NavigationDestination(
                  icon: Icon(Icons.video_call), label: 'Video'),
              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
              NavigationDestination(
                  icon: Icon(Icons.article), label: 'Articles'),
              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
              NavigationDestination(
                  icon: Icon(Icons.video_call), label: 'Video'),
              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
              NavigationDestination(
                  icon: Icon(Icons.article), label: 'Articles'),
              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
              NavigationDestination(
                  icon: Icon(Icons.video_call), label: 'Video'),
              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
              NavigationDestination(
                  icon: Icon(Icons.article), label: 'Articles'),
              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
              NavigationDestination(
                  icon: Icon(Icons.video_call), label: 'Video'),
              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
              NavigationDestination(
                  icon: Icon(Icons.article), label: 'Articles'),
              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
              NavigationDestination(
                  icon: Icon(Icons.video_call), label: 'Video'),
              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
              NavigationDestination(
                  icon: Icon(Icons.article), label: 'Articles'),
              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
              NavigationDestination(
                  icon: Icon(Icons.video_call), label: 'Video'),
              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
              NavigationDestination(
                  icon: Icon(Icons.article), label: 'Articles'),
              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
              NavigationDestination(
                  icon: Icon(Icons.video_call), label: 'Video')
            ],
            body: (_) => GridView.count(crossAxisCount: 2, children: children),
            smallBody: (_) => ListView.builder(
              itemCount: children.length,
              itemBuilder: (_, int idx) => children[idx],
            ),
            // Define a default secondaryBody.
            secondaryBody: (_) =>
                Container(color: const Color.fromARGB(255, 234, 158, 192)),
            // Override the default secondaryBody during the smallBreakpoint to be
            // empty. Must use AdaptiveScaffold.emptyBuilder to ensure it is properly
            // overridden.
            smallSecondaryBody: AdaptiveScaffold.emptyBuilder));
  }
}
danagbemava-nc commented 1 year ago

Hi @percula, I run your sample and it seems to be working just fine on my end. See the recording below. Am I missing something?

recording https://user-images.githubusercontent.com/88313112/198567214-4cf9823d-1337-460f-a81e-8e5cb49d18a3.mov
percula commented 1 year ago

@danagbemava-nc Sorry, I should have mentioned it only occurs when the window width is small, like a phone and the hamburger menu icon appears.

danagbemava-nc commented 1 year ago

Thanks for the clarification. I can reproduce this issue.

I think it would be best if this is fixed in NavigationRail itself and there's an issue tracking this in https://github.com/flutter/flutter/issues/89167 but for now, I'll be labeling this for further insight from the team.

recording https://user-images.githubusercontent.com/88313112/198587404-fb4443ce-05c6-43c1-9bc2-c3ae7c68bf91.mov
complete sample ```dart import 'package:flutter/material.dart'; import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( home: Test(), ); } } class Test extends StatelessWidget { const Test({super.key}); @override Widget build(BuildContext context) { // Define the children to display within the body at different breakpoints. final List children = [ for (int i = 0; i < 10; i++) Padding( padding: const EdgeInsets.all(8.0), child: Container( color: const Color.fromARGB(255, 255, 201, 197), height: 400, ), ) ]; return BottomNavigationBarTheme( data: const BottomNavigationBarThemeData( unselectedItemColor: Colors.black, selectedItemColor: Colors.black, backgroundColor: Colors.white, ), child: AdaptiveScaffold( // An option to override the default breakpoints used for small, medium, // and large. smallBreakpoint: const WidthPlatformBreakpoint(end: 700), mediumBreakpoint: const WidthPlatformBreakpoint(begin: 700, end: 1000), largeBreakpoint: const WidthPlatformBreakpoint(begin: 1000), useDrawer: true, destinations: const [ NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'), NavigationDestination( icon: Icon(Icons.article), label: 'Articles'), NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'), NavigationDestination( icon: Icon(Icons.video_call), label: 'Video'), NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'), NavigationDestination( icon: Icon(Icons.article), label: 'Articles'), NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'), NavigationDestination( icon: Icon(Icons.video_call), label: 'Video'), NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'), NavigationDestination( icon: Icon(Icons.article), label: 'Articles'), NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'), NavigationDestination( icon: Icon(Icons.video_call), label: 'Video'), NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'), NavigationDestination( icon: Icon(Icons.article), label: 'Articles'), NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'), NavigationDestination( icon: Icon(Icons.video_call), label: 'Video'), NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'), NavigationDestination( icon: Icon(Icons.article), label: 'Articles'), NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'), NavigationDestination( icon: Icon(Icons.video_call), label: 'Video'), NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'), NavigationDestination( icon: Icon(Icons.article), label: 'Articles'), NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'), NavigationDestination( icon: Icon(Icons.video_call), label: 'Video'), NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'), NavigationDestination( icon: Icon(Icons.article), label: 'Articles'), NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'), NavigationDestination( icon: Icon(Icons.video_call), label: 'Video'), NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'), NavigationDestination( icon: Icon(Icons.article), label: 'Articles'), NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'), NavigationDestination( icon: Icon(Icons.video_call), label: 'Video'), NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'), NavigationDestination( icon: Icon(Icons.article), label: 'Articles'), NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'), NavigationDestination( icon: Icon(Icons.video_call), label: 'Video'), NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'), NavigationDestination( icon: Icon(Icons.article), label: 'Articles'), NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'), NavigationDestination( icon: Icon(Icons.video_call), label: 'Video'), NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'), NavigationDestination( icon: Icon(Icons.article), label: 'Articles'), NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'), NavigationDestination( icon: Icon(Icons.video_call), label: 'Video'), NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'), NavigationDestination( icon: Icon(Icons.article), label: 'Articles'), NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'), NavigationDestination( icon: Icon(Icons.video_call), label: 'Video') ], body: (_) => GridView.count(crossAxisCount: 2, children: children), smallBody: (_) => ListView.builder( itemCount: children.length, itemBuilder: (_, int idx) => children[idx], ), // Define a default secondaryBody. secondaryBody: (_) => Container(color: const Color.fromARGB(255, 234, 158, 192)), // Override the default secondaryBody during the smallBreakpoint to be // empty. Must use AdaptiveScaffold.emptyBuilder to ensure it is properly // overridden. smallSecondaryBody: AdaptiveScaffold.emptyBuilder)); } } ```
flutter doctor -v ``` [✓] Flutter (Channel stable, 3.3.6, on macOS 13.0 22A380 darwin-arm, locale en-GB) • Flutter version 3.3.6 on channel stable at /Users/nexus/dev/sdks/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 6928314d50 (3 days ago), 2022-10-25 16:34:41 -0400 • Engine revision 3ad69d7be3 • Dart version 2.18.2 • DevTools version 2.15.0 [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-33, build-tools 33.0.0 • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.0) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14A309 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [!] Android Studio • Android Studio at /Applications/Android Studio Preview.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 ✗ Unable to find bundled Java version. • Try updating or re-installing Android Studio. [✓] Android Studio (version 2021.3) • 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 11.0.13+0-b1751.21-8125866) [!] Android Studio • Android Studio at /Applications/Android Studio Preview 2.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 ✗ Unable to find bundled Java version. • Try updating or re-installing Android Studio. [✓] Android Studio (version 2021.3) • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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 11.0.13+0-b1751.21-8125866) [✓] Android Studio (version 2021.3) • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/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 11.0.13+0-b1751.21-8125866) [✓] VS Code (version 1.72.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 106.0.5249.119 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 2 categories. ``` ``` [!] Flutter (Channel master, 3.5.0-10.0.pre.142, on macOS 13.0 22A380 darwin-arm64, locale en-GB) • Flutter version 3.5.0-10.0.pre.142 on channel master at /Users/nexus/dev/sdks/flutters ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision ea0ddc94cc (10 hours ago), 2022-10-27 19:24:00 -0700 • Engine revision b5c52563bb • Dart version 2.19.0 (build 2.19.0-347.0.dev) • DevTools version 2.18.0 • 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 33.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-33, build-tools 33.0.0 • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.0) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14A309 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [!] Android Studio • Android Studio at /Applications/Android Studio Preview.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 ✗ Unable to find bundled Java version. • Try updating or re-installing Android Studio. [✓] Android Studio (version 2021.3) • 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 11.0.13+0-b1751.21-8125866) [!] Android Studio • Android Studio at /Applications/Android Studio Preview 2.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 ✗ Unable to find bundled Java version. • Try updating or re-installing Android Studio. [✓] Android Studio (version 2021.3) • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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 11.0.13+0-b1751.21-8125866) [✓] Android Studio (version 2021.3) • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/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 11.0.13+0-b1751.21-8125866) [✓] VS Code (version 1.72.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 106.0.5249.119 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 3 categories. ```
Hixie commented 1 year ago

@percula did some great work on this in https://github.com/flutter/packages/pull/2744, if anyone would like to take over and do the last few bits of work I'm sure they would be very grateful!