Stateful or Stateless Widget when breaking down a Stateful build method?

Help General
,
1

Hi,

So I have this StatefulWidget class class FooPage. Right now the FooPage’s build is pretty big because I have a lot of duplicated code:

Column(
  Text()
  Row(Text, Slider)
  Row(Text, Slider)
  Row(Text, Slider)
  Text()
  Row(Text, Slider)
  Row(Text, Slider)
  Row(Text, Slider)
)

From a logical perspective I can generalize this structure (Text with 3 sliders) into a function and build them dynamically BUT that would just move the codes to another line(s) inside the FooPage.

What I wanted is to generalized it as an Actual class. Something like: SliderTitledSectionWidget (or whatever).

The problem now is that I don’t if I should use a Stateless or a Stateful class to inherit from when creating the “SliderTitledSectionWidget”.

As far as I can tell a Stateless one should be fine since the variables holding the dynamic values would all be stored in the FooPage (Stateful). So the rendering would be triggered by a setState:

class _FooPageState extends State<FooPage> {
    double sliderValue1;
    double sliderValue2;
    double sliderValue3;
    // ...
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            // ...
            SliderTitledSectionWidget(
                title: "Some Title",
                sliderValue1: sliderValue1,
                sliderValue2: sliderValue2,
                sliderValue3: sliderValue3,
                onSliderValue1Changed: (double newVal) { setState((){sliderValue1 = newVal}) },
                onSliderValue2Changed: (double newVal) { setState((){sliderValue2 = newVal}) },
                onSliderValue3Changed: (double newVal) { setState((){sliderValue3 = newVal}) }
            ),
        );
    }
}

Does that make sense for SliderTitledSectionWidget to be Stateless widget?

Thank you for reading

2

Unless you need to store state inside the widget use a StatelessWidget.
If you use watch_it you rarely need Statefulwigets at all

2 Likes