Function or StatelessWidget Which one is best?

Question

I want to make the code a bit more concise. Which one is better? Does using StatelessWidget affect performance?

If there is only one place to use this widget, which one to use?

class WebViewPopupMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PopupMenuButton(
      itemBuilder: (context) => <PopupMenuItem<int>>[
        _buildItem(0, 'Refresh', Icons.refresh),
        WebViewPopupMenuItem(1, 'Favourite', Icons.favorite_border)
      ],
    );
  }
  /// 1 used Function
  _buildItem(value, text, iconData) {
    return PopupMenuItem<int>(
      value: value,
      child: Row(
        children: <Widget>[
          Icon(
            iconData,
            size: 20,
          ),
          Text(text)
        ],
      ),
    );
  }
}
/// 2 used StatelessWidget
class WebViewPopupMenuItem<T> extends StatelessWidget {
  final T value;
  final IconData iconData;
  final String text;
  WebViewPopupMenuItem(this.value, this.iconData, this.text);

  @override
  Widget build(BuildContext context) {
    return PopupMenuItem<T>(
      value: value,
      child: Row(
        children: <Widget>[
          Icon(iconData,size: 20),
          Text(text)
        ],
      ),
    );
  }
}

Here is the code

Personally, I would go for the second approach. It is more reusable and concise. However, I would move it to a different file. — Pankaj Nikam, Jul 24 '19 at 04:04

score 0 · Answer 1 · answered Jul 24 '19 at 04:12

If you are able to, always go with a stateless or stateful widget over a function that returns a widget.

I would create a new file with the stateless widget. Then in the original import the stateless widget, and use it normally. Here is an example using the code you displayed:

Parent Widget (WebViewPopupMenu.dart):

import './WebViewPopupMenuItem.dart';

class WebViewPopupMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PopupMenuButton(
      itemBuilder: (context) => <PopupMenuItem<int>>[
        _buildItem(0, 'Refresh', Icons.refresh),
        WebViewPopupMenuItem(1, 'Favourite', Icons.favorite_border)
      ],
    );
  }
  /// 1 used Function
  _buildItem(value, text, iconData) {
    return PopupMenuItem<int>(
      value: value,
      child: Row(
        children: <Widget>[
          Icon(
            iconData,
            size: 20,
          ),
          Text(text)
        ],
      ),
    );
  }
}

Child Widget (WebViewPopupMenuItem.dart):

class WebViewPopupMenuItem<T> extends StatelessWidget {
  final T value;
  final IconData iconData;
  final String text;
  WebViewPopupMenuItem(this.value, this.iconData, this.text);

  @override
  Widget build(BuildContext context) {
    return PopupMenuItem<T>(
      value: value,
      child: Row(
        children: <Widget>[
          Icon(iconData,size: 20),
          Text(text)
        ],
      ),
    );
  }
}

After importing the file you would just use the widget normally.

Hopefully, you find this helpful. Really easy to do and keeps everything concise/clean.

Function or StatelessWidget Which one is best?

1 Answers1