Why stateless widget rebuild on entering new data-CodePudding

I have created a screen for entering data and display, with a stateful widget HomeScreen

I have used two widget inside home screen which are entry form and display data , both are stateless widgets...but Whenever I add records it changes colour of stateless widget's card as I have set as random colour. that means that widget is also rebuild eventhought it is stateless..

Y its happening as I don't want to change colour on entering each records.

or looks like I am having a wrong concept of stateless nd stateful..

I think widget which is set as stateless remains unchanged...

Correct me If I am wrong..

here is my 3 files

HomeScreen.dart


import 'package:flutter/material.dart';
import 'displaydata.dart';
import 'entryform.dart';
class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
  List <double> numbers=[44.43,65.64,35.64,76.64];
  void _addRecord(double num)
  {
   numbers.add(num);
    setState(() {
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('okay'),),
      body: Column(children: [
        EntryForm(_addRecord),
        DisplayData(list: numbers,),
      ],),
    );
  }
}

EntryForm.dart

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

class EntryForm extends StatelessWidget {
  final Function addrecord;
  EntryForm(this.addrecord);
  final txtname=TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Color.fromRGBO(Random().nextInt(255), Random().nextInt(255), Random().nextInt(255), 1),
      child: Padding(

        padding: const EdgeInsets.all(14.0),
        child: Container(
          color: Colors.green,
          child: Column(
            children: [
              TextField(
                controller: txtname,
              ),
              SizedBox(height: 10,),
              TextButton(onPressed: (){
                  addrecord(double.parse(txtname.text));
                }, child: Text('Add Record')),
            ],
          ),
        ),
      ),
    );
  }
}

DisplayData.dart

import 'package:flutter/material.dart';

class DisplayData extends StatelessWidget {
  final List<double> list;
  DisplayData({required this.list});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      child: ListView.builder(
         itemCount: list.length,
          itemBuilder: (context,index){
             return Text(list[index].toString(),style: TextStyle(fontSize: 30.0),);
          }),
    );
  }
}

``

CodePudding user response：

So, when a stateful widget rebuilds, it rebuilds entirely with its children included no matter stateful or stateless they are, unless the child widget is marked as const (then rebuild of a child won't happen as it shall remain the same anyway).

Particular in your example, onPressed triggers parent function _addRecord which calls setState(). Parent widget rebuilds whenever setState is called with new parameters and because its child EntryForm() depends on those it has to be rebuilt as well.

Hopes it'll add some to your understanding of state.

CodePudding user response：

Well, you are right and wrong both at the same time.

Your statement 'I think widget which is set as stateless remains unchanged...' - This is true.

So Stateless widget is an immutable widget that cannot react to state changes and re-render, you will have to use some form of state management.

You just have the wrong concept of Stateful Widget. Stateful widget will rebuild the whole widget when you call setState(). Does not matter if you have stateless widgets inside a stateful widget, the whole stateful widget will be rebuilt if you call setState().