Flutter modal bottom sheet performance issue
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
Comments
-
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 over 3 yearsare you using profile or debug mode to measure the performance?
-
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 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 about 3 yearsCan you please give a sample code example of how to use the code PR
-
Enol Casielles Martinez about 3 yearsSorry 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