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.
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