IconButton widget in my flutter app takes 2-3 seconds to render. Why does this happen?

Question

I am a flutter newbie. I have two IconButtons in my android flutter app. When i run the app the two IconButtons take 2 seconds to render after all other components have rendered.

This is my code, The IconButtons are used in the end:

class MyHomePageState extends State<MyHomePage> {
  late Widget _iconButton1;
  late Widget _iconButton2;
  @override
  void initState() {
    _iconButton1 = IconButton(
      padding: const EdgeInsets.all(0),
      iconSize: 80,
      onPressed: () {
        setTime();
        setState(() {});
      },
      icon: Image.asset("assets/reset_big.png"),
    );
    _iconButton2 = IconButton(
      padding: const EdgeInsets.all(0),
      iconSize: 80,
      onPressed: () {
        datePicker();
        setState(() {});
      },
      icon: Image.asset("assets/calendar_big.png"),
    );
    super.initState();
    count();
    setState(() {});
  }

 @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
            image: AssetImage("assets/bgimg.jpg"), fit: BoxFit.cover),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          title: Column(
            children: <Widget>[
              const SizedBox(
                height: 20,
              ),
              Text(
                widget.title,
                style: const TextStyle(
                    fontFamily: 'Poppins', fontSize: 40, color: Colors.white60),
              ),
            ],
          ),
          elevation: 0,
          backgroundColor: Colors.transparent,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Stack(
                alignment: Alignment.center,
                children: [
                  BlurryContainer(
                    blur: 0,
                    height: 150,
                    width: 150,
                    color: Colors.transparent,
                    borderRadius: const BorderRadius.all(Radius.circular(100)),
                    child: Center(
                      child: Text(
                        '$curr',
                        style: const TextStyle(
                            fontFamily: 'Rubik',
                            fontSize: 80,
                            color: Color.fromARGB(255, 240, 238, 243)),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Container(
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.transparent,
                ),
                child: _iconButton1),
            const SizedBox(
              height: 10,
            ),
            _iconButton2
            FloatingActionButton(onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => SettingsScreen()));
            })
          ],
        ),
      ),
    );
  }
}

and when i debug the app i get this in the console. Don't know if its related to the issue.

I/MSHandlerLifeCycle(16618): isMultiSplitHandlerRequested: windowingMode=1 isFullscreen=true isPopOver=false isHidden=false skipActivityType=false isHandlerType=true this: DecorView@fe2bf28[MainActivity]

I thought it was because the widgets were being rebuilt and changed my code as this post says Prevent widget from being rebuilt But it has no effect.

I want the buttons to render just like the other components do.

Answer 1

Your image sizes are probably too large.

"assets/calendar_big.png"
"assets/reset_big.png"

Please check the sizes.

Also, pre cache the image like this inside initState

precacheImage(AssetImage("assets/calendar_big.png"), context);
precacheImage(AssetImage("assets/reset_big.png"), context);

Why are you initializing the widgets inside initState?

Remove these from initState

    _iconButton1 = IconButton(
      padding: const EdgeInsets.all(0),
      iconSize: 80,
      onPressed: () {
        setTime();
        setState(() {});
      },
      icon: Image.asset("assets/reset_big.png"),
    );
    _iconButton2 = IconButton(
      padding: const EdgeInsets.all(0),
      iconSize: 80,
      onPressed: () {
        datePicker();
        setState(() {});
      },
      icon: Image.asset("assets/calendar_big.png"),
    );

Add them directly where they are needed in place of _iconButton1 and _iconButton2.

child: _iconButton1
_iconButton2