Flutter custom Widgets: function vs inheritance

Question

My code works. This is more of a question about conventions/good practices, so if you don't want to waste your time, don't read.

I know that when you want to make your own custom widgets in Flutter, you should normally extend StatelessWidget/StatefulWidget.
But is there any downside to using a function instead, that returns a StatelessWidget?
I will give an example of a custom Widget I created (in both ways):

function:

Widget flagImage(String imagePath) {
  return ClipRRect(
    borderRadius: BorderRadius.circular(7),
    child: Image.asset(
      imagePath,
      width: 60,
      height: 40,
      fit: BoxFit.fill,
    ),
  );
}

inheritance:

class FlagImage extends StatelessWidget {
  String imagePath;
  FlagImage(this.imagePath);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(7),
      child: Image.asset(
        imagePath,
        width: 60,
        height: 40,
        fit: BoxFit.fill,
      ),
    );
  }
}

I could insert them as a child to another Widget like flagImage(imagePath) and FlagImage(imagePath) respectively.

Is there any reason I should NOT use a function that returns a small, simple StatelessWidget?
For really small Widgets, I prefer using the function, that's a few less LOC, just my personal preference.

Randal Schwartz · Accepted Answer · 2021-01-13 23:39:20Z

2

Creating a separate build() context permits the framework to optimize builds. Factoring it as a method in the current build() removes that possibility.

answered Jan 13, 2021 at 23:39

Randal Schwartz

44.8k4 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cedric Over a year ago

thanks for the answer :) "optimize builds", is that only when setState is called or also for the initial build?

Randal Schwartz Over a year ago

All builds, such as when things need to be re-laid-out because parents have changed, or children have changed, etc.

Collectives™ on Stack Overflow

Flutter custom Widgets: function vs inheritance

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related