Search code examples
iosflutterdartflutter-layout

Flutter ListView Double Bouncing Issue


Out of nowhere I am facing an issue when scrolling through my ListView in Flutter on my simulated iPhone 12 running iOS 15.2 - experience told me to mention it's a new MacBook Pro with M1 Pro Chip. When scrolling up just a little bit the ListView jumps to its Top and does some "Overbounce" Movement. I did not change anything in the code but suddenly this crazy bouncing happened.

I can't reproduce this issue on my physical iOS device, all my ListViews scroll and bounce perfectly fine. It may be a problem of my simulator because even on my emulated Android Device everything is working as it should. I already tried resetting the simulated device and started another Device not started yet - no effect.

Is there anything left I can try?

Since I'm a flutter beginner I hope all information required is provided - let me know if anything further is needed

Simulator

enter image description here

FAQ.dart

import 'package:flutter/material.dart';

import '../../components/FAQExpansionTile.dart';
import '../../models/FAQEntry.dart';

class FAQScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
          title: const Text(
              'FAQ',
              style: TextStyle(
                fontFamily: 'Amatic_SC',
                fontSize: 35,
                fontWeight: FontWeight.bold
              )
          )
      ),
      body: ListView.builder(
        itemCount: FAQEntryTopic.values.length,
          itemBuilder: (context, index) {
            return FAQExpansionTile(
                faqEntryTopic: FAQEntryTopic.values[index]
            );
          }
      ),
  );
}

Flutter Doctor

flutter doctor -v                                                                                        ✔  1078  15:21:26
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale de-DE)
    • Flutter version 2.8.1 at /Users/maxgruber/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 77d935af4d (4 weeks ago), 2021-12-16 08:37:33 -0800
    • Engine revision 890a5fca2e
    • Dart version 2.15.1

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/maxgruber/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2020.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.10+0-b96-7249189)

[✓] IntelliJ IDEA Ultimate Edition (version 2021.2.3)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 63.3.3
    • Dart plugin version 212.5632

[✓] Connected device (3 available)
    • iPhone 12 (mobile) • D900BB5F-546D-44A2-A941-CD597C9CB32F • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    • macOS (desktop)    • macos                                • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 97.0.4692.71
    ! Error: Maxs iPhone is not connected. Xcode will continue when Maxs iPhone is connected. (code -13)

! Doctor found issues in 1 category.


Solution

  • EDIT:

    The old answer no longer works, so here is the new fix. Open your Podfile, which can be found in the iOS directory. Find the post_install do |installer| section, and before the end line add the following:

    target.build_configurations.each do |config|
          config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "i386"
    end
    

    You will most likely need to clean, run pod install from the ios directory, and rebuild/run.

    OLD ANSWER:

    Launch the iOS Simulator in Rotessa mode from Terminal using the following command:

    arch -x86_64 /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app/Contents/MacOS/Simulator
    

    This will resolve the swiping too fast issue on m1 iOS Simulators...