Question 394629 in Flutter Question posted in
The official Flutter documentation can be found here.

my setState icon boutton can't work in flutter

Hello i’m try to change to color of my IconBouttom that is inside setState each time he is clicked but it’s not changing

I tried to put the iconbouttom outside the positioned widget and it worket so the probleme is because of the postioned widget but i don’t know how to fix it , i have also tried to change the location of my bool LikeIt location but it did not work

import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:line_icons/line_icon.dart';

class Categoriespecifiqueitem extends StatefulWidget {
  const Categoriespecifiqueitem({super.key});

  @override
  State<Categoriespecifiqueitem> createState() =>
      _CategoriespecifiqueitemState();
}

bool _isSearchBarTapped = true;

// i tried declaration here bool likeIt = false;

class _CategoriespecifiqueitemState extends State<Categoriespecifiqueitem> {
  final GlobalKey<ScaffoldState> _key = GlobalKey<ScaffoldState>();
// i tried declaration here   bool likeIt = false;

  var MylistImage = [
    "images/clothes/chemise.jpg",
    "images/clothes/suit.jpg",
    "images/clothes/hat.jpg",
  ];
  @override
  Widget build(BuildContext context) {
    var values = RangeValues(10, 250);
// i tried declaration here     bool likeIt = false;

    return Scaffold(
        key: _key,
        backgroundColor: const Color(0xffF1F1F1),
        body: SafeArea(
          child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                children: [
                  Container(
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(100)),
                    child: TextField(
                      onChanged: (value) {
                        setState(() {
                          _isSearchBarTapped = false;
                        });
                      },
                      decoration: InputDecoration(
                          hintText: "iphone",
                          border: const OutlineInputBorder(
                              borderSide: BorderSide(width: 1),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(100))),
                          prefixIcon: GestureDetector(
                              onTap: () {
                                setState(() {
                                  _isSearchBarTapped = true;
                                });
                              },
                              child: const LineIcon.arrowLeft()),
                          suffixIcon: const LineIcon.search()),
                    ),
                  ),
                  if (_isSearchBarTapped == false) ...[
                    Expanded(
                        child: ListView.builder(
                      itemCount: 5,
                      itemBuilder: (context, index) {
                        return const ListTile(
                            contentPadding: EdgeInsets.only(top: 12, left: 10),
                            title: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text("iphone XS"),
                                Divider(
                                  thickness: 2,
                                )
                              ],
                            ));
                      },
                    ))
                  ],
                  if (_isSearchBarTapped == true) ...[
                    Gap(20),
                    Container(
                      height: MediaQuery.of(context).size.height / 2.5,
                      child: Stack(
                        children: [
                          Positioned(
                            child: IconButton(
                                onPressed: () {
                                  setState(() {
                                    likeIt = !likeIt;
                                  });
                                },
                                icon: likeIt == false
                                    ? LineIcon.heart()
                                    : LineIcon.heartAlt(
                                        color: Colors.pink,
                                      )),
                          ),
                          Swiper(
                            itemBuilder: (BuildContext context, int index) {
                              return Image.asset(
                                MylistImage[index],
                              );
                            },
                            itemCount: 3,
                            pagination: SwiperPagination(),
                            control: SwiperControl(color: Colors.cyan),
                          ),
                        ],
                      ),
                      decoration: BoxDecoration(
                        border: Border.all(width: 0.1),
                      ),
                    ),
                    Expanded(
                        child: SingleChildScrollView(
                      child: Row(
                        children: [
                          Expanded(
                            child: Container(
                              color: Color.fromARGB(255, 220, 220, 220),
                              child: Column(
                                children: [
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                  Text("data"),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ))
                  ]
                ],
              )),
        ));
  }
}
//
Tags:

2

Answers


  1. 0

    You should not re-declare likeIt variable inside build. The likeIt changes because of the setState but its redeclared in the build method to false because your widget is rebuilt everytime setState is called.

    Login or Signup to reply.
  2. 0 
    import 'package:flutter/material.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:gap/gap.dart';
import 'package:line_icons/line_icon.dart';

class Categoriespecifiqueitem extends StatefulWidget {
  const Categoriespecifiqueitem({Key? key}) : super(key: key);

  @override
  _CategoriespecifiqueitemState createState() =>
      _CategoriespecifiqueitemState();
}

class _CategoriespecifiqueitemState extends State<Categoriespecifiqueitem> {
  bool likeIt = false; // Initialize likeIt state

  var MylistImage = [
    "images/clothes/chemise.jpg",
    "images/clothes/suit.jpg",
    "images/clothes/hat.jpg",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF1F1F1),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(100),
                ),
                child: TextField(
                  onChanged: (value) {
                    setState(() {
                      // your code
                    });
                  },
                  decoration: InputDecoration(
                    hintText: "iphone",
                    border: const OutlineInputBorder(
                      borderSide: BorderSide(width: 1),
                      borderRadius: BorderRadius.all(Radius.circular(100)),
                    ),
                    prefixIcon: GestureDetector(
                      onTap: () {
                        setState(() {
                          // your code
                        });
                      },
                      child: const LineIcon.arrowLeft(),
                    ),
                    suffixIcon: const LineIcon.search(),
                  ),
                ),
              ),
              if (_isSearchBarTapped == false) ...[
                // Render content if search bar is not tapped
                Expanded(
                  child: ListView.builder(
                    itemCount: 5,
                    itemBuilder: (context, index) {
                      return const ListTile(
                        contentPadding: EdgeInsets.only(top: 12, left: 10),
                        title: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("iphone XS"),
                            Divider(
                              thickness: 2,
                            )
                          ],
                        ),
                      );
                    },
                  ),
                ),
              ],
              if (_isSearchBarTapped == true) ...[
                // Render content if search bar is tapped
                Gap(20),
                Container(
                  height: MediaQuery.of(context).size.height / 2.5,
                  child: Stack(
                    children: [
                      Positioned(
                        top: 8, // Adjust positioning as needed
                        right: 8,
                        child: GestureDetector(
                          onTap: () {
                            setState(() {
                              likeIt = !likeIt; // Toggle likeIt state
                            });
                          },
                          child: Icon(
                            likeIt ? Icons.favorite : Icons.favorite_border,
                            color: likeIt ? Colors.pink : Colors.grey,
                          ),
                        ),
                      ),
                      Swiper(
                        itemBuilder: (BuildContext context, int index) {
                          return Image.asset(
                            MylistImage[index],
                          );
                        },
                        itemCount: 3,
                        pagination: SwiperPagination(),
                        control: SwiperControl(color: Colors.cyan),
                      ),
                    ],
                  ),
                  decoration: BoxDecoration(
                    border: Border.all(width: 0.1),
                  ),
                ),
                Expanded(
                  child: SingleChildScrollView(
                    child: Row(
                      children: [
                        Expanded(
                          child: Container(
                            color: Color.fromARGB(255, 220, 220, 220),
                            child: Column(
                              children: [
                                Text("data"),
                                Text("data"),
                                Text("data"),
                                Text("data"),
                                Text("data"),
                                Text("data"),
                                Text("data"),
                                Text("data"),
                                Text("data"),
                                Text("data"),
                                Text("data"),
                                Text("data"),
                                Text("data"),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ],
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search