Alternate approach of using stateful widgets in flutter

Question

I am exploring flutter and recently I built this very simple light bulb example ( Problems while using Flutter Provider package ).

I realize that any application can use Consumer and Stateless widgets with a main Home app providing all those DataModels , completely skipping Stateful widgets. Here is a small example

class Data with ChangeNotifier {
  bool isOn = false;

  void toggle() {
    this.isOn = !this.isOn;
    notifyListeners();
  }
}

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("main app");
    return ChangeNotifierProvider<Data>(
      create: (context) => Data(),
      child: MaterialApp(
        home: Home(),
      ),
    );
  }
}
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("home");
    return Consumer<Data>(
      builder: (context , data , child) => Scaffold(
        appBar: AppBar(),
        backgroundColor:
            data.isOn ? Colors.yellow[100] : Colors.black,
        body: Center(
          child: Column(
            children: <Widget>[
              Stick(),
              Bulb(),
              Switch()
            ],
          ),
        ),
      ),
    );
  }
}
class Bulb extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("bulb");
    return Consumer<Data>(
      builder: (context , data , child) => Container(
        height: 200,
        width: 250,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(100),
              topRight: Radius.circular(100),
              bottomLeft: Radius.circular(30),
              bottomRight: Radius.circular(30)),
          boxShadow: data.isOn? <BoxShadow>[BoxShadow(spreadRadius: 5,color: Colors.orange , blurRadius: 100)] : null,
          color: data.isOn ? Colors.yellow : Colors.white,
        ),
        child: GestureDetector(
          onTap: () {
            data.toggle();
          },
        ),
      ),
    );
  }
}

So with that being said , Am I correct in concluding that Provider and stateless widgets can replace Stateful widgets fully ? If so , is it a good idea to do so ?

Please also suggest places where stateful widgets are used and where Providers are used.

Thanks for your time and thoughts on this.

Solution

yes definitely you can replace stateful widget with provider and stateless widget. It is totally depends on you that you want to use provider or stateful widget.

In my suggestion if your stateful widget is not big and in that widget you are not calling setstate frequently then it is good to use stateful widget because by adding provider in it you will end up creating more boilerplate code.

So, I suggest you to use provider when your page code is big and you want to break code in to several parts.

In addition to that, I like to draw attention to child property of consumer. Child widget of consumer will not rebuild when data is change, so you can also use it.