Interactive button on Card

[Avatarchik]

Hi! I want to make the text "Read Later" clickable,Can you tell me how to do this?

[codethenpizza]

Try to use "GestureDetector"

Example:
GestureDetector(
onTap: () {
print("onTap called.");
},
child: Text("foo"),
),

[henryla92]

Try to use "GestureDetector"

Example:
GestureDetector(
onTap: () {
print("onTap called.");
},
child: Text("foo"),
),

I am facing the same issue, I have tried using GestureDetector in a bunch of places, doesn't seem to work.

[amarildopps]

Same issue. I have tried using GestureDetector and InkWell

[henryla92]

I found what the issue is, the

                    child: PageView.builder(
                      itemCount: images.length,
                      controller: controller,
                      reverse: true,
                      itemBuilder: (context, index) {
                        return Container();
                      },
                    ),
                  )

is placed on top of the stacked cards and its blocking the gesture detector. I don't have a solution yet though.

[codethenpizza]

I found what the issue is, the

                    child: PageView.builder(
                      itemCount: images.length,
                      controller: controller,
                      reverse: true,
                      itemBuilder: (context, index) {
                        return Container();
                      },
                    ),
                  )

is placed on top of the stacked cards and its blocking the gesture detector. I don't have a solution yet though.

Just to be sure, did u use stateful widget?
Can you show full page where you use it? With gesture detecor

Try to use print() - for understant, maybe gesture detector work, bud page dont get updated

[henryla92]

I found what the issue is, the

                    child: PageView.builder(
                      itemCount: images.length,
                      controller: controller,
                      reverse: true,
                      itemBuilder: (context, index) {
                        return Container();
                      },
                    ),
                  )

is placed on top of the stacked cards and its blocking the gesture detector. I don't have a solution yet though.

Just to be sure, did u use stateful widget?
Can you show full page where you use it? With gesture detecor

Try to use print() - for understant, maybe gesture detector work, bud page dont get updated

Yea I do have a stateful widget, here it is:

import 'dart:math';
import 'package:new_platform/data/data.dart';
import 'package:flutter/material.dart';
import 'package:new_platform/classes/posts.dart';
import 'package:new_platform/widgets/fadeUp.dart';
import 'package:new_platform/classes/posts.dart';

var cardAspectRatio = 12.0 / 16.0; //fixed aspect ratio for the cards
var widgetAspectRatio =
    cardAspectRatio * 1.2; //arbitary value for a good looking card size

class StackedCards extends StatefulWidget {
  final currentPage;
  final List<Posts> posts;

