3

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.

Cedric
  • 470
  • 6
  • 20

1 Answers1

2

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

Randal Schwartz
  • 39,428
  • 4
  • 43
  • 70
  • thanks for the answer :) "optimize builds", is that only when setState is called or also for the initial build? – Cedric Jan 14 '21 at 01:17
  • 1
    All builds, such as when things need to be re-laid-out because parents have changed, or children have changed, etc. – Randal Schwartz Jan 14 '21 at 01:24