Flutter : how to hide and show button on last and first index in listView

Question

i set two buttons(left and right Button) on top of ListView. buttons work for scrolling on click. now i want to hide the left button when index is 0 and the right button when index is last. more explain to clear, the left button will be hidden in first index and the right button will be hidden in last index. please help me.

class ScrollingLeftAndRightButtonHide extends StatefulWidget {
@override
_ScrolllingOnClickButtonState createState() =>
  _ScrolllingOnClickButtonState();}

class _ScrolllingOnClickButtonState
extends State<ScrollingLeftAndRightButtonHide> {

final _controller = ScrollController();
var _width = 100.0;

@override
Widget build(BuildContext context) {

var sizeDevice = MediaQuery.of(context).size;
this._width = sizeDevice.width;

var recentIndexIncrease = 0;
var recentIndexDecrease = 0;

return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    body: Column(
      children: <Widget>[
        Expanded(
            flex: 1,
            child: Container(
              color: Colors.green,
            )),
        Expanded(
            flex: 2,
            child: Row(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(left: 8.0),
                  child: ClipOval(
                    child: Material(
                      color: Colors.blue, // button color
                      child: InkWell(
                        splashColor: Colors.red, // inkwell color
                        child: SizedBox(
                            width: 56,
                            height: 56,
                            child: Icon(Icons.arrow_back)),

                        onTap: () {
                          var recentIndexDecreaseMinus =
                              recentIndexDecrease--;

                          _animateToIndex(recentIndexDecrease);
                        },
                      ),
                    ),
                  ),
                ),
                Expanded(
                    flex: 2,
                    child: Container(
                      color: Colors.transparent,
                    )),
                Padding(
                  padding: const EdgeInsets.only(right: 8),
                  child: ClipOval(
                    child: Material(
                      color: Colors.blue, // button color
                      child: InkWell(
                        splashColor: Colors.red, // inkwell color
                        child: SizedBox(
                            width: 56,
                            height: 56,
                            child: Icon(Icons.arrow_forward)),
                        onTap: () {
                          _animateToIndex(recentIndexIncrease);
                        },
                      ),
                    ),
                  ),
                ),
              ],
            )),
        Expanded(
          flex: 16,
          child: Container(
            // height: 400,
            child: ListView.builder(
                controller: _controller,
                scrollDirection: Axis.horizontal,
                physics: PageScrollPhysics(),
                itemCount: word_data.drink.length,
                itemBuilder: (BuildContext context, int index) {
                  recentIndexIncrease = index;
                  recentIndexDecrease = index;
                  var wordDataReplace = word_data.drink[index]
                      .replaceAll(" ", "_")
                      .toLowerCase();

                  return Container(
                    child: Column(
                      children: <Widget>[
                        Expanded(
                            flex: 6,
                            child: GestureDetector(
                              child: Container(
                                color: Colors.purple,
                                child: Padding(
                                  padding: const EdgeInsets.all(10.0),
                                  child: Image.asset(
                                    "asset/drink_images/" +
                                        wordDataReplace +
                                        ".png",
                                    fit: BoxFit.contain,
                                  ),
                                ),
                              ),
                            )),
                      ],
                    ),
                    width: sizeDevice.width,
                  );
                }),
            color: Colors.yellow,
          ),
        ),
      ],
    ),
  ),
);
}

 _animateToIndex(i) => _controller.animateTo(_width * i,
  duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn);
}

this image of (ListView with top two Button)

I think an image of the UI would be helpful here. – Joy Terence Nov 22 '20 at 06:15 — Joy Terence, Nov 22 '20 at 06:15
@JoyTerence a ui image added in question. – Emma Scarlett Nov 22 '20 at 06:21 — Emma Scarlett, Nov 22 '20 at 06:21

score 0 · Answer 1 · edited Nov 22 '20 at 07:18

Add two variables in your state as

class _ScrolllingOnClickButtonState
      extends State<ScrollingLeftAndRightButtonHide> {
    bool leftEnabled = false; //this is initial visibility of left button
    bool rightEnabled = true; //this is initial visibility of right button
........

Then in your build function where you are displaying left and right button add if statement

@override


Widget build(BuildContext context) {
    var sizeDevice = MediaQuery.of(context).size;
    this._width = sizeDevice.width;

    var recentIndexIncrease = 0;
    var recentIndexDecrease = 0;

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
        .............
              if(leftEnabled)
                  Padding(
                        padding: const EdgeInsets.only(left: 8.0),
                        child: ClipOval(
                          child: Material(
                            color: Colors.blue, // button color
                            child: InkWell(
                              splashColor: Colors.red, // inkwell color
                              child: SizedBox(
                                  width: 56,
                                  height: 56,
                                  child: Icon(Icons.arrow_back)),

                              onTap: () {
                                var recentIndexDecreaseMinus =
                                    recentIndexDecrease--;
                                _animateToIndex(recentIndexDecrease);
                                if (index == 0) { //Your logic to detect start of the list.
                                  leftEnabled = false; //if it is the start make left invisible
                                }
                                if(list.size > 1)
                                    rightEnabled = true; //whenever left button is pressed and your data has more than 1 element make right visible
                                setState(() {});
                              },
                            ),
                          ),
                        ),
                      ),
                      ...............

Same code for the right button.

index and last keyword got error here if (index == 0) { leftEnabled = false; } if(list.size > 1) rightEnabled = true; setState(() {}); — Emma Scarlett, Nov 22 '20 at 12:57
I wrote index and list keywords just to give you an idea. Read the comments that I have left there. use `inLastPage` instead of `list.end` and `inFirstPage` instead of index — Taha Malik, Nov 22 '20 at 13:18
can you make to full source code please? actually i am too new in flutter. — Emma Scarlett, Nov 22 '20 at 14:31

Bensal · Answer 2 · 2020-11-22T13:49:57.097

0

You cannot do it through your current structure of code. To achieve it you will have to move those arrow button Icons inside of the listView like this:

return  ListView.builder(
  scrollDirection: Axis.horizontal,
  physics: PageScrollPhysics(),
  itemCount: 5,
  itemBuilder: (BuildContext context, int index) {
  recentIndexIncrease = index;
  recentIndexDecrease = index;
  var wordDataReplace = word_data.drink[index].replaceAll(" ", "_").toLowerCase();

  return Column(
    children: <Widget>[
      Row(
        children: [
          //Left arrow is the button indicating left arrow
          if (index != 0) LeftArrow,
          //Rightarrow is the button indicating right arrow
          if (index != 4) RightArrow
        ],
      ),
      Expanded(
        child: GestureDetector(
          child: Container(
            color: Colors.purple,
            padding: const EdgeInsets.all(10.0),
            child: Image.asset("asset/drink_images/" +
                                wordDataReplace +
                                ".png",
              fit: BoxFit.contain,
            ),
          ),
      )),
    ],
  );
});

edited Nov 22 '20 at 13:49

answered Nov 22 '20 at 07:30

Bensal

3,316
1
23
35

can you make the answer more details please. i got the problem here in your code - Row( children: [ if (index != 0) LeftArrow if (index != last) RightArrow ], ), – Emma Scarlett Nov 22 '20 at 07:57
There is a comma missing there, see my edited answer – Bensal Nov 22 '20 at 08:47
last keyword is not finding – Emma Scarlett Nov 22 '20 at 12:48
i used last to just show you an idea. Use 5 instead of last. See my edited answer again. – Bensal Nov 22 '20 at 13:24
Just an information, you wrap your widgets to other widgets unnecessarily. Avoid them as it makes your program structure complex. Just note the difference between my and your code. – Bensal Nov 22 '20 at 13:27
so how can i detect last index here – Emma Scarlett Nov 22 '20 at 13:39
when the item count is 5, last index is 4 – Bensal Nov 22 '20 at 13:50

Oussama Belabbas · Accepted Answer · 2020-11-22T12:59:52.627

I think it might be easier for you to replace ListView.builder by a Flutter_Swiper it will make your life a lot easier. Or maybe you can add a listner to your ScrollController in the initState where it handles the value of two Boolean variables leftButtonEnabled and rightButtonEnabled and set them to true or false depending on the position of the Controller

EDIT : here's an example of using Flutter swiper in your code, I tried to make it simple and in the same time adding multiple features that can help you ( like SwiperControl ) I hope it helps you a little bit.

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ScrollingLeftAndRightButtonHide(),
    ),
  );
}

class ScrollingLeftAndRightButtonHide extends StatefulWidget {
  @override
  _ScrolllingOnClickButtonState createState() =>
      _ScrolllingOnClickButtonState();
}

class _ScrolllingOnClickButtonState
    extends State<ScrollingLeftAndRightButtonHide> {
  SwiperController _controller = SwiperController();
  SwiperControl _control = SwiperControl(color: Colors.white);

  double get _width => MediaQuery.of(context).size.width;
  double get _height => MediaQuery.of(context).size.height;

  bool inFirstPage = true;
  bool inLastPage = false;

  List<String> word_data = [
    "First",
    "Second",
    "Third",
    "Fourth",
    "Fifth",
    "Sixth",
    "Last",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.white,
              child: Row(
            children: <Widget>[
                  if (!inFirstPage)
                IconButton(
                      color: Colors.indigoAccent,
                  onPressed: () {
                    _controller.previous();
                  },
                  icon: Icon(Icons.arrow_back),
                ),
              Spacer(),
              if (!inLastPage)
                IconButton(
                  color: Colors.indigoAccent,
                  onPressed: () {
                    _controller.next();
                  },
                  icon: Icon(Icons.arrow_forward),
                ),
            ],
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.white,
            child: Swiper(
              controller: _controller,
              control: _control,
              loop: false,
              scrollDirection: Axis.horizontal,
              itemCount: word_data.length,
              onIndexChanged: (value) {
                if (value == word_data.length - 1)
                  setState(() {
                    inLastPage = true;
                  });
                else if (value == 0)
                  setState(() {
                    inFirstPage = true;
                  });
                    else {
                      setState(() {
                        inFirstPage = false;
                        inLastPage = false;
                      });
                    }
                  },
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      child: Column(
                        children: <Widget>[
                          Expanded(
                            child: GestureDetector(
                                  child: Container(
                                width: _width,
                                alignment: Alignment.center,
                                color: Colors.indigoAccent,
                                child: Text(word_data[index]),
                              ),
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),    
    );
  }
}

your code is ok. but problem is to tts. when i set full screen to clickable for tts. then arrow button does not work after a few time click from left to right and from right to left. — Emma Scarlett, Nov 23 '20 at 04:36
hello friend, can you help me in this new question please? https://stackoverflow.com/questions/65000099/flutter-how-to-show-next-index-after-complete-a-specific-logic-in-swiper-wher — Emma Scarlett, Nov 25 '20 at 13:11

Flutter : how to hide and show button on last and first index in listView

3 Answers3