From 3e980e3d74ba22dc16d48424d047c848bdab343a Mon Sep 17 00:00:00 2001 From: Marcelo Amaro Date: Thu, 5 Sep 2024 18:19:08 -0300 Subject: [PATCH 1/3] bugfix: fixed layout from DSEndCallsMessageBubble when used by small screens --- .../ds_end_calls_message_bubble.widget.dart | 83 +++++++++++-------- .../chat/ds_message_bubble.widget.dart | 2 +- .../chat/ds_survey_message_bubble.widget.dart | 14 ++-- .../sample_message_bubble.showcase.dart | 16 ++++ sample/pubspec.lock | 2 +- 5 files changed, 76 insertions(+), 41 deletions(-) diff --git a/lib/src/widgets/chat/calls/ds_end_calls_message_bubble.widget.dart b/lib/src/widgets/chat/calls/ds_end_calls_message_bubble.widget.dart index 472774a7..430e4f97 100644 --- a/lib/src/widgets/chat/calls/ds_end_calls_message_bubble.widget.dart +++ b/lib/src/widgets/chat/calls/ds_end_calls_message_bubble.widget.dart @@ -32,7 +32,7 @@ class DSEndCallsMessageBubble extends StatefulWidget { } class _DSEndCallsMessageBubbleState extends State { - final StreamController _streamController = StreamController(); + final StreamController _streamController = StreamController.broadcast(); late final Future _phoneNumber; Future? _session; @@ -71,6 +71,7 @@ class _DSEndCallsMessageBubbleState extends State { @override Widget build(BuildContext context) { return DSMessageBubble( + shouldUseDefaultSize: true, padding: const EdgeInsets.symmetric( vertical: 12.0, horizontal: 12.0, @@ -79,6 +80,7 @@ class _DSEndCallsMessageBubbleState extends State { align: widget.align, style: widget.style, child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, children: [ _buildCallInfo(), _buildMediaPlayer(), @@ -87,11 +89,14 @@ class _DSEndCallsMessageBubbleState extends State { ); } - Widget _buildCallInfo() => Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.start, + Widget _buildCallInfo() => Wrap( + direction: Axis.horizontal, + alignment: WrapAlignment.spaceBetween, + runAlignment: WrapAlignment.center, + crossAxisAlignment: WrapCrossAlignment.start, children: [ Row( + mainAxisSize: MainAxisSize.min, children: [ Padding( padding: const EdgeInsets.only(right: 8.0), @@ -131,22 +136,20 @@ class _DSEndCallsMessageBubbleState extends State { fontWeight: DSFontWeights.semiBold, ), ], - ), + ) ], ), - Flexible( - child: FutureBuilder( - future: _phoneNumber, - builder: (_, snapshot) { - if (snapshot.hasData && !snapshot.hasError) { - return DSCaptionSmallText( - snapshot.data, - color: _foregroundColor, - ); - } - return const DSSpinnerLoading(); - }, - ), + FutureBuilder( + future: _phoneNumber, + builder: (_, snapshot) { + if (snapshot.hasData && !snapshot.hasError) { + return DSCaptionSmallText( + snapshot.data, + color: _foregroundColor, + ); + } + return const DSSpinnerLoading(); + }, ), ], ); @@ -155,22 +158,34 @@ class _DSEndCallsMessageBubbleState extends State { ? StreamBuilder( stream: _streamController.stream, builder: (_, __) { - return Padding( - padding: const EdgeInsets.only( - top: 8.0, - ), - child: DSAnimatedSize( - child: FutureBuilder( - future: _session, - builder: (_, snapshot) => switch (snapshot.connectionState) { - ConnectionState.done => snapshot.hasError - ? _buildError() - : (snapshot.data?.isNotEmpty ?? false) - ? _buildAudioPlayer(snapshot.data!) - : const SizedBox.shrink(), - _ => _buildLoading(), - }, - ), + return DSAnimatedSize( + child: FutureBuilder( + future: _session, + builder: (_, snapshot) { + Widget child; + + switch (snapshot.connectionState) { + case ConnectionState.done: + if (snapshot.hasError) { + child = _buildError(); + } else if (snapshot.data?.isNotEmpty ?? false) { + child = _buildAudioPlayer(snapshot.data!); + } else { + return const SizedBox.shrink(); + } + break; + + default: + child = _buildLoading(); + } + + return Padding( + padding: const EdgeInsets.only( + top: 8.0, + ), + child: child, + ); + }, ), ); }, diff --git a/lib/src/widgets/chat/ds_message_bubble.widget.dart b/lib/src/widgets/chat/ds_message_bubble.widget.dart index 4131b93c..1dc169af 100644 --- a/lib/src/widgets/chat/ds_message_bubble.widget.dart +++ b/lib/src/widgets/chat/ds_message_bubble.widget.dart @@ -75,7 +75,7 @@ class DSMessageBubble extends StatelessWidget { color: style.bubbleBackgroundColor(align), child: Column( mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.stretch, children: [ if (replyContent != null) DSReplyContainer( diff --git a/lib/src/widgets/chat/ds_survey_message_bubble.widget.dart b/lib/src/widgets/chat/ds_survey_message_bubble.widget.dart index 5a5cb3f7..471af69a 100644 --- a/lib/src/widgets/chat/ds_survey_message_bubble.widget.dart +++ b/lib/src/widgets/chat/ds_survey_message_bubble.widget.dart @@ -53,11 +53,15 @@ class DSSurveyMessageBubble extends StatelessWidget { Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - DSCaptionText( - _getDescriptionPreview(false), + Flexible( + child: DSCaptionText( + _getDescriptionPreview(false), + ), ), - DSCaptionText( - _getDescriptionPreview(true), + Flexible( + child: DSCaptionText( + _getDescriptionPreview(true), + ), ), ], ), @@ -118,7 +122,7 @@ class DSSurveyMessageBubble extends StatelessWidget { } } - _getDescriptionPreview(bool positiveLabel) => positiveLabel + String _getDescriptionPreview(bool positiveLabel) => positiveLabel ? type == DSSurveyType.recommendation ? 'survey.recommendation-answered-positive'.translate() : 'survey.positive'.translate() diff --git a/sample/lib/widgets/showcase/sample_message_bubble.showcase.dart b/sample/lib/widgets/showcase/sample_message_bubble.showcase.dart index 786ebeab..d71fdbb2 100644 --- a/sample/lib/widgets/showcase/sample_message_bubble.showcase.dart +++ b/sample/lib/widgets/showcase/sample_message_bubble.showcase.dart @@ -55,6 +55,13 @@ class SampleMessageBubbleShowcase extends StatelessWidget { ); } + Future _onAsyncFetchEmptySession(_) { + return Future.delayed( + const Duration(seconds: 2), + () => null, + ); + } + Future _onAsyncFetchSessionError(_) { return Future.delayed( const Duration(seconds: 2), @@ -94,6 +101,15 @@ class SampleMessageBubbleShowcase extends StatelessWidget { onAsyncFetchSession: _onAsyncFetchSession, align: DSAlign.right, ), + Padding( + padding: const EdgeInsets.symmetric(vertical: 8.0), + child: DSEndCallsMessageBubble( + callsMediaMessage: + DSCallsMediaMessage.fromJson(_callsMediaMessage), + onAsyncFetchSession: _onAsyncFetchEmptySession, + align: DSAlign.right, + ), + ), Padding( padding: const EdgeInsets.symmetric(vertical: 8.0), child: DSEndCallsMessageBubble( diff --git a/sample/pubspec.lock b/sample/pubspec.lock index eca993ca..a46cf24e 100644 --- a/sample/pubspec.lock +++ b/sample/pubspec.lock @@ -31,7 +31,7 @@ packages: path: ".." relative: true source: path - version: "0.1.8" + version: "0.1.9" boolean_selector: dependency: transitive description: From f389b8af3abc6e67aa18da4683c5431a81492f43 Mon Sep 17 00:00:00 2001 From: Marcelo Amaro Date: Thu, 5 Sep 2024 18:20:31 -0300 Subject: [PATCH 2/3] chore: upgrade package version from 0.1.9 to 0.2.0 --- CHANGELOG.md | 4 ++++ pubspec.yaml | 2 +- sample/pubspec.lock | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35b3cce5..bb696dea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 0.2.0 + +- [DSEndCallsMessageBubble] Fixed layout when used by small screens. + ## 0.1.9 - [DSEndCallsMessageBubble] Removed load recording state when session doesn't have available recording. diff --git a/pubspec.yaml b/pubspec.yaml index 4665f023..8d9af97e 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: blip_ds description: Blip Design System for Flutter. -version: 0.1.9 +version: 0.2.0 homepage: https://github.com/takenet/blip-ds-flutter#readme repository: https://github.com/takenet/blip-ds-flutter diff --git a/sample/pubspec.lock b/sample/pubspec.lock index a46cf24e..27776096 100644 --- a/sample/pubspec.lock +++ b/sample/pubspec.lock @@ -31,7 +31,7 @@ packages: path: ".." relative: true source: path - version: "0.1.9" + version: "0.2.0" boolean_selector: dependency: transitive description: From 8f5ef5f05c4a4d415d573b2cf61364f9ba939bc7 Mon Sep 17 00:00:00 2001 From: Marcelo Amaro Date: Thu, 5 Sep 2024 18:28:33 -0300 Subject: [PATCH 3/3] bugfix: strech DSMessageBubble only when using default size constraints --- lib/src/widgets/chat/ds_message_bubble.widget.dart | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/src/widgets/chat/ds_message_bubble.widget.dart b/lib/src/widgets/chat/ds_message_bubble.widget.dart index 1dc169af..17a1398c 100644 --- a/lib/src/widgets/chat/ds_message_bubble.widget.dart +++ b/lib/src/widgets/chat/ds_message_bubble.widget.dart @@ -75,7 +75,9 @@ class DSMessageBubble extends StatelessWidget { color: style.bubbleBackgroundColor(align), child: Column( mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.stretch, + crossAxisAlignment: shouldUseDefaultSize + ? CrossAxisAlignment.stretch + : CrossAxisAlignment.start, children: [ if (replyContent != null) DSReplyContainer(