talksik/stream-chat-flutter
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix reaction picker spacing and size

Browse Source
This commit is contained in:
Salvatore Giordano
2021-01-12 13:49:44 +01:00
parent d9a50ae42e
commit 40910f93f1
2 changed files with 71 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/pubspec.yaml
+1 -1
View File
@@ -1,6 +1,6 @@
name: example name: example
description: A new Flutter project. description: A new Flutter project.
version: 1.1.0+2 version: 1.1.0+3
environment: environment:
sdk: ">=2.2.2 <3.0.0" sdk: ">=2.2.2 <3.0.0"
lib/src/reaction_picker.dart
+70 -53
View File
@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.dart'; import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
import '../stream_chat_flutter.dart'; import '../stream_chat_flutter.dart';
import 'extension.dart';
/// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/reaction_picker.png) /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/reaction_picker.png)
/// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/reaction_picker_paint.png) /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/reaction_picker_paint.png)
@@ -57,67 +58,83 @@ class _ReactionPickerState extends State<ReactionPicker>
return Transform.scale( return Transform.scale(
scale: val, scale: val,
child: Material( child: Material(
borderRadius: BorderRadius.circular(24),
color: StreamChatTheme.of(context).colorTheme.white, color: StreamChatTheme.of(context).colorTheme.white,
clipBehavior: Clip.hardEdge, clipBehavior: Clip.hardEdge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0), padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: reactionIcons.map((reactionIcon) { children: reactionIcons
final ownReactionIndex = widget.message.ownReactions .map<Widget>((reactionIcon) {
?.indexWhere((reaction) => final ownReactionIndex = widget.message.ownReactions
reaction.type == reactionIcon.type) ?? ?.indexWhere((reaction) =>
-1; reaction.type == reactionIcon.type) ??
var index = reactionIcons.indexOf(reactionIcon); -1;
var index = reactionIcons.indexOf(reactionIcon);
return IconButton( return RawMaterialButton(
iconSize: 24, elevation: 0,
icon: AnimatedBuilder( padding: const EdgeInsets.all(0),
animation: animations[index], clipBehavior: Clip.none,
builder: (context, val) { shape: ContinuousRectangleBorder(
return Transform.scale( borderRadius: BorderRadius.circular(16),
scale: animations[index].value, ),
child: StreamSvgIcon( constraints: BoxConstraints.tightFor(
assetName: reactionIcon.assetName, height: 24,
height: max( width: 24,
0, ),
animations[index].value * 24.0, child: AnimatedBuilder(
), animation: animations[index],
width: max( builder: (context, val) {
0, return Transform.scale(
animations[index].value * 24.0, alignment: Alignment.center,
), scale: animations[index].value,
color: ownReactionIndex != -1 child: StreamSvgIcon(
? StreamChatTheme.of(context) assetName: reactionIcon.assetName,
.colorTheme height: max(
.accentBlue 0,
: Theme.of(context) animations[index].value * 24.0,
.iconTheme ),
.color width: max(
.withOpacity(.5), 0,
), animations[index].value * 24.0,
); ),
}), color: ownReactionIndex != -1
onPressed: () { ? StreamChatTheme.of(context)
if (ownReactionIndex != -1) { .colorTheme
removeReaction( .accentBlue
context, : Theme.of(context)
widget.message.ownReactions[ownReactionIndex], .iconTheme
); .color
} else { .withOpacity(.5),
sendReaction( ),
context, );
reactionIcon.type, }),
); onPressed: () {
} if (ownReactionIndex != -1) {
}, removeReaction(
); context,
}).toList(), widget.message.ownReactions[ownReactionIndex],
);
} else {
sendReaction(
context,
reactionIcon.type,
);
}
},
);
})
.insertBetween(SizedBox(
width: 16,
))
.toList(),
), ),
), ),
), ),