Comments (10)
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"),
);
},
),
)
],
),
from flutter-story-app-ui.
Try to use "GestureDetector"
Example:
GestureDetector(
onTap: () {
print("onTap called.");
},
child: Text("foo"),
),
from flutter-story-app-ui.
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.
from flutter-story-app-ui.
Same issue. I have tried using GestureDetector and InkWell
from flutter-story-app-ui.
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.
from flutter-story-app-ui.
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
from flutter-story-app-ui.
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 detecorTry 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.
from flutter-story-app-ui.
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
from flutter-story-app-ui.
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 updatedYea 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
from flutter-story-app-ui.
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?
from flutter-story-app-ui.
Related Issues (8)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flutter-story-app-ui.