2

Estoy realizando un ejemplo para comprender como funciona y el uso correcto de InheritedWidget, que hasta ahora al parecer lo uso mal.

A la hora de realizar el ejemplo, leer la documentación y hacer pruebas, me doy cuenta de ciertos problemas que no comprendo.

Problema 1

Con uso del ejemplo de la documentación sobre InheritedWidget, nos dicen como funciona, como crearlo y como utilizarlo, todo esto con un ejemplo de Color. Pero nunca nos dicen como puedo cambiar dicho valor de Color.

Ejemplo de la documentación:

class FrogColor extends InheritedWidget {
  const FrogColor({
    Key? key,
    required this.color,
    required Widget child,
  }) : super(key: key, child: child);

  final Color color;

  static FrogColor of(BuildContext context) {
    final FrogColor? result = context.dependOnInheritedWidgetOfExactType<FrogColor>();
    assert(result != null, 'No FrogColor found in context');
    return result!;
  }

  @override
  bool updateShouldNotify(FrogColor old) => color != old.color;
}

Después de una investigación y mirar varios ejemplos, logre realizar el cambio de color creando una clase ColorBloc y utilizando Stream, esto lo utilizo en mi ejemplo que esta mas abajo cuando abordo el problema 2

clas ColorBloc

class ColorBloc {
  Color myColor;
  ColorBloc({this.myColor = Colors.amber});
  final _color = StreamController<Color>();

  Stream<Color> get colorStream => _color.stream;
  
  void changeColor(Color newColor) {
    _color.add(newColor);
    myColor = newColor;
  }
}

Problema 2

A la hora de utilizar mi propio InheritedWidget me doy cuenta que aparte de utilizar un escuchador(como StreamBuilder) que revise los cambios que se hacen al colorBloc.

Si se quiere utilizar en un segunda pantalla/ruta, se necesita el uso de MaterialApp caso contrario al navegar hacia ella manda el siguiente error.

════════ Exception caught by widgets library ═══════════════════════════════════
The following NoSuchMethodError was thrown building SecondPage(dirty):
The getter 'colorBloc' was called on null.
Receiver: null
Tried calling: colorBloc

La única forma que logre que funcione de forma correcta es con MaterialApp, lo cual no se si sea lo correcto al no ser el main de la app y espero que sea un buen uso del InheritedWidget

Ejemplo de uso InheritedWidget

princiapl y FirstPage

class MyInheritedWidgetPage extends StatelessWidget {
  final myColor = ColorBloc();
  @override
  Widget build(BuildContext context) {
    myColor.myColor = Colors.blue;
    return MyInheritedWidget(
      colorBloc: myColor,
      child: StreamBuilder<Color>(
          stream: myColor.colorStream,
          builder: (context, snapshot) {
            print('myColor => $myColor');
            return MaterialApp(
              home: FirstPage(),
            );
          }),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final color = MyInheritedWidget.of(context).colorBloc;
    return Scaffold(
      appBar: AppBar(
        title: Text('MyInheritedWidget'),
        backgroundColor: color.myColor,
      ),
      body: Center(
        child: Column(
          children: [
            Text('Color nuevo',
                style: TextStyle(
                    color: MyInheritedWidget.of(context).colorBloc.myColor)),
            RaisedButton(
                child: Text('Set color red'),
                onPressed: () {
                  MyInheritedWidget.of(context).colorBloc.changeColor(Colors.red);
                }),
            RaisedButton(
                child: Text('navigate to second page'),
                onPressed: () {
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (_) => SecondPage()));
                }),
          ],
        ),
      ),
    );
  }
}

SecondPage

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final color = MyInheritedWidget.of(context).colorBloc;
    return Scaffold(
      appBar: AppBar(
        title: Text('Second'),
        backgroundColor: color.myColor,
      ),
      body: Center(
        child: Column(
          children: [
            Text('Hola Mundo', style: TextStyle(color: color.myColor),),
            RaisedButton(
                child: Text('Change color to amber'),
                onPressed: () => color.changeColor(Colors.amber))
          ],
        ),
      ),
    );
  }
}

Todo esto esta mi repositorio publico, que uso para ejemplos pequeños de flutter

1 respuesta 1

2

El InheritedWidget sirve como un inyector de dependencias, puedes inyectar valores como los Blocs y obtenerlo en el árbol de widget.

Si deseas que MyInheritedWidget quede expuesto en toda tu app, necesitas iniciarlo arriba del MaterialApp (De igual modo que en provider/flutter_bloc).

Quedaría algo como:

MyInheritedWidgetPage(
 colorBloc: ColorBloc(),
 child: MaterialApp( ...
);

Si vez que al hacer hot-reload se reinicia el bloc, entonces requieres un Stateful y declarar el ColorBloc dentro del State.

El MaterialApp tiene un Navigator por defecto, cada vez que haces un push a una nueva pagina/vista, esta se crea al mismo nivel.

Representación del árbol:

     MyApp
 |     |      | ​
Page1  Page2 InheritedWidget
     |   |
Column   …
    |
Other widgets



Cuando muevas el MyInheritedWidgetPage arriba del MaterialApp quedaría:

     MyApp
     MyInheritedWidgetPage
 |     |      | ​
Page1  Page2
     |   |
Column   …
    |
Other widgets


Y así podrán acceder todos los widgets.

3
  • El único punto que no entiendo es lo colocar ColorBloc en un State, ya que si he notado que al hacer hot-reload se reinicia, no se si me puedas aclarar un poco ese punto por favor.
    – Richard
    Commented el 30 sept. 2021 a las 3:47
  • Al igual, me imagino que puede ser declarado mas de un InheritedWidget en diferentes niveles del árbol de Widgets, para esos casos, se requiere MaterialApp y eso no afecta la app? ya que he notado que quita el botón de back en el AppBar que se coloca por default al hacer push a esa pagina/vista
    – Richard
    Commented el 30 sept. 2021 a las 3:50
  • 1
    1- Si el colorBloc lo instancias en el state y luego lo inyectas en el InheritedWidget, entonces con el hot-reload no se recreará. 2- Puedes usar varias MaterialApp pero no es recomendable, no es necesario compartir blocs entre diferentes páginas, cada una debería tener su propio bloc y pasar solo la información que necesitas. Los blocs que van arriba del materialapp son los blocs globales (Configuraciones globales que tengas). También puedes hacer lo que hace GetX, que inserta los controllers(blocs) en HashMaps globales, pero tampoco es recomendable. Commented el 30 sept. 2021 a las 14:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.