flutterflutter-layoutflutter-dependenciesflutter-design

Refresh a image and a text flutter


Im using statefull to refresh but i don't know what i have to write in setstate to refresh the slidedialog.

i need to refresh an image that i choose the image in a dialog and it saves in a variable named ex3. this variable is a class with name, image etc etc... so i should refresh that ex3.image and ex3.name

 StatefulBuilder(builder: (context, _setState) {
                    return Container(
                      height: 120.0,
                      width: 120.0,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image:
                              ex3?.image ?? AssetImage("assets/images/2.png"),
                          fit: BoxFit.fill,
                        ),
                        shape: BoxShape.circle,
                      ),
                      child: Text(ex3?.nom ?? "ex: Feliz"),
                    );

                    _setState({});
                  }),

I have a class named usermodel and this code is to add the new image and new name so this value ex3.nom (name) and ex3.image update

   ElevatedButton(
                  child: Text(ex3?.nom ?? "Elige como te sientes"),
                  onPressed: () {
                    SelectDialog.showModal<UserModel>(
                      context,
                      label: "¿Como te sientes hoy?",
                      items: modelItems,
                      selectedValue: ex3,
                      itemBuilder: (BuildContext context, UserModel item,
                          bool isSelected) {
                        return Container(
                          decoration: !isSelected
                              ? null
                              : BoxDecoration(
                                  borderRadius: BorderRadius.circular(5),
                                  color: Colors.white,
                                  border: Border.all(
                                      color: Theme.of(context).primaryColor),
                                ),
                          child: ListTile(
                            leading: CircleAvatar(
                                backgroundImage: AssetImage(item.rutaimage!)),
                            selected: isSelected,
                            title: Text(item.nom),
                            subtitle: Text(item.color),
                          ),
                        );
                      },
                      onChange: (selected) {
                        setState(() {
                          ex3 = selected;
                        });
                      },
                    );
                  },
                ),

Solution

  • Use a bool to check if something is true or not you have to use setState in onTap functions or clickable widgets not in container, read this article

    class MyWidget extends StatefulWidget {
      const MyWidget({Key key}) : super(key: key);
    
      @override
      State<MyWidget> createState() => _MyWidgetState();
    }
    
    class _MyWidgetState extends State<MyWidget> {
      bool _flag = false;
      @override
      Widget build(BuildContext context) {
        return InkWell(
          onTap: () {
            setState(() {
              _flag != _flag;
            });
          },
          child: Container(
            height: 120.0,
            width: 120.0,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: _flag
                    ? AssetImage("assets/images/2.png")
                    : AssetImage("assets/images/3.png"),
                fit: BoxFit.fill,
              ),
              shape: BoxShape.circle,
            ),
            child: Text(_flag ? "ex: Feliz" : "here is when false"),
          ),
        );
      }
    }