  StackedCards(this.currentPage, this.posts);

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

class _StackedCardsState extends State<StackedCards> {
  final padding = 25.0;
  final verticalInset = 10.0;

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: widgetAspectRatio,
      child: LayoutBuilder(builder: (context, contraints) {
        var width = contraints.maxWidth;
        var height = contraints.maxHeight;

        var safeWidth = width - 2 * padding;
        var safeHeight = height - 2 * padding;

        var heightOfPrimaryCard = safeHeight;
        var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio;

        var primaryCardLeft = safeWidth - widthOfPrimaryCard;
        var horizontalInset = primaryCardLeft / 2;

        List<Widget> cardList = List();

        for (var i = 0; i < images.length; i++) {
          var delta = i - widget.currentPage;
          bool isOnRight = delta > 0;

          var start = padding +
              max(
                  primaryCardLeft -
                      horizontalInset * -delta * (isOnRight ? 15 : 1),
                  0.0);

          var cardItem = Positioned.directional(
              top: padding + verticalInset * max(-delta, 0.0),
              bottom: padding + verticalInset * max(-delta, 0.0),
              start: start,
              textDirection: TextDirection.rtl,
              child:GestureDetector(
                onTap: (){
                  print("tapped");
                },
                  child:Container(
                decoration: BoxDecoration(
                    boxShadow: [
                  BoxShadow(
                    color: Color(0xFFA8A8A8),
                    blurRadius: 10,
                    spreadRadius: -5,
                    offset: Offset(0, 5),
                  )
                ]),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20.0),
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white, boxShadow: [
                      BoxShadow(
                          color: Colors.black12,
                          offset: Offset(3.0, 6.0),
                          blurRadius: 10.0)
                    ]),
                    child: AspectRatio(
                      aspectRatio: cardAspectRatio,
                      child: Stack(
                        fit: StackFit.expand,
                        children: <Widget>[
                          Image.asset(widget.posts[i].image, fit: BoxFit.cover),
                          Align(
                            alignment: Alignment.bottomLeft,
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 20.0, vertical: 0.0),
                                  child: Text(widget.posts[i].title,
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 25.0,
                                      )),
                                ),
                                Padding(
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 20.0, vertical: 8.0),
                                  child: Text(widget.posts[i].description,
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 15.0,
                                      )),
                                ),
                                SizedBox(
                                  height: 10.0,
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(
                                      left: 20.0, bottom: 20.0),
                                  child: Container(
                                    padding: EdgeInsets.symmetric(
                                        horizontal: 15.0, vertical: 6.0),
                                    decoration: BoxDecoration(
                                        color: Colors.blueAccent,
                                        borderRadius:
                                            BorderRadius.circular(20.0)),
                                    child: Text("New",
                                            style: TextStyle(
                                                color: Colors.white)),
                                  ),
                                ),
                                SizedBox(
                                  height: 5.0,
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              )));
          cardList.add(cardItem);
        }
        return FadeUp(
            delay: 500,
            child: Stack(
              children: cardList,
            ));
      }),
    );
  }
}

I tried to refresh it too, but didn't work. The stacked cards become clickable when i do:

Stack(
                children: <Widget>[
                  Positioned.fill(
                    child: PageView.builder(
                      itemCount: images.length,
                      controller: cardController,
                      reverse: true,
                      itemBuilder: (context, index) {
                        return Container();
                      },
                    ),
                  ),
                  StackedCards(currentPage, postList),
                ],
              ),

but then they become unswipable and only the top card can be clicked.

[azhankhan05]

Can we open separate pages for different sized boxes? Like One page for Jack the Persion and the Black Castel and second page for the dreaming moon

[codethenpizza]

I found what the issue is, the

                    child: PageView.builder(
                      itemCount: images.length,
                      controller: controller,
                      reverse: true,
                      itemBuilder: (context, index) {
                        return Container();
                      },
                    ),
                  )

is placed on top of the stacked cards and its blocking the gesture detector. I don't have a solution yet though.

Just to be sure, did u use stateful widget?
Can you show full page where you use it? With gesture detecor
Try to use print() - for understant, maybe gesture detector work, bud page dont get updated

Yea I do have a stateful widget, here it is:

import 'dart:math';
import 'package:new_platform/data/data.dart';
import 'package:flutter/material.dart';
import 'package:new_platform/classes/posts.dart';
import 'package:new_platform/widgets/fadeUp.dart';
import 'package:new_platform/classes/posts.dart';

var cardAspectRatio = 12.0 / 16.0; //fixed aspect ratio for the cards
var widgetAspectRatio =
    cardAspectRatio * 1.2; //arbitary value for a good looking card size

class StackedCards extends StatefulWidget {
  final currentPage;
  final List<Posts> posts;

  StackedCards(this.currentPage, this.posts);

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

class _StackedCardsState extends State<StackedCards> {
  final padding = 25.0;
  final verticalInset = 10.0;

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: widgetAspectRatio,
      child: LayoutBuilder(builder: (context, contraints) {
        var width = contraints.maxWidth;
        var height = contraints.maxHeight;

        var safeWidth = width - 2 * padding;
        var safeHeight = height - 2 * padding;

        var heightOfPrimaryCard = safeHeight;
        var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio;

        var primaryCardLeft = safeWidth - widthOfPrimaryCard;
        var horizontalInset = primaryCardLeft / 2;

        List<Widget> cardList = List();

        for (var i = 0; i < images.length; i++) {
          var delta = i - widget.currentPage;
          bool isOnRight = delta > 0;

          var start = padding +
              max(
                  primaryCardLeft -
                      horizontalInset * -delta * (isOnRight ? 15 : 1),
                  0.0);

          var cardItem = Positioned.directional(
              top: padding + verticalInset * max(-delta, 0.0),
              bottom: padding + verticalInset * max(-delta, 0.0),
              start: start,
              textDirection: TextDirection.rtl,
              child:GestureDetector(
                onTap: (){
                  print("tapped");
                },
                  child:Container(
                decoration: BoxDecoration(
                    boxShadow: [
                  BoxShadow(
                    color: Color(0xFFA8A8A8),
                    blurRadius: 10,
                    spreadRadius: -5,
                    offset: Offset(0, 5),
                  )
                ]),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20.0),
                  child: Container(
                    decoration: BoxDecoration(color: Colors.white, boxShadow: [
                      BoxShadow(
                          color: Colors.black12,
                          offset: Offset(3.0, 6.0),
                          blurRadius: 10.0)
                    ]),
                    child: AspectRatio(
                      aspectRatio: cardAspectRatio,
                      child: Stack(
                        fit: StackFit.expand,
                        children: <Widget>[
                          Image.asset(widget.posts[i].image, fit: BoxFit.cover),
                          Align(
                            alignment: Alignment.bottomLeft,
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 20.0, vertical: 0.0),
                                  child: Text(widget.posts[i].title,
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 25.0,
                                      )),
                                ),
                                Padding(
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 20.0, vertical: 8.0),
                                  child: Text(widget.posts[i].description,
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 15.0,
                                      )),
                                ),
                                SizedBox(
                                  height: 10.0,
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(
                                      left: 20.0, bottom: 20.0),
                                  child: Container(
                                    padding: EdgeInsets.symmetric(
                                        horizontal: 15.0, vertical: 6.0),
                                    decoration: BoxDecoration(
                                        color: Colors.blueAccent,
                                        borderRadius:
                                            BorderRadius.circular(20.0)),
                                    child: Text("New",
                                            style: TextStyle(
                                                color: Colors.white)),
                                  ),
                                ),
                                SizedBox(
                                  height: 5.0,
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              )));
          cardList.add(cardItem);
        }
        return FadeUp(
            delay: 500,
            child: Stack(
              children: cardList,
            ));
      }),
    );
  }
}

I tried to refresh it too, but didn't work. The stacked cards become clickable when i do:

Stack(
                children: <Widget>[
                  Positioned.fill(
                    child: PageView.builder(
                      itemCount: images.length,
                      controller: cardController,
                      reverse: true,
                      itemBuilder: (context, index) {
                        return Container();
                      },
                    ),
                  ),
                  StackedCards(currentPage, postList),
                ],
              ),

but then they become unswipable and only the top card can be clicked.

Sorry, seems like i cant help you here, but looks like people here have same problems as you
flutter/flutter#27744

[nsill]

i solved this problem, but only for the whole card, instead of returning a container, it returns a new GestureDetector to wrap everything:

              Stack(
                children: <Widget>[
                  CardScrollWidgetControl(currentPageControl),
                  Positioned.fill(
                    child: PageView.builder(
                      itemCount: images.length,
                      controller: controllerControl,
                      reverse: true,
                      itemBuilder: (context, index) {
                        return new GestureDetector(
                          onTap: () => print("Action at card $index"),
                        );                        
                      },
                    ),
                  )
                ],
              ),

[Aasis007]

i solved this problem, but only for the whole card, instead of returning a container, it returns a new GestureDetector to wrap everything:

              Stack(
                children: <Widget>[
                  CardScrollWidgetControl(currentPageControl),
                  Positioned.fill(
                    child: PageView.builder(
                      itemCount: images.length,
                      controller: controllerControl,
                      reverse: true,
                      itemBuilder: (context, index) {
                        return new GestureDetector(
                          onTap: () => print("Action at card $index"),
                        );                        
                      },
                    ),
                  )
                ],
              ),

how did u make it work?