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