Subclass a class that extends StatelessWidget or StatefulWidget class

Question

Is it possible to create a class that extends a class extending StatelessWidget or StatefulWidget.

For example:

class MyButton extends StatelessWidget {
final String label;
Button({this.label});
@override
Widget build(BuildContext context) {
    return ButtonExample("label");}
}

then

class SubmitButton extends MyButton
{
   String label;
   SubmitButton({Key key, this.label}) : super(label: label);

// then somehow extend the parent build and change only the color
// or in case of StatefulWidget change a functionality
}

I tried to search for examples online but I had not success.

Answer 1

In Flutter composition is preferred over inheritance.
Widgets are not supposed to be extended, this is why there are no examples or tutorials how to do it.

Flutter has a strong focus on composition and the included widget library contains a lot of smaller widgets that do one thing well, that allow to compose them into custom widgets in many different ways.

Answer 2

As stated by Gunter, flutter uses composition over inheritance.

Official source : flutter faq

Rather than having each widget provide a large number of parameters, Flutter embraces composition. Widgets are built out of smaller widgets that you can reuse and combine in novel ways to make custom widgets. For example, rather than subclassing a generic button widget, RaisedButton combines a Material widget with a GestureDetector widget. The Material widget provides the visual design and the GestureDetector widget provides the interaction design.

This means that instead of extending a Widget, you should create a smaller one and then reuse it.

A practical example would be a base button :

class MyButton extends StatelessWidget {
  final Color color;

  MyButton({this.color = Colors.grey, Key key}): super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: Text("My Button"),
    );
  }
}

Then reused using composition to create a more specific type of button :

class OutlineButton extends StatelessWidget {
  final Color color;

  OutlineButton({this.color = Colors.grey, Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        border: Border.all(
          color: color,
          width: 2.0,
          style: BorderStyle.solid,
        ),
      ),
      child: MyButton(
        color: color,
      ),
    );
  }
}

Answer 3

If you strongly need to extend a widget that already extends StatefulWidget you can do something like this:

class WidgetFoo extends StatefulWidget {
  final String varFromFoo = 'foo';
  @override
  State<StatefulWidget> createState() => WidgetFooState<WidgetFoo>();
}

// Don't make this class name private (beginning with _) to allow its usage in other modules.
class WidgetFooState <T extends StatefulWidget> extends State<T> {
  String varFromFooState = 'foo state';
  @override
  Widget build(BuildContext context) {
    return Text(getText());
  }

  String getText() {
    return 'WidgetFoo';
  }
}

class WidgetBar extends WidgetFoo {
  @override
  State<StatefulWidget> createState() => _WidgetBarState<WidgetBar>();
}

class _WidgetBarState extends WidgetFooState<WidgetBar> {
  @override
  String getText() {
    return 'WidgetBar, ${varFromFooState}, ${widget.varFromFoo}';
  }
}

If you instantiate the WidgetBar it will render the WidgetBar, foo state, foo text, using variables from ancestors.

This is not the best way to develop on Flutter but still, that's a direct answer to your question. The extension of stateless widgets is similar. You just add methods that return some default values and that can be overridden in an inherited class. That's the classics of OOP.

Answer 4

You can use mixins. Check dart docs or flutter docs on how to use them. Using mixins, you can add properties/functions to existing class. You would have already seen an example in animation controllers.

Answer 5

In my opinion, one of the valid use-cases for extending a StatefulWidget and the corresponding State is the handling of Streams. I prefere to have a base class that handles the re-subscription instead of repeating the same code over and over again.

abstract class DataRepositoryConsumer extends StatefulWidget {
  const DataRepositoryConsumer({Key? key, required this.dataRepository}) : super(key: key);

  final DataRepository dataRepository;
}

abstract class DataRepositoryConsumerState<T extends DataRepositoryConsumer> extends State<T> {
  @override
  void initState() {
    subscribeToStreams();
    super.initState();
  }

  @override
  void didUpdateWidget(covariant T oldWidget) {
    if (widget.dataRepository != oldWidget.dataRepository) {
      subscribeToStreams();
    }
    super.didUpdateWidget(oldWidget);
  }

  // method used to get the streams from the dataRepository and store them in the state
  void subscribeToDataStreams();
}