GetView<\/code> y se define la l\u00f3gica de presentaci\u00f3n en el m\u00e9todo build<\/code>.<\/p>\n\n\n\nclass CounterView extends GetView<CounterController> {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text('Counter')),\n body: Center(\n child: Text('Count: ${controller.count}'),\n ),\n floatingActionButton: FloatingActionButton(\n onPressed: () => controller.increment(),\n child: Icon(Icons.add),\n ),\n );\n }\n}\n<\/code><\/code><\/pre>\n\n\n\nEn Riverpod, la vista se crea utilizando el m\u00e9todo Consumer<\/code> y se define la l\u00f3gica de presentaci\u00f3n dentro de un widget hijo.<\/p>\n\n\n\nclass CounterView extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text('Counter')),\n body: Center(\n child: Consumer(\n builder: (context, watch, child) {\n final count = watch(counterProvider).state;\n return Text('Count: $count');\n },\n ),\n ),\n floatingActionButton: FloatingActionButton(\n onPressed: () => context.read(counterProvider).increment(),\n child: Icon(Icons.add),\n ),\n );\n }\n}\n<\/code><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
2. Creaci\u00f3n de un controlador<\/h2>\n\n\n\n
En GetX, se define un controlador utilizando la clase GetxController<\/code> y se definen los m\u00e9todos de la l\u00f3gica de negocio.<\/p>\n\n\n\nclass CounterController extends GetxController {\n var count = 0;\n\n void increment() {\n count++;\n update();\n }\n}\n<\/code><\/code><\/pre>\n\n\n\nEn Riverpod, se define un controlador utilizando el m\u00e9todo StateNotifier<\/code> y se definen los m\u00e9todos de la l\u00f3gica de negocio.<\/p>\n\n\n\nclass CounterController extends StateNotifier<int> {\n CounterController() : super(0);\n\n void increment() {\n state++;\n }\n}\n<\/code><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
3. Acceso al controlador desde el View<\/h2>\n\n\n\n
En GetX, se utiliza el m\u00e9todo Get.put<\/code> para instanciar el controlador en la vista y luego se accede a \u00e9l utilizando la propiedad controller<\/code>.<\/p>\n\n\n\nclass CounterView extends GetView<CounterController> {\n @override\n Widget build(BuildContext context) {\n Get.put(CounterController());\n return Scaffold(\n appBar: AppBar(title: Text('Counter')),\n body: Center(\n child: Text('Count: ${controller.count}'),\n ),\n floatingActionButton: FloatingActionButton(\n onPressed: () => controller.increment(),\n child: Icon(Icons.add),\n ),\n );\n }\n}\n<\/code><\/code><\/pre>\n\n\n\nEn Riverpod, se utiliza un Provider<\/code> para instanciar el controlador y se accede a \u00e9l utilizando el m\u00e9todo watch<\/code> o read<\/code> en la vista.<\/p>\n\n\n\nfinal counterProvider = StateNotifierProvider<CounterController>((ref) => CounterController());\n\nclass CounterView extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text('Counter')),\n body: Center(\n child: Consumer(\n builder: (context, watch, child) {\n final count = watch(counterProvider).state;\n return Text('Count: $count');\n },\n ),\n ),\n floatingActionButton: FloatingActionButton(\n onPressed: () => context.read(counterProvider).increment(),\n child: Icon(Icons.add),\n ),\n );\n }\n}\n<\/code><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
4. Inyecci\u00f3n de dependencias:<\/h2>\n\n\n\n
<\/p>\n\n\n\n
En GetX, la inyecci\u00f3n de dependencias se realiza a trav\u00e9s del m\u00e9todo Get.put<\/code> en la vista o en el controlador.<\/p>\n\n\n\nGet.put(MyDependency());\n\nclass MyController extends GetxController {\n final MyDependency dependency;\n\n MyController(this.dependency);\n}\n<\/code><\/code><\/pre>\n\n\n\nEn Riverpod, la inyecci\u00f3n de dependencias se realiza a trav\u00e9s de los Provider<\/code> y se puede acceder a ellos utilizando el m\u00e9todo watch<\/code> o read<\/code>.<\/p>\n\n\n\nfinal myDependencyProvider = Provider((ref) => MyDependency());\n\nclass MyController {\n final MyDependency dependency;\n\n MyController(this.dependency);\n}\n\nfinal myControllerProvider = Provider((ref) => MyController(ref.watch(myDependencyProvider)));\n<\/code><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
<\/p>\n\n\n\n
5. Uso de Streams:<\/h2>\n\n\n\n
En GetX, el manejo de Streams se realiza a trav\u00e9s de la clase Rx<\/code> y sus derivados. Por ejemplo, se puede utilizar RxInt<\/code> para manejar un contador que emita cambios.<\/p>\n\n\n\nclass CounterController extends GetxController {\n var count = RxInt(0);\n\n void increment() {\n count.value++;\n }\n}\n<\/code><\/code><\/pre>\n\n\n\nEn Riverpod, se puede utilizar el m\u00e9todo StreamProvider<\/code> para crear un Stream<\/code> que emita cambios y luego acceder a \u00e9l en la vista utilizando el m\u00e9todo watch<\/code>.<\/p>\n\n\n\nfinal counterStreamProvider = StreamProvider<int>((ref) {\n final controller = ref.watch(counterControllerProvider);\n return controller.counterStream;\n});\n\nclass CounterController {\n var _counter = 0;\n final _counterController = StreamController<int>();\n\n Stream<int> get counterStream => _counterController.stream;\n\n void increment() {\n _counter++;\n _counterController.add(_counter);\n }\n}\n<\/code><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
6. Uso de Future:<\/h2>\n\n\n\n
En GetX, el manejo de Futures se realiza a trav\u00e9s de la clase FutureBuilder<\/code> y su m\u00e9todo obx<\/code>.<\/p>\n\n\n\nclass CounterView extends GetView<CounterController> {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text('Counter')),\n body: Center(\n child: FutureBuilder<int>(\n future: controller.fetchCount(),\n builder: (context, snapshot) {\n if (snapshot.hasData) {\n return Text('Count: ${snapshot.data}');\n } else if (snapshot.hasError) {\n return Text('Error: ${snapshot.error}');\n }\n return CircularProgressIndicator();\n },\n ),\n ),\n floatingActionButton: FloatingActionButton(\n onPressed: () => controller.increment(),\n child: Icon(Icons.add),\n ),\n );\n }\n}\n\nclass CounterController extends GetxController {\n var count = 0;\n\n Future<int> fetchCount() async {\n \/\/ Llamada a una API o cualquier otra operaci\u00f3n as\u00edncrona\n await Future.delayed(Duration(seconds: 2));\n return count;\n }\n}\n<\/code><\/code><\/pre>\n\n\n\nEn Riverpod, se utiliza el m\u00e9todo FutureProvider<\/code> para crear un Future<\/code> que emita cambios y luego acceder a \u00e9l en la vista utilizando el m\u00e9todo watch<\/code>.<\/p>\n\n\n\nfinal counterFutureProvider = FutureProvider<int>((ref) {\n final controller = ref.watch(counterControllerProvider);\n return controller.fetchCount();\n});\n\nclass CounterController {\n var count = 0;\n\n Future<int> fetchCount() async {\n \/\/ Llamada a una API o cualquier otra operaci\u00f3n as\u00edncrona\n await Future.delayed(Duration(seconds: 2));\n return count;\n }\n}\n\nclass CounterView extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(title: Text('Counter')),\n body: Center(\n child: Consumer(\n builder: (context, watch, child) {\n final countFuture = watch(counterFutureProvider);\n return countFuture.when(\n data: (count) => Text('Count: $count'),\n loading: () => CircularProgressIndicator(),\n error: (error, stackTrace) => Text('Error: $error'),\n );\n },\n ),\n ),\n floatingActionButton: FloatingActionButton(\n onPressed: () => context.read(counterControllerProvider).increment(),\n child: Icon(Icons.add),\n ),\n );\n }\n}\n<\/code><\/code><\/pre>\n\n\n\nEn resumen, GetX y Riverpod ofrecen formas eficientes y sencillas de manejar Streams y Futures en una aplicaci\u00f3n Flutter. La elecci\u00f3n entre una u otra depender\u00e1 de las necesidades espec\u00edficas de cada proyecto y de la preferencia del desarrollador. En general, si se necesita un enfoque m\u00e1s ligero y directo, GetX puede ser una buena opci\u00f3n, mientras que si se necesita una mayor modularidad y una mejor integraci\u00f3n con el sistema de tipos de Dart, Riverpod puede ser m\u00e1s adecuado. En cualquier caso, ambas bibliotecas ofrecen una gran cantidad de funcionalidades \u00fatiles para la creaci\u00f3n de aplicaciones Flutter modernas y eficientes.<\/p>\n\n\n\n
Referencias:<\/h2>\n\n\n\n
![\"\"](\"https:\/\/7ret.com\/wp-content\/uploads\/2023\/03\/cpu1.jpg\")