cpu usage issue about slide_countdown

[gaodeng]

Checked with DevTools' Highlight repaints and found that it seems that this animation causes the whole page to be repaint. Also tried wrapping a RepaintBoundary around it, no effect, still causes the whole page to be repaint

[farhanfadila1717]

Hi @gaodeng, are you in debug mode? i run it in simulator no issue
Maybe you can try use new version SlideCountdown 2.0.6

[gaodeng]

Hi @gaodeng, are you in debug mode? i run it in simulator no issue Maybe you can try use new version SlideCountdown 2.0.6

I'm testing the release build of the mac app.
I just tried 0.2.6-dev.1 with SlideDirection.none to remove the animation, and the cpu usage is normal.

However, if the animation is shown, it still takes up a lot of cpu. Through devtools, I can observe that the digit switch animation will cause the whole page to repaint, and when the page is complex, then the cpu usage will be high. But I don't quite understand why that animation will cause the whole page to repaint, maybe it's a bug inside the flutter framework?

[farhanfadila1717]

@gaodeng i tried it on my macbook air m1, but found no same problem. If the SlideCountdown widget has animation it shouldn't repaint the whole page. Maybe you did that because there is a setState function in your page
Flutter version: 3.0.1.

[gaodeng]

@farhanfadila1717 Here is the code to reproduce the problem.

import 'package:flutter/material.dart';
import 'package:slide_countdown/slide_countdown.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            SlideCountdown(
              duration: Duration(days: 2),
            )
          ],
        ),
      ),
    );
  }
}

After running the app, Open flutter devtools and click the Highlight Repaints button in devtools.

CircularProgressIndicator has a similar situation, but it can be solved by wrapping a RepaintBoundary. I tried to wrap SlideCountdown with RepaintBoundary, but unfortunately I found it doesn't work.
Here is the link to the documentation https://docs.flutter.dev/development/tools/devtools/inspector#highlight-repaints

you can check the video below, you will see that the whole page is repainting, not just the small part of SlideCountdown.

Simulator.Screen.Recording.-.iPhone.13.-.2022-06-10.at.10.50.03.mp4

[synstin]

same issue
any update?

[farhanfadila1717]

fixed in SlideCountdown lastest version. The older code take a lot of ValueNotifier, the new version just only listen one stream.

[gaodeng]

I believe this issue should be reopened. I have tried the latest version, but the problem remains unresolved. This widget still causes the entire page to repaint.