Skip to content

Commit c914e71

Browse files
authored
refactor(ui): use row/column spacing instead of insertBetween. (#2110)
1 parent 3c51614 commit c914e71

File tree

17 files changed

+141
-154
lines changed

17 files changed

+141
-154
lines changed

packages/stream_chat_flutter/lib/src/ai_assistant/ai_typing_indicator_view.dart

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import 'package:flutter/material.dart';
2-
import 'package:stream_chat_flutter/src/utils/extensions.dart';
32

43
/// {@template aiTypingIndicatorView}
54
/// A widget that displays a typing indicator for the AI.
@@ -113,6 +112,7 @@ class AnimatedDots extends StatelessWidget {
113112
@override
114113
Widget build(BuildContext context) {
115114
return Row(
115+
spacing: 4,
116116
mainAxisSize: MainAxisSize.min,
117117
children: <Widget>[
118118
...List.generate(
@@ -124,7 +124,7 @@ class AnimatedDots extends StatelessWidget {
124124
color: color,
125125
),
126126
),
127-
].insertBetween(const SizedBox(width: 4)),
127+
],
128128
);
129129
}
130130
}

packages/stream_chat_flutter/lib/src/attachment/builder/file_attachment_builder.dart

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,11 @@ class FileAttachmentBuilder extends StreamAttachmentWidgetBuilder {
7070
child = _buildFileAttachment(files.first);
7171
} else {
7272
child = Column(
73+
// Add a small vertical padding between each attachment.
74+
spacing: padding.vertical / 2,
7375
children: <Widget>[
7476
for (final file in files) _buildFileAttachment(file),
75-
].insertBetween(
76-
// Add a small vertical padding between each attachment.
77-
SizedBox(height: padding.vertical / 2),
78-
),
77+
],
7978
);
8079
}
8180

packages/stream_chat_flutter/lib/src/attachment/builder/mixed_attachment_builder.dart

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ class MixedAttachmentBuilder extends StreamAttachmentWidgetBuilder {
102102
return Padding(
103103
padding: padding,
104104
child: Column(
105+
spacing: padding.vertical / 2,
105106
mainAxisSize: MainAxisSize.min,
106107
children: <Widget>[
107108
if (urls != null)
@@ -134,9 +135,7 @@ class MixedAttachmentBuilder extends StreamAttachmentWidgetBuilder {
134135
_giphyAttachmentBuilder.build(context, message, {
135136
AttachmentType.giphy: giphys,
136137
}),
137-
].insertBetween(
138-
SizedBox(height: padding.vertical / 2),
139-
),
138+
],
140139
),
141140
);
142141
}

packages/stream_chat_flutter/lib/src/attachment/builder/url_attachment_builder.dart

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -87,12 +87,11 @@ class UrlAttachmentBuilder extends StreamAttachmentWidgetBuilder {
8787
child = _buildUrlPreview(urlPreviews.first);
8888
} else {
8989
child = Column(
90+
// Add a small vertical padding between each attachment.
91+
spacing: padding.vertical / 2,
9092
children: <Widget>[
9193
for (final urlPreview in urlPreviews) _buildUrlPreview(urlPreview),
92-
].insertBetween(
93-
// Add a small vertical padding between each attachment.
94-
SizedBox(height: padding.vertical / 2),
95-
),
94+
],
9695
);
9796
}
9897

packages/stream_chat_flutter/lib/src/attachment/url_attachment.dart

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ class StreamUrlAttachment extends StatelessWidget {
101101
Padding(
102102
padding: const EdgeInsets.all(8),
103103
child: Column(
104+
spacing: 4,
104105
crossAxisAlignment: CrossAxisAlignment.stretch,
105106
children: <Widget>[
106107
if (urlAttachment.title != null)
@@ -135,7 +136,7 @@ class StreamUrlAttachment extends StatelessWidget {
135136
style: messageTheme.urlAttachmentTextStyle,
136137
);
137138
}),
138-
].insertBetween(const SizedBox(height: 4)),
139+
],
139140
),
140141
),
141142
],

packages/stream_chat_flutter/lib/src/context_menu_items/context_menu_reaction_picker.dart

Lines changed: 50 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -95,68 +95,61 @@ class _ContextMenuReactionPickerState extends State<ContextMenuReactionPicker>
9595
child: Padding(
9696
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
9797
child: Row(
98+
spacing: 16,
9899
crossAxisAlignment: CrossAxisAlignment.start,
99100
mainAxisAlignment: MainAxisAlignment.spaceAround,
100101
mainAxisSize: MainAxisSize.min,
101-
children: reactionIcons
102-
.map<Widget>((reactionIcon) {
103-
final ownReactionIndex =
104-
widget.message.ownReactions?.indexWhere(
105-
(reaction) => reaction.type == reactionIcon.type,
106-
) ??
107-
-1;
108-
final index = reactionIcons.indexOf(reactionIcon);
109-
110-
final child = reactionIcon.builder(
111-
context,
112-
ownReactionIndex != -1,
113-
24,
114-
);
115-
116-
return ConstrainedBox(
117-
constraints: const BoxConstraints.tightFor(
118-
height: 24,
119-
width: 24,
120-
),
121-
child: RawMaterialButton(
122-
elevation: 0,
123-
shape: ContinuousRectangleBorder(
124-
borderRadius: BorderRadius.circular(16),
125-
),
126-
constraints: const BoxConstraints.tightFor(
127-
height: 24,
128-
width: 24,
129-
),
130-
onPressed: () {
131-
if (ownReactionIndex != -1) {
132-
removeReaction(
133-
context,
134-
widget.message.ownReactions![ownReactionIndex],
135-
);
136-
} else {
137-
sendReaction(
138-
context,
139-
reactionIcon.type,
140-
);
141-
}
142-
},
143-
child: AnimatedBuilder(
144-
animation: animations[index],
145-
builder: (context, child) => Transform.scale(
146-
scale: animations[index].value,
147-
child: child,
148-
),
149-
child: child,
150-
),
102+
children: reactionIcons.map<Widget>((reactionIcon) {
103+
final ownReactionIndex = widget.message.ownReactions?.indexWhere(
104+
(reaction) => reaction.type == reactionIcon.type,
105+
) ??
106+
-1;
107+
final index = reactionIcons.indexOf(reactionIcon);
108+
109+
final child = reactionIcon.builder(
110+
context,
111+
ownReactionIndex != -1,
112+
24,
113+
);
114+
115+
return ConstrainedBox(
116+
constraints: const BoxConstraints.tightFor(
117+
height: 24,
118+
width: 24,
119+
),
120+
child: RawMaterialButton(
121+
elevation: 0,
122+
shape: ContinuousRectangleBorder(
123+
borderRadius: BorderRadius.circular(16),
124+
),
125+
constraints: const BoxConstraints.tightFor(
126+
height: 24,
127+
width: 24,
128+
),
129+
onPressed: () {
130+
if (ownReactionIndex != -1) {
131+
removeReaction(
132+
context,
133+
widget.message.ownReactions![ownReactionIndex],
134+
);
135+
} else {
136+
sendReaction(
137+
context,
138+
reactionIcon.type,
139+
);
140+
}
141+
},
142+
child: AnimatedBuilder(
143+
animation: animations[index],
144+
builder: (context, child) => Transform.scale(
145+
scale: animations[index].value,
146+
child: child,
151147
),
152-
);
153-
})
154-
.insertBetween(
155-
const SizedBox(
156-
width: 16,
148+
child: child,
157149
),
158-
)
159-
.toList(),
150+
),
151+
);
152+
}).toList(),
160153
),
161154
),
162155
);

packages/stream_chat_flutter/lib/src/message_input/audio_recorder/stream_audio_recorder.dart

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,7 @@ class RecordStateHoldRecordingContent extends StatelessWidget {
299299
child: SwipeToLockButton(),
300300
),
301301
child: Row(
302+
spacing: 8,
302303
children: [
303304
IgnorePointer(
304305
child: PlaybackTimerIndicator(duration: recordingTime),
@@ -320,7 +321,7 @@ class RecordStateHoldRecordingContent extends StatelessWidget {
320321
child: recordButton,
321322
),
322323
),
323-
].insertBetween(const SizedBox(width: 8)),
324+
],
324325
),
325326
);
326327
}
@@ -601,6 +602,7 @@ class SwipeToLockButton extends StatelessWidget {
601602
color: theme.colorTheme.inputBg,
602603
),
603604
child: Column(
605+
spacing: 8,
604606
mainAxisSize: MainAxisSize.min,
605607
children: <Widget>[
606608
StreamSvgIcon(
@@ -617,7 +619,7 @@ class SwipeToLockButton extends StatelessWidget {
617619
color: theme.colorTheme.textLowEmphasis,
618620
),
619621
],
620-
].insertBetween(const SizedBox(height: 8)),
622+
],
621623
),
622624
);
623625
}

packages/stream_chat_flutter/lib/src/message_input/quoted_message_widget.dart

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -196,9 +196,6 @@ class _QuotedMessage extends StatelessWidget {
196196
);
197197
}
198198

199-
// Add some spacing between the children.
200-
children = children.insertBetween(const SizedBox(width: 8));
201-
202199
return Container(
203200
decoration: BoxDecoration(
204201
color: _getBackgroundColor(context),
@@ -216,6 +213,7 @@ class _QuotedMessage extends StatelessWidget {
216213
),
217214
padding: const EdgeInsets.all(8),
218215
child: Row(
216+
spacing: 8,
219217
mainAxisSize: MainAxisSize.min,
220218
mainAxisAlignment:
221219
reverse ? MainAxisAlignment.end : MainAxisAlignment.start,

packages/stream_chat_flutter/lib/src/message_input/stream_message_input.dart

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -886,10 +886,9 @@ class StreamMessageInputState extends State<StreamMessageInput>
886886
!(widget.actionsBuilder != null)
887887
? const Offstage()
888888
: Row(
889+
spacing: widget.spaceBetweenActions,
889890
mainAxisSize: MainAxisSize.min,
890-
children: _actionsList().insertBetween(
891-
SizedBox(width: widget.spaceBetweenActions),
892-
),
891+
children: _actionsList(),
893892
),
894893
);
895894
}

packages/stream_chat_flutter/lib/src/message_widget/reactions/reaction_picker.dart

Lines changed: 50 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -58,68 +58,61 @@ class _StreamReactionPickerState extends State<StreamReactionPicker>
5858
vertical: 8,
5959
),
6060
child: Row(
61+
spacing: 16,
6162
crossAxisAlignment: CrossAxisAlignment.start,
6263
mainAxisAlignment: MainAxisAlignment.end,
6364
mainAxisSize: MainAxisSize.min,
64-
children: reactionIcons
65-
.map<Widget>((reactionIcon) {
66-
final ownReactionIndex =
67-
widget.message.ownReactions?.indexWhere(
68-
(reaction) => reaction.type == reactionIcon.type,
69-
) ??
70-
-1;
71-
final index = reactionIcons.indexOf(reactionIcon);
72-
73-
final child = reactionIcon.builder(
74-
context,
75-
ownReactionIndex != -1,
76-
24,
77-
);
78-
79-
return ConstrainedBox(
80-
constraints: const BoxConstraints.tightFor(
81-
height: 24,
82-
width: 24,
83-
),
84-
child: RawMaterialButton(
85-
elevation: 0,
86-
shape: ContinuousRectangleBorder(
87-
borderRadius: BorderRadius.circular(16),
88-
),
89-
constraints: const BoxConstraints.tightFor(
90-
height: 24,
91-
width: 24,
92-
),
93-
onPressed: () {
94-
if (ownReactionIndex != -1) {
95-
removeReaction(
96-
context,
97-
widget.message.ownReactions![ownReactionIndex],
98-
);
99-
} else {
100-
sendReaction(
101-
context,
102-
reactionIcon.type,
103-
);
104-
}
105-
},
106-
child: AnimatedBuilder(
107-
animation: animations[index],
108-
builder: (context, child) => Transform.scale(
109-
scale: animations[index].value,
110-
child: child,
111-
),
112-
child: child,
113-
),
65+
children: reactionIcons.map<Widget>((reactionIcon) {
66+
final ownReactionIndex = widget.message.ownReactions?.indexWhere(
67+
(reaction) => reaction.type == reactionIcon.type,
68+
) ??
69+
-1;
70+
final index = reactionIcons.indexOf(reactionIcon);
71+
72+
final child = reactionIcon.builder(
73+
context,
74+
ownReactionIndex != -1,
75+
24,
76+
);
77+
78+
return ConstrainedBox(
79+
constraints: const BoxConstraints.tightFor(
80+
height: 24,
81+
width: 24,
82+
),
83+
child: RawMaterialButton(
84+
elevation: 0,
85+
shape: ContinuousRectangleBorder(
86+
borderRadius: BorderRadius.circular(16),
87+
),
88+
constraints: const BoxConstraints.tightFor(
89+
height: 24,
90+
width: 24,
91+
),
92+
onPressed: () {
93+
if (ownReactionIndex != -1) {
94+
removeReaction(
95+
context,
96+
widget.message.ownReactions![ownReactionIndex],
97+
);
98+
} else {
99+
sendReaction(
100+
context,
101+
reactionIcon.type,
102+
);
103+
}
104+
},
105+
child: AnimatedBuilder(
106+
animation: animations[index],
107+
builder: (context, child) => Transform.scale(
108+
scale: animations[index].value,
109+
child: child,
114110
),
115-
);
116-
})
117-
.insertBetween(
118-
const SizedBox(
119-
width: 16,
111+
child: child,
120112
),
121-
)
122-
.toList(),
113+
),
114+
);
115+
}).toList(),
123116
),
124117
),
125118
);

0 commit comments

Comments
 (0)