Giter Club home page Giter Club logo

Comments (3)

GeoffGodwin avatar GeoffGodwin commented on May 27, 2024 1

@joelbrostrom I noticed that if the carousel is mid-animation, then the onTap function doesn't fire. The movement has to come to a complete stop which, from a UX perspective, causes a rather obvious "I clicked and nothing happened" feeling when attempting to click on an individual element.

Any idea why this would be?

from flutter_carousel_slider.

joelbrostrom avatar joelbrostrom commented on May 27, 2024

Hi!

You want to be able to scroll through the items, but also be able to click any item on screen.
Have I understood you correctly?

If so this can be easily done by wrapping your elements in a GestureDetector and set onTap to your select item function.

Using the example project from our GitHub repo all I had to do was wrapping each item in a GestureDetector and added print(index) on its onTap argument.

With only 3 lines of code all the items in the demo is clickable!

final List child = map<Widget>(
  imgList,
  (index, i) {
    return GestureDetector(
      onTap: ()=> print(index) ,
      child: Container(
        margin: EdgeInsets.all(5.0),
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
          child: Stack(children: <Widget>[
            Image.network(i, fit: BoxFit.cover, width: 1000.0),
            Positioned(
              bottom: 0.0,
              left: 0.0,
              right: 0.0,
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color.fromARGB(200, 0, 0, 0), Color.fromARGB(0, 0, 0, 0)],
                    begin: Alignment.bottomCenter,
                    end: Alignment.topCenter,
                  ),
                ),
                padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
                child: Text(
                  'No. $index image',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ]),
        ),
      ),
    );
  },
).toList();

from flutter_carousel_slider.

joaquinperaza avatar joaquinperaza commented on May 27, 2024

Great, I have been trying to do something like that, I got stuck when trying to cal goto(int index) from the gesture detector as I couldn't reference the carousel itself, but i think is possible

from flutter_carousel_slider.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.