[Release] 0.2.0

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.

lib/src/widgets/chat/calls/ds_end_calls_message_bubble.widget.dart

@@ -32,7 +32,7 @@ class DSEndCallsMessageBubble extends StatefulWidget {
 }
 
 class _DSEndCallsMessageBubbleState extends State<DSEndCallsMessageBubble> {
-  final StreamController _streamController = StreamController<bool>();
+  final StreamController _streamController = StreamController<bool>.broadcast();
   late final Future<String> _phoneNumber;
   Future<String?>? _session;
 
@@ -71,6 +71,7 @@ class _DSEndCallsMessageBubbleState extends State<DSEndCallsMessageBubble> {
   @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<DSEndCallsMessageBubble> {
       align: widget.align,
       style: widget.style,
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
           _buildCallInfo(),
           _buildMediaPlayer(),
@@ -87,11 +89,14 @@ class _DSEndCallsMessageBubbleState extends State<DSEndCallsMessageBubble> {
     );
   }
 
-  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<DSEndCallsMessageBubble> {
                     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<DSEndCallsMessageBubble> {
       ? StreamBuilder(
           stream: _streamController.stream,
           builder: (_, __) {
-            return Padding(
-              padding: const EdgeInsets.only(
-                top: 8.0,
-              ),
-              child: DSAnimatedSize(
-                child: FutureBuilder<String?>(
-                  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<String?>(
+                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,
+                  );
+                },
               ),
             );
           },

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.start,
+              crossAxisAlignment: shouldUseDefaultSize
+                  ? CrossAxisAlignment.stretch
+                  : CrossAxisAlignment.start,
               children: [
                 if (replyContent != null)
                   DSReplyContainer(

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()

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
 

sample/lib/widgets/showcase/sample_message_bubble.showcase.dart

@@ -55,6 +55,13 @@ class SampleMessageBubbleShowcase extends StatelessWidget {
     );
   }
 
+  Future<String?> _onAsyncFetchEmptySession(_) {
+    return Future.delayed(
+      const Duration(seconds: 2),
+      () => null,
+    );
+  }
+
   Future<String?> _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(

sample/pubspec.lock

@@ -31,7 +31,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.1.8"
+    version: "0.2.0"
   boolean_selector:
     dependency: transitive
     description: