From 05376e008a777b9a3b0f790050bfef4a55c9cb0c Mon Sep 17 00:00:00 2001 From: Eliud <58745656+eliudio@users.noreply.github.com> Date: Wed, 28 Jul 2021 16:23:12 +0100 Subject: [PATCH 1/2] Ability to specify time for BubbleSpecialOne --- example/pubspec.lock | 6 ++-- lib/bubbles/bubble_special_one.dart | 51 +++++++++++++++++++++++------ pubspec.lock | 6 ++-- 3 files changed, 47 insertions(+), 16 deletions(-) diff --git a/example/pubspec.lock b/example/pubspec.lock index f994b6c..92c4d46 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -7,7 +7,7 @@ packages: name: async url: "https://pub.dartlang.org" source: hosted - version: "2.5.0" + version: "2.6.1" audioplayers: dependency: "direct dev" description: @@ -230,7 +230,7 @@ packages: name: source_span url: "https://pub.dartlang.org" source: hosted - version: "1.8.0" + version: "1.8.1" stack_trace: dependency: transitive description: @@ -265,7 +265,7 @@ packages: name: test_api url: "https://pub.dartlang.org" source: hosted - version: "0.2.19" + version: "0.3.0" typed_data: dependency: transitive description: diff --git a/lib/bubbles/bubble_special_one.dart b/lib/bubbles/bubble_special_one.dart index a87c8e0..2f5bb18 100644 --- a/lib/bubbles/bubble_special_one.dart +++ b/lib/bubbles/bubble_special_one.dart @@ -13,17 +13,20 @@ import 'package:flutter/material.dart'; class BubbleSpecialOne extends StatelessWidget { final bool isSender; final String text; + final String? time; final bool tail; final Color color; final bool sent; final bool delivered; final bool seen; final TextStyle textStyle; + final TextStyle? timeTextStyle; const BubbleSpecialOne({ Key? key, this.isSender = true, required this.text, + this.time, this.color = Colors.white70, this.tail = true, this.sent = false, @@ -33,13 +36,17 @@ class BubbleSpecialOne extends StatelessWidget { color: Colors.black87, fontSize: 16, ), + this.timeTextStyle = const TextStyle( + color: Colors.black87, + fontSize: 10, + ), }) : super(key: key); ///chat bubble builder method @override Widget build(BuildContext context) { bool stateTick = false; - Icon? stateIcon; + Widget? stateIcon; if (sent) { stateTick = true; stateIcon = Icon( @@ -65,6 +72,23 @@ class BubbleSpecialOne extends StatelessWidget { ); } + if (time != null) { + if (stateIcon != null) { + stateIcon = Row(children: [Text( + time!, + style: timeTextStyle, + textAlign: TextAlign.right, + ), SizedBox(width: 3), stateIcon, ]); + } else { + stateIcon = Text( + time!, + style: timeTextStyle, + textAlign: TextAlign.right, + ); + } + } + + return Align( alignment: isSender ? Alignment.topRight : Alignment.topLeft, child: Padding( @@ -79,7 +103,7 @@ class BubbleSpecialOne extends StatelessWidget { maxWidth: MediaQuery.of(context).size.width * .7, ), margin: isSender - ? stateTick + ? stateTick || time != null ? EdgeInsets.fromLTRB(7, 7, 14, 7) : EdgeInsets.fromLTRB(7, 7, 17, 7) : EdgeInsets.fromLTRB(17, 7, 7, 7), @@ -87,15 +111,22 @@ class BubbleSpecialOne extends StatelessWidget { children: [ Padding( padding: stateTick - ? EdgeInsets.only(right: 20) - : EdgeInsets.symmetric(vertical: 0, horizontal: 0), - child: Text( - text, - style: textStyle, - textAlign: TextAlign.left, - ), + ? time != null + ? EdgeInsets.only(right: 50) + : EdgeInsets.only(right: 20) + : time != null + ? EdgeInsets.only(right: 30) + : EdgeInsets.symmetric(vertical: 0, horizontal: 0), + child: + Column(children: [ + Text( + text, + style: textStyle, + textAlign: TextAlign.left, + ), + ]), ), - stateIcon != null && stateTick + stateIcon != null && (stateTick || time != null) ? Positioned( bottom: 0, right: 0, diff --git a/pubspec.lock b/pubspec.lock index a38f32a..cda6e0d 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -7,7 +7,7 @@ packages: name: async url: "https://pub.dartlang.org" source: hosted - version: "2.5.0" + version: "2.6.1" boolean_selector: dependency: transitive description: @@ -99,7 +99,7 @@ packages: name: source_span url: "https://pub.dartlang.org" source: hosted - version: "1.8.0" + version: "1.8.1" stack_trace: dependency: transitive description: @@ -134,7 +134,7 @@ packages: name: test_api url: "https://pub.dartlang.org" source: hosted - version: "0.2.19" + version: "0.3.0" typed_data: dependency: transitive description: From 7171ea773cd0b421b16eaefa3b62b52966b9f244 Mon Sep 17 00:00:00 2001 From: Eliud <58745656+eliudio@users.noreply.github.com> Date: Wed, 28 Jul 2021 21:12:13 +0100 Subject: [PATCH 2/2] Flexible bubbles --- lib/bubbles/bubble_special_one.dart | 104 +++++++++++++++++----------- 1 file changed, 63 insertions(+), 41 deletions(-) diff --git a/lib/bubbles/bubble_special_one.dart b/lib/bubbles/bubble_special_one.dart index 2f5bb18..33e0d42 100644 --- a/lib/bubbles/bubble_special_one.dart +++ b/lib/bubbles/bubble_special_one.dart @@ -10,33 +10,67 @@ import 'package:flutter/material.dart'; ///message sender can be changed using [isSender] ///chat bubble [TextStyle] can be customized using [textStyle] -class BubbleSpecialOne extends StatelessWidget { +class BubbleSpecialOne extends FlexibleBubbleSpecialOne { + BubbleSpecialOne({ + bool isSender: true, + required String text, + String? time, + bool tail: true, + Color color: Colors.white70, + bool sent: false, + bool delivered: false, + bool seen: false, + TextStyle textStyle: const TextStyle( + color: Colors.black87, + fontSize: 16, + ), + TextStyle timeTextStyle: const TextStyle( + color: Colors.black87, + fontSize: 10, + ), + }) : super( + isSender: isSender, + widget: Text( + text, + style: textStyle, + textAlign: TextAlign.left, + ), + timeWidget: time != null ? Text( + time, + style: timeTextStyle, + textAlign: TextAlign.right, + ) : null, + tail: tail, + color: color, + sent: sent, + delivered: delivered, + seen: seen, + timeTextStyle: timeTextStyle, + ); +} + +class FlexibleBubbleSpecialOne extends StatelessWidget { final bool isSender; - final String text; - final String? time; + final Widget widget; + final Widget? timeWidget; final bool tail; final Color color; final bool sent; final bool delivered; final bool seen; - final TextStyle textStyle; - final TextStyle? timeTextStyle; + final TextStyle timeTextStyle; - const BubbleSpecialOne({ + const FlexibleBubbleSpecialOne({ Key? key, this.isSender = true, - required this.text, - this.time, + required this.widget, + this.timeWidget, this.color = Colors.white70, this.tail = true, this.sent = false, this.delivered = false, this.seen = false, - this.textStyle = const TextStyle( - color: Colors.black87, - fontSize: 16, - ), - this.timeTextStyle = const TextStyle( + this.timeTextStyle = const TextStyle( color: Colors.black87, fontSize: 10, ), @@ -72,23 +106,18 @@ class BubbleSpecialOne extends StatelessWidget { ); } - if (time != null) { + if (timeWidget != null) { if (stateIcon != null) { - stateIcon = Row(children: [Text( - time!, - style: timeTextStyle, - textAlign: TextAlign.right, - ), SizedBox(width: 3), stateIcon, ]); + stateIcon = Row(children: [ + timeWidget!, + SizedBox(width: 3), + stateIcon, + ]); } else { - stateIcon = Text( - time!, - style: timeTextStyle, - textAlign: TextAlign.right, - ); + stateIcon = timeWidget; } } - return Align( alignment: isSender ? Alignment.topRight : Alignment.topLeft, child: Padding( @@ -103,7 +132,7 @@ class BubbleSpecialOne extends StatelessWidget { maxWidth: MediaQuery.of(context).size.width * .7, ), margin: isSender - ? stateTick || time != null + ? stateTick || timeWidget != null ? EdgeInsets.fromLTRB(7, 7, 14, 7) : EdgeInsets.fromLTRB(7, 7, 17, 7) : EdgeInsets.fromLTRB(17, 7, 7, 7), @@ -111,22 +140,15 @@ class BubbleSpecialOne extends StatelessWidget { children: [ Padding( padding: stateTick - ? time != null - ? EdgeInsets.only(right: 50) - : EdgeInsets.only(right: 20) - : time != null - ? EdgeInsets.only(right: 30) - : EdgeInsets.symmetric(vertical: 0, horizontal: 0), - child: - Column(children: [ - Text( - text, - style: textStyle, - textAlign: TextAlign.left, - ), - ]), + ? timeWidget != null + ? EdgeInsets.only(right: 50) + : EdgeInsets.only(right: 20) + : timeWidget != null + ? EdgeInsets.only(right: 30) + : EdgeInsets.symmetric(vertical: 0, horizontal: 0), + child: Column(children: [widget]), ), - stateIcon != null && (stateTick || time != null) + stateIcon != null && (stateTick || timeWidget != null) ? Positioned( bottom: 0, right: 0,