水平滚动按钮问题的ListView

Question

Hi I'm working on the Flutter project I'm having an issue with the flutter ListView button, So right now it looks the same what I wanted but it doesn't work how I wanted

So if you see the above image if I click then tick overlay appears for that I need to setState() but the issue is right now to get that overlay tick I need to tap twice I don't understand how to fix this issue or is there any widget button which onclick overlay I checked most of them but most of them didn't work or I was not aware of? Inside container, I have 14 same columns with numbers 1-14 I'll make it more compact but first I need to fix this issue here is the code.

`bool _pressed = false;
 int _btnIndex = 0;
 TabBarView(children: <Widget>[
    Container(
      height: 300,
      // padding: EdgeInsets.only(bottom: 10),
      padding: EdgeInsets.all(10),
      color: Colors.white,
      child: ListView(
      padding: EdgeInsets.all(6),
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              child: Padding(
                padding: const EdgeInsets.all(6.0),
                child: Material(
                  elevation: 4.0,
                  shape: CircleBorder(),
                  clipBehavior: Clip.hardEdge,
                  color: !_pressed && _btnIndex == 1
                      ? Colors.red
                      : Colors.white54,
                  child: Ink.image(
                    image: AssetImage('assets/images/colosseum.jpg'),
                    fit: BoxFit.cover,
                    colorFilter: _pressed && _btnIndex == 1
                        ? ColorFilter.mode(
                            Colors.black87,
                            BlendMode.darken,
                          )
                        : null,
                    width: 60.0,
                    height: 60.0,
                    child: InkWell(
                      // splashColor: Colors.green,
                      focusColor: Colors.red,
                      highlightColor: Colors.white60,
                      // overlayColor: MaterialStateColor(),
                      child: _pressed && _btnIndex == 1
                          ? Icon(
                              Icons.check,
                              color: Colors.white,
                            )
                          : null,
                      // onDoubleTap: () {
                      //   _pressed = !_pressed;
                      // },
                      onTap: () {
                        setState(() {
                          _pressed = !_pressed;
                          _btnIndex = 1;
                        });
                        // _pressed = true;
                        print('I tapped no 1');
                      },
                    ),
                  ),
                ),
              ),
            ),
            Container(
              alignment: Alignment.center,
              child: Text('10'),
            ),
          ],
        ),
      ]),
     ),
  ]);`

Answer 1

just use Listview.builder for this and inside that use GestureDetector inside Builder to change selected item

first take a variable to track selected index

int selected;

then make a listView Builder Widget

ListView.builder(
 itemCount:5,
 scrollDirection: Axis.horizontal,
 itemBuilder:(ctx,index){

 return GestureDetector(
  onTap:(){
   selected = index;
   setState((){});
   }
  child: YourWidget(isSelected:this.selected == index);
 );
 }

)

just write logic for displaying tick in YourWidget image when isSelected is true

Answer 2

Hey @user2572661 may be when you touch container may not interact as what you want you can use ListView.builder() with scroll direction horizontal also there is a Widget you can use it onTap: to change state or logic call GestureDetector() . Although can you please share some more code so that i can understand and rectify your problem.