0

llevo dias con este problema estoy aprendiendo provider y se basicamente como usarlo. pero me gustaria pasar este codigo a provider pero no se de que forma hacerlo.

class _MyWidgetState extends State<MyWidget> {
  bool isActive = false;
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 5.0,
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
      child: InkWell(
        child: Container(
          color: Colors.white,
          width: 200.0,
          height: 250.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                  width: 200.0,
                  height: 155.0,
                  child: CachedNetworkImage(
                      fadeInDuration: const Duration(milliseconds: 200),
                      fit: BoxFit.cover,
                      imageUrl: url,
                      placeholder: (context, urlImage) =>
                          Container(color: Colors.grey),
                      errorWidget: (context, urlImage, error) =>
                          Center(child: Container(color: Colors.grey)))),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      ubicacion != ""
                          ? Text(ubicacion,
                              style: TextStyle(
                                  fontSize: 12.0, color: Colors.grey[600]),
                              maxLines: 1)
                          : Container(),
                      titulo != ""
                          ? Text(titulo,
                              style: const TextStyle(
                                  fontSize: 15.0,
                                  color: Colors.black,
                                  fontWeight: FontWeight.normal),
                              maxLines: 2)
                          : Container(),
                      precio != ""
                          ? Text(precio,
                              style: const TextStyle(
                                  fontSize: 15.0,
                                  color: Colors.black,
                                  fontWeight: FontWeight.normal),
                              maxLines: 1)
                          : Container(),
                      Align(
                        alignment: Alignment.bottomRight,
                        child: IconButton(
                          icon: isActive? const Icon(Icons.favorite,
                           color: colors.red,
                           )
                           : const Icon(
                           Icons.favorite_border,
                           color: colors.red,
                           ),
                          onPressed: () {
                            setState(() {
                              isActive = !isActive;
                            });
                          },
                          color: Colors.red,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

sinceramente no puedo aplicar esta logica con provider. he hechos otros cambios de estados como contadores cambiar un valor de color pero cuando uso esta logica aplicada a provider todos estos iconos comparten el mismo estado. les agardeceria mucho. saludos

1
  • Ya te comenté lo que tenías que hacer en la anterior pregunta... Si no te ves preparado para hacer algo así, ¿no sería recomendable que busques algún curso para aprender Flutter? No te lo tomes a mal, en ningún momento, quiero ofender. Pero lo que pides es relativamente sencillo de hacer y si no eres capaz, seguramente es porque te faltan bases de conocimiento. Te recomendaría que sigas algún curso gratuito/pagado de Flutter.
    – Manuel
    Commented el 14 sept. 2022 a las 8:27

1 respuesta 1

2

La forma de cambiar la lógica a provider es la siguiente:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
        IsActiveProvider isActiveProvider = Provider.of<IsActiveProvider>(context);
    return Card(
      elevation: 5.0,
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
      child: InkWell(
        child: Container(
          color: Colors.white,
          width: 200.0,
          height: 250.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                  width: 200.0,
                  height: 155.0,
                  child: CachedNetworkImage(
                      fadeInDuration: const Duration(milliseconds: 200),
                      fit: BoxFit.cover,
                      imageUrl: url,
                      placeholder: (context, urlImage) =>
                          Container(color: Colors.grey),
                      errorWidget: (context, urlImage, error) =>
                          Center(child: Container(color: Colors.grey)))),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      ubicacion != ""
                          ? Text(ubicacion,
                              style: TextStyle(
                                  fontSize: 12.0, color: Colors.grey[600]),
                              maxLines: 1)
                          : Container(),
                      titulo != ""
                          ? Text(titulo,
                              style: const TextStyle(
                                  fontSize: 15.0,
                                  color: Colors.black,
                                  fontWeight: FontWeight.normal),
                              maxLines: 2)
                          : Container(),
                      precio != ""
                          ? Text(precio,
                              style: const TextStyle(
                                  fontSize: 15.0,
                                  color: Colors.black,
                                  fontWeight: FontWeight.normal),
                              maxLines: 1)
                          : Container(),
                      Align(
                        alignment: Alignment.bottomRight,
                        child: IconButton(
                          icon: isActiveProvider.isActive? const Icon(Icons.favorite,
                           color: colors.red,
                           )
                           : const Icon(
                           Icons.favorite_border,
                           color: colors.red,
                           ),
                          onPressed: () {
                              isActiveProvider.isActive = !isActiveProvider.isActive;
                          },
                          color: Colors.red,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class IsActiveProvider with ChangeNotifier{

    bool _isActive = false;
    
    bool get isActive{
        return _isActive;
    }

    set isActive(bool value){
        isActive = value;
        notifyListeners();
    }
    
}

Como ves, la forma de cambiarlo es convirtiendo la propiedad isActive en una propiedad de la clase del Provider. Los setState se cambian por el setter que ya redibuja el widget gracias a la función notifyListeners Para utilizar un provider también debes agregarlo en un nivel superior en tu árbol de widgets, en este caso podríamos hacerlo en el archivo main.

return MultiProvider(
  providers: [
    ChangeNotifierProvider(
      create: (_) => IsActiveProvider(),
    ),
  ],
child: MaterialApp(...)
)
2
  • te agradezco mucho pero en realidad al dar el toque no funciono. Handler: "onTap" Recognizer: TapGestureRecognizer#1707f
    – mauricio
    Commented el 15 sept. 2022 a las 0:10
  • Considero que esta respuesta no es correcta. El creador de la pregunta está pidiendo un ejemplo de cómo tener los estados de los iconos por separados. Lamentablemente, el título de se pregunta no concuerda con lo que realmente está pidiendo. Tu ejemplo, actualmente, modificaría todos los elementos pues compartirían el mismo provider, que está inyectado de forma global. De todos modos, te doy mi +1.
    – Manuel
    Commented el 15 sept. 2022 a las 8:04

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.