setState vs notifyListeners vs Obs

In flutter setState vs notifyListeners vs obs all are used to show updated value on screen without refresh or clicking button. setstate used in stateful widget and no additional package required for this, notifyListeners comes with provider package and obs is comes with GetX package. These methods are very popular and used in every Flutter applications. In short words these method auto refresh the variable or and datatype values

setState Example (Flutter)

import 'package:flutter/material.dart';

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _incrementCounter() {
//Here setState update _counter variable automatically
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter Value:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
// When user press _incrementCounter, setState update _counter variable automatically
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: CounterApp(),
  ));
}

Provider

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

class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void incrementCounter() {
//// Here notifyListener update _counter variable automatically
    _counter++;
    notifyListeners();
  }
}

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Counter App'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Counter Value:'),
                Consumer<CounterModel>(
                  builder: (context, counterModel, child) {
                    return Text(
                      '${counterModel.counter}',
                      style: Theme.of(context).textTheme.headline4,
                    );
                  },
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
//// When user press _incrementCounter, Provider update _counter variable automatically
              Provider.of<CounterModel>(context, listen: false).incrementCounter();
            },
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(CounterApp());
}

obs Example (Getx)

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

class CounterController extends GetxController {
//Here in this counter varaibale is obs
  var counter = 0.obs;

  void incrementCounter() {
    counter++;
  }
}

class CounterApp extends StatelessWidget {
  final CounterController counterController = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Counter Value:'),
//// When user press _incrementCounter, Obx update _counter variable automatically
              Obx(() {
                return Text(
                  '${counterController.counter}',
                  style: Theme.of(context).textTheme.headline4,
                );
              }),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
//Increment function
            counterController.incrementCounter();
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

void main() {
  runApp(CounterApp());
}

If you face any issue, please comment below, we will reply soon