Sobes.tech
Junior

¿Para qué se utiliza el Modelo Scoped en Flutter?

sobes.tech AI

Respuesta de la IA

Scoped Model es una biblioteca sencilla para gestionar el estado en Flutter, basada en el concepto de InheritedWidget. Está diseñada para proporcionar acceso a los datos (modelo) y la capacidad de modificarlos a los widgets en el árbol sin necesidad de pasar explícitamente los datos a través de constructores en cada nivel.

Componentes principales de Scoped Model:

  • Model: Clase que almacena datos y lógica de negocio. Debe extender Model del paquete scoped_model.
  • ScopedModel: Widget que envuelve una parte del árbol de widgets. Toma una instancia de Model y la hace accesible para sí mismo y sus descendientes.
  • ScopedModelDescendant: Widget que permite acceder a la instancia de Model desde el ScopedModel más cercano arriba en el árbol y suscribirse a sus cambios.

Ventajas de usar Scoped Model:

  • Simplicidad: Fácil de entender y usar, especialmente para aplicaciones pequeñas y medianas.
  • Basado en mecanismos estándar de Flutter: Utiliza InheritedWidget, lo que lo hace eficiente.
  • Bien documentado: Disponible documentación exhaustiva y ejemplos.

Ejemplo de uso:

  1. Crear un modelo:

    import 'package:scoped_model/scoped_model.dart';
    
    class CounterModel extends Model {
      int _counter = 0;
    
      int get counter => _counter;
    
      void increment() {
        _counter++;
        notifyListeners(); // Notifica a los widgets sobre el cambio
      }
    }
    
  2. Envolver parte del árbol en ScopedModel:

    import 'package:flutter/material.dart';
    import 'package:scoped_model/scoped_model.dart';
    import 'counter_model.dart'; // Importa el modelo
    
    void main() {
      runApp(
        // Envuelve nuestra aplicación en ScopedModel
        ScopedModel<CounterModel>(
          model: CounterModel(),
          child: MyApp(),
        ),
      );
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('Scoped Model Example')),
            body: Center(
              child: CounterDisplay(),
            ),
            floatingActionButton: IncrementButton(),
          ),
        );
      }
    }
    
  3. Acceder al modelo en ScopedModelDescendant:

    import 'package:flutter/material.dart';
    import 'package:scoped_model/scoped_model.dart';
    import 'counter_model.dart'; // Importa el modelo
    
    class CounterDisplay extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // Accede al modelo y se suscribe a sus cambios
        return ScopedModelDescendant<CounterModel>(
          builder: (context, child, model) {
            return Text(
              'Counter: ${model.counter}',
              style: Theme.of(context).textTheme.headline4,
            );
          },
        );
      }
    }
    
    class IncrementButton extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // Accede al modelo sin suscribirse a cambios
        return FloatingActionButton(
          onPressed: () {
            ScopedModel.of<CounterModel>(context).increment();
          },
          child: Icon(Icons.add),
        );
      }
    }
    

Scoped Model es adecuado para aplicaciones donde la gestión del estado no es demasiado compleja y se puede prescindir de soluciones más potentes pero más verbosas, como BLoC o Riverpod. Sin embargo, para aplicaciones grandes y complejas con múltiples estados interrelacionados, pueden ser necesarios enfoques más avanzados.