Search code examples
flutterdartflutter-layoutflutter-state

Why Stateless widget rebuild on refresh in flutter


I have created a demo,

I have made a stateful home screen where a column containing two containers.

one is stateless made separately...

On scaffold I have placed refresh button to change randomly color but I don't want to make changes to stateless widget , but it changes on refresh..

To make my point clear I have made this demo, actually I am stuck in my app

here is my code

class HomeScreen extends StatefulWidget {

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
         backgroundColor: Color.fromRGBO(Random().nextInt(255), Random().nextInt(255), Random().nextInt(255), 1),

         title: Text('Demo'),
      actions: [IconButton(onPressed: (){

        setState(() {

        });
      }, icon: Icon(Icons.refresh))],

      ),

      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
         Container(
           height: 100,
           color: Color.fromRGBO(Random().nextInt(255), Random().nextInt(255), Random().nextInt(255), 1),
         ),
          MyWidget(),
        ],
      )
    );
  }
}

class MyWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Color.fromRGBO(Random().nextInt(255), Random().nextInt(255), Random().nextInt(255), 1),
      child: Center(child: Text('Why this ,stateless ,also changed on refresh..')),

    );
  }
}


Solution

  • Use const with key constructor

    class MyWidget extends StatelessWidget {
      const MyWidget({Key? key}) : super(key: key);
    

    And use

    const MyWidget(),