Do I need a StatefulWidget if my app is using bloc?

Question

I'm missing something.

I recently watched the talk here, where the flutter devs are going through using the bloc development method with reactivex in Dart. If I'm using these streams and streamBuilders to manage data flowing through my app, and rebuild appropriately, does it behoove me to use a StatefulWidget, where I'm using the bloc method anyway? I guess more specifically, why would I want to complicate my app using streams and states, when I could just use streams, wrap what I need to in a provider, wrap some widgets in a streamBuilder, and call it a day?

Answer 1

does it behoove me to use a StatefulWidget, where I'm using the bloc method anyway? I guess more specifically, why would I want to complicate my app using streams and states, when I could just use streams, wrap what I need to in a provider, wrap some widgets in a streamBuilder, and call it a day?

The answer to your questions depends on what your goals are.

A StatefulWidget does not scale to larger applications. The BLOC pattern does.

Why is StatefulWidget not good for larger applications?

Communicating information from one screen to a sibling screen tends to be challenging, meaning you have to write a lot of code to transfer data from one screen to another. It is possible, but it tends to be a pain and that's what the BLOC pattern solves.

It makes it easy to share information between multiple widgets inside our application.

BLOC stands for Business LOgic Component and its idea is to house all the data or state inside the application inside one area. It's outside the rest of the application and makes it easy to access.

That's different from a StatefulWidget, because with a BLOC all the data can live within one class outside the component hierarchy. So the state is being centralized to some outside object.

So with the BLOC pattern you do need a solid understanding of streams and you mentioned the StreamBuilder Widget which is were flutter and streams really come together.

The StreamBuilder takes a stream and a builder function and anytime that StreamBuilder sees a new piece of data it will call the builder function and re render itself on our mobile device, so it would look something like this:

Widget emailField() {
    return StreamBuilder(
        stream: bloc.email,
        builder: (context, snapshot) {
          return TextField(
            keyboardType: TextInputType.emailAddress,
            decoration: InputDecoration(
              hintText: '[email protected]',
              labelText: 'Email Address',
            ),
          );
        });
  }

The above approach being a single global instance which works fine for small application.

The provider you mentioned is a class that extends the inherited widget base class.

import 'package:flutter/material.dart';
import 'bloc.dart';

class Provider extends InheritedWidget {
  final bloc = Bloc();

  bool updateShouldNotify(_) => true;

  static Bloc of(BuildContext, context) {
    return (context.inheritFromWidgetOfExactType(Provider) as Provider).bloc;
  }
}

Answer 2

When using StreamBuilder you are in fact using a StatefulWidget which listen to that Stream. The only difference is that you don't write setState yourself.

Another common use-case is for animations. If you want transitions such as fade/translate/whatever; you'll have to use AnimationController. Which you will store inside a custom StatefulWidget