Search code examples
flutterconventionscustom-widgets

Flutter custom Widgets: function vs inheritance


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.


Solution

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