CODEWITHSUNDEEP
performanceflutter
Nitneuq
Nitneuq

Reputation: 5012

Flutter low framerate performace

I saw linear degradation of framerate UI when I launch speed_dial animation plugin. The problem appear when I add sharedpref function here:

 @override
  Widget build(BuildContext context) {
   sharedpref_function();
    return Scaffold(

to listen a saved value, even If the sharedpref is empty I have this degradation.

After 10min whithout doing nothing before, I measure 1120ms/frame when I call _renderSpeedDial

Here is the full code :

  bool _dialVisible = true;
  Color _speedDial =  Colors.pink;

  sharedpref_function() async {     
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
    }
   );
  }

  _renderSpeedDial() {
    return SpeedDial(
      animatedIcon: AnimatedIcons.add_event,
      animatedIconTheme: IconThemeData(size: 22.0),
      backgroundColor: _speedDial,
      // child: Icon(Icons.add),
      /*  onOpen: () => print('OPENING DIAL'),
      onClose: () => print('DIAL CLOSED'),*/
      visible: _dialVisible,
      curve: Curves.bounceIn,
      children: [

        SpeedDialChild(
          child: Icon(Icons.fullscreen_exit, color: Colors.white),
          backgroundColor: Color(0xffa088df),
          onTap: () {
            setState(() {

            });
          },
          label: '1',
          labelStyle: TextStyle(fontWeight: FontWeight.w500,color: Colors.white),
          labelBackgroundColor:Color(0xffa088df),
        ),

      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    sharedpref_function(); // here the sharedpref I use to listen saved value
    return Scaffold(
  body: Stack(
      children: <Widget>[
    Padding
      (
      padding: const EdgeInsets.only(right:10.0, bottom:10.0),
      child:
      _renderSpeedDial(),
    ),
      ],
)
);
  }
}

Upvotes: 0

Views: 2345

Answers (1)

Mariano Zorrilla
Mariano Zorrilla

Reputation: 7686

Your sharedpref_function() method is being called inside your build method. That's not recommended at all because it will be called on every frame the UI needs to be rebuild and your code, having an animation there, will be called at 60fps (on every frame).

Move your method inside initState or didChangeDependencies (there're even more methods that get called once or a few times like didChangeDependencies).

When you need to update values, you could do it inside an onTap gesture and that's it.

Also, test your app in --release (release mode) to truly test the speed of your app.

Upvotes: 5

Related Questions