Flutter modal bottom sheet performance issue

2,690

Solution 1

I have created this PR to fix this performance issue. The problem was that the AnimatedContainer from the ModalBottomSheet was not using the child property and therefore it was forcing to call builder method many times while animation is running instead of using the already built child widget.

Solution 2

just update flutter to latest version. kudos to Enol Casielles Martinez

Share:
2,690
Kevin Kreps
Author by

Kevin Kreps

You guessed it, I am a developer...

Updated on December 18, 2022

Comments

  • Kevin Kreps
    Kevin Kreps 11 months

    When dragging modal bottom sheets, the flutter application starts lagging if a lot of widgets live inside the sheet. This only occurs on the modal bottom sheet (showModalBottomSheet) and not on the normal one (showBottomSheet). Below I attached a screenshot of the performance analysis, which shows, that all widgets inside the sheet are beeing constantly rebuilt while the user is dragging.

    I wrote a little demo to compare the performance of the two types of sheets. Is there a way to prevent the rebuilding while dragging?

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    /// This Widget is the main application widget.
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: "demo",
          home: Scaffold(
            body: MyButtons(),
          ),
        );
      }
    }
    
    class MyButtons extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                onPressed: () {
                  showModalBottomSheet<void>(
                    context: context,
                    builder: (context) => BottomSheet(),
                  );
                },
                child: Text("show modal (laggy)"),
              ),
              RaisedButton(
                onPressed: () {
                  showBottomSheet<void>(
                    context: context,
                    builder: (context) => BottomSheet(),
                  );
                },
                child: Text("show normal (not laggy)"),
              ),
            ],
          ),
        );
      }
    }
    
    class BottomSheet extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Wrap(
          spacing: 8.0,
          alignment: WrapAlignment.center,
          children: List<Widget>.generate(
            100,
            (int index) {
              return InputChip(
                label: Text("test"),
              );
            },
          ),
        );
      }
    }
    
    
    • Darish
      Darish over 3 years
      are you using profile or debug mode to measure the performance?
    • Kevin Kreps
      Kevin Kreps over 3 years
      @Darish thanks for pointing that out, I wasn't using profile mode. With using profile mode, the performance increases, but the problem is still existent. By doubling the items inside the sheet, the difference in performance between modal and normal is clearly visible again (~25fps for the modal sheet).
    • Enol Casielles Martinez
      Enol Casielles Martinez over 3 years
      @Krowit did you find a solution for this issue? I have a complex widget inside a modal bottom sheet and it has the same performance problem.
  • Paresh Mangukiya
    Paresh Mangukiya about 3 years
    Can you please give a sample code example of how to use the code PR
  • Enol Casielles Martinez
    Enol Casielles Martinez about 3 years
    Sorry for the delay, the PR is already included in the master repository of flutter, on 16th May. If you are using a more recent version of the framework you don't need to do anything in order to solve this problem