Should I use getters for building widget sub-tree?

Question

Today I faced the new code composing style in Flutter. Usually I'm using the next way to declare widget tree :

This is a class that we have after create new flutter project(to save your time I publish only build method) :


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

The difference, that I seen today in some flutter project in github, to declare widgets as getters :


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            textPushed,
            counterText,
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget get textPushed {
    return Text(
      'You have pushed the button this many times:',
    );
  }

  Widget get counterText {
    return Text(
      '$_counter',
      style: Theme.of(context).textTheme.headline4,
    );

I have never seen this approach of using getters for building widgets and I want to know is it a good practice or not and why?

Using getters would destroy the entire concept of "reusable code". By using getters, you can't pass any data to it (eg: child, text, color, etc) and the code can't be located in another file. It would be better to use Stateless/Stateful Widgets to achieve this. Take a look at: https://stackoverflow.com/questions/53234825/what-is-the-difference-between-functions-and-classes-to-create-reusable-widgets/53234826#53234826 — CoderUni, Apr 12 '21 at 13:14

score 6 · Accepted Answer · edited Apr 15 '21 at 07:07

I'm going to compare this method with the main method that is used in flutter which is creating a widget class for each widget that you feel u should be defining a getter for it

it is bad practice because :

when you are creating a widget with a function there is no element associated to that widget, and you are passing and using the main widget's context
when you are creating a separate class for a widget you have the option to refactor it in lots of ways for example make it stateful or stateless without any hassle
It is hard to debug when you define a widget in a separate class you will give a name to it, and it is easy to trace that widget inside the widget tree and debug it

and lots of other things, the described method is similar to the functional components in reacting there is a good discussion about this in the flutters GitHub page that some good programmers have participated you can see that for more knowledge about this topic here is the link : https://github.com/flutter/flutter/issues/19269

Ravi Sevta · Answer 2 · 2021-04-16T16:39:58.550

I see peoples do not prefer this approach(functional widget/ getter for widget) because of many reasons(some of the reasons are described in @Amir Hossein Mirzaei's answer).

but still, some people use this to write clean and less code.

I'm using it in my code for:

small widget which does not require its own context and does not depend on data changes.
grouping widgets for code cleanup.

So from my suggestion, it's not a bad practice to use a functional widget for limited use.

score 0 · Answer 3 · answered Apr 17 '21 at 14:41

getter for widget is usefull when you have many widget in one screen.

for example:

class MyScreen extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          padding: EdgeInsets.all(81),
          child: contentWidget(),
        )
    );
  }

  Column contentWidget() {
    return Column(
          children: [
            searchWidget(),
            filterwidget(),
            listWidget(
                count: 10
            ),
            addCommentWidget(),
          ],
        );
  }

  Widget searchWidget() { ... return a widget ...}

  Widget filterwidget(){ ... return a widget ... }

  Widget listWidget({int count : 100}){ ... return a widget ... }

  Widget addCommentWidget() { ... return a widget ... }
}

from that code, we know the rough preview of my statelessWidget. look my contentWidget() function.

another benefit is we can directly go to a widget from structure panel in Android Studio

and from my opinion, using a functional widget is better that getter widget because flutter widget is always use '()' to create a widget.

Should I use getters for building widget sub-tree?

3 Answers3