flutter-fb-reactions-animation
flutter-fb-reactions-animation copied to clipboard
Published
20 hours ago •
duytq94
duytq94
Reactions don't appear when embedded inside a ListView builder
First I'd like to thank you for this useful tutorial , I followed your code to implement the reactions button , then put it inside a ListView builder so that every row of the list have a text and a react like button . The problem is that when I click on the button , the reactions either don't display or when they do i can't click on them to change the reaction . I cloned your code and tried the button inside an empty project without the ListView builder , it works fine.
This is my code :
Expanded(
flex : 8,
child: SizedBox(
height: 600.0,
child: ListView.builder(
itemCount:
2,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Center(
child: Container(
height: 110,
child: Row(
children: <Widget>[
Expanded(
child: Text(
'mission'),
),
SizedBox(height: 30),
Expanded(
child: btnLike()
)
],
),
),
),
);
}),
),
),
btnLike() widget :
Widget btnLike(){
return GestureDetector(
child: Padding(
padding: const EdgeInsets.all(20.0),
child:Column(
children: <Widget>[
// Just a top space
// main content
Expanded(
child: Container(
child: Expanded(
child: Stack(
children: <Widget>[
// Box and icons
Stack(
children: <Widget>[
// Box
renderBox(),
// Icons
renderIcons(),
],
alignment: Alignment.bottomLeft,
),
// Button like
renderBtnLike(),
// Icons when jump
// Icon like
whichIconUserChoose == 1 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/close.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLikeWhenRelease.value,
),
)
: Container(),
// Icon love
whichIconUserChoose == 2 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/nowork.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLoveWhenRelease.value,
),
)
: Container(),
// Icon haha
whichIconUserChoose == 3 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/sunny.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconHahaWhenRelease.value,
),
)
: Container(),
],
),
),
margin: EdgeInsets.only(left: 20.0, right: 20.0),
// Area of the content can drag
// decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
width: double.infinity,
),
),
],
),
),
onHorizontalDragEnd: onHorizontalDragEndBoxIcon,
onHorizontalDragUpdate: onHorizontalDragUpdateBoxIcon,
);
}
Widget renderIcons()
Widget renderIcons() {
return Container(
child: Row(
children: <Widget>[
// icon like
Transform.scale(
child: Container(
child: Column(
children: <Widget>[
currentIconFocus == 1
? Container(
child: Text(
'Now work',
style: TextStyle(fontSize: 8.0, color: Colors.white),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.black.withOpacity(0.3),
),
padding: EdgeInsets.only(left: 7.0, right: 7.0, top: 2.0, bottom: 2.0),
margin: EdgeInsets.only(bottom: 8.0),
)
: Container(),
Expanded(
child: Image.asset(
"assets/icons/close.png",
width: 20.0,
height: 20.0,
fit: BoxFit.contain,
),
),
],
),
margin: EdgeInsets.only(bottom: pushIconLikeUp.value),
width: 60.0,
height: currentIconFocus == 1 ? 70.0 : 60.0,
),
scale: isDragging
? (currentIconFocus == 1
? this.zoomIconChosen.value
: (previousIconFocus == 1
? this.zoomIconNotChosen.value
: isJustDragInside
? this.zoomIconWhenDragInside.value
: 0.8))
: isDraggingOutside
? this.zoomIconWhenDragOutside.value
: this.zoomIconLike.value,
),
Transform.scale(
child: Container(
child: Column(
children: <Widget>[
currentIconFocus == 2
? Container(
child: Text(
'Day Off',
style: TextStyle(fontSize: 8.0, color: Colors.white),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0), color: Colors.black.withOpacity(0.3)),
padding: EdgeInsets.only(left: 7.0, right: 7.0, top: 2.0, bottom: 2.0),
margin: EdgeInsets.only(bottom: 8.0),
)
: Container(),
Expanded(
child
: Image.asset(
'assets/icons/nowork.png',
width: 20.0,
height: 20.0,
fit: BoxFit.contain,
),
),
],
),
margin: EdgeInsets.only(bottom: pushIconLoveUp.value),
width: 60.0,
height: currentIconFocus == 2 ? 70.0 : 60.0,
),
scale: isDragging
? (currentIconFocus == 2
? this.zoomIconChosen.value
: (previousIconFocus == 2
? this.zoomIconNotChosen.value
: isJustDragInside
? this.zoomIconWhenDragInside.value
: 0.8))
: isDraggingOutside
? this.zoomIconWhenDragOutside.value
: this.zoomIconLove.value,
),
Transform.scale(
child: Container(
child: Column(
children: <Widget>[
currentIconFocus == 3
? Container(
child: Text(
'Full Day',
style: TextStyle(fontSize: 8.0, color: Colors.white),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0), color: Colors.black.withOpacity(0.3)),
padding: EdgeInsets.only(left: 7.0, right: 7.0, top: 2.0, bottom: 2.0),
margin: EdgeInsets.only(bottom: 8.0),
)
: Container(),
Expanded(
child: Image.asset(
'assets/icons/sunny.png',
width: 20.0,
height: 20.0,
fit: BoxFit.contain,
),
),
],
),
margin: EdgeInsets.only(bottom: pushIconHahaUp.value),
width: 60.0,
height: currentIconFocus == 3 ? 70.0 : 60.0,
),
scale: isDragging
? (currentIconFocus == 3
? this.zoomIconChosen.value
: (previousIconFocus == 3
? this.zoomIconNotChosen.value
: isJustDragInside
? this.zoomIconWhenDragInside.value
: 0.8))
: isDraggingOutside
? this.zoomIconWhenDragOutside.value
: this.zoomIconHaha.value,
),
Transform.scale(
child: Container(
child: Column(
children: <Widget>[
currentIconFocus == 4
? Container(
child: Text(
'Half Day',
style: TextStyle(fontSize: 8.0, color: Colors.white),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0), color: Colors.black.withOpacity(0.3)),
padding: EdgeInsets.only(left: 7.0, right: 7.0, top: 2.0, bottom: 2.0),
margin: EdgeInsets.only(bottom: 8.0),
)
: Container(),
Expanded(
child: Image.asset(
'assets/icons/sunrise.png',
width: 20.0,
height: 20.0,
fit: BoxFit.contain,
),
),
],
),
margin: EdgeInsets.only(bottom: pushIconWowUp.value),
width: 30.0,
height: currentIconFocus == 4 ? 70.0 : 60.0,
),
scale: isDragging
? (currentIconFocus == 4
? this.zoomIconChosen.value
: (previousIconFocus == 4
? this.zoomIconNotChosen.value
: isJustDragInside
? this.zoomIconWhenDragInside.value
: 0.8))
: isDraggingOutside
? this.zoomIconWhenDragOutside.value
: this.zoomIconWow.value,
),
// icon love,
// icon haha
// icon wow
],
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
),
width: 300.0,
height: 250.0,
margin: EdgeInsets.only(left: this.moveRightGroupIcon.value, top: 150.0),
// uncomment here to see area of draggable
// color: Colors.amber.withOpacity(0.5),
);
}
Widget renderBtnLike()
Widget renderBtnLike() {
return Container(
child: GestureDetector(
onTapDown: onTapDownBtn,
onTapUp: onTapUpBtn,
onTap: onTapBtn,
child: Container(
child: Row(
children: <Widget>[
// Icon like
Expanded(
child: Transform.scale(
child: Transform.rotate(
child: Image.asset(
getImageIconBtn(),
width: 10.0,
height: 10.0,
fit: BoxFit.contain,
color: getTintColorIconBtn(),
),
angle:
!isLongPress ? handleOutputRangeTiltIconLike(tiltIconLikeInBtn2.value) : tiltIconLikeInBtn.value,
),
scale:
!isLongPress ? handleOutputRangeZoomInIconLike(zoomIconLikeInBtn2.value) : zoomIconLikeInBtn.value,
),
),
// Text like
Expanded(
child: Transform.scale(
child: Text(
getTextBtn(),
style: TextStyle(
color: getColorTextBtn(),
fontSize: 8.0,
fontWeight: FontWeight.bold,
),
),
scale:
!isLongPress ? handleOutputRangeZoomInIconLike(zoomIconLikeInBtn2.value) : zoomTextLikeInBtn.value,
),
),
],
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
),
padding: EdgeInsets.all(8.0),
color: Colors.transparent,
),
),
width: 100.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4.0),
color: Colors.white,
border: Border.all(color: getColorBorderBtn()),
),
margin: EdgeInsets.all(20.0),
);
}
Working on a very important project and been stuck for a while now I would appreciate a little help . Also one more thing when I click on one button inside the ListView builder all buttons get triggered, I want to be able to only change the reactions of the clicked button , thank you in advance .
