flutter_basic_chat_bubble

Description:

flutter basic chat bubble

flutter_basic_chat_bubble #

The puropose of this package is it to show customizable chat bubbles. You can customize the bubbles in certain ways. The bubbles can just display text messages. At the moment other data types are not possible.

Usage #
Set the dependency #
dependencies:
flutter_basic_chat_bubble: ^0.2.0+2
copied to clipboard
Install #
flutter pub get
copied to clipboard
Import it #
import 'package:flutter_basic_chat_bubble/flutter_basic_chat_bubble.dart';
copied to clipboard
Use it #
return Scaffold(
body: ListView.builder(
itemCount: messages.length,
itemBuilder: (BuildContext context, int index) {
return BasicChatBubble(
message: messages[index],
isMe: index % 2 ==
0, // Every second bubble has the isMe flag set to true
backgroundColor: index % 2 == 0 ? Colors.green[400] : Colors.blue,
textColor: Colors.white,
buttonWidget: index == messages.length - 1
? InkWell(
child: CircleAvatar(
backgroundColor: Colors.red,
child: Icon(
Icons.video_call,
color: Colors.white,
),
),
onTap: () {
print('Button tapped $index');
})
: null,
buttonText: 'Make a Call',
);
},
),
);
copied to clipboard
For more details see the example.
Properties #
final BasicChatMessage message;
final bool isMe;
final Color backgroundColor;
final Color textColor;
final Widget buttonWidget;
final String buttonText;
copied to clipboard
message #
The property message contains an object representing the content of the message. It's defined as:
/// The [BasicChatMessage] class represents a single message, that forms
/// the content of a [BasicChatBubble]. This object has the following properties:
/// String [peerUserName] containes the name of the peer user (sender or receiver of message)
/// String [ownUserName] contains the own user name
/// String [messageText] contains the text of the message
/// DateTime [timeStamp] is the date/time of the message was sent
class BasicChatMessage {
String peerUserName;
String messageText;
String timeStamp;

BasicChatMessage({this.peerUserName, this.messageText, this.timeStamp});
}
copied to clipboard
isMe #
This parameter indicates, that the user of the app is the sender of the message. It determines the position of the bubble:

true: right aligned chat bubble
false: left aligned chat bubble

backgroundColor #
This property defines the background color of the chat bubble.
textColor #
With this property you can set the color of the text elements of the chat bubble.
Embedding a button in the chat bubble #
In some cases it might be useful to embed a button inside the chat bubble. Imagin a messenger app with a video or phone call functionality.

This can be done by specifying a widget for that purpose in the buttonWidget and the buttonText parameters.
buttonWidget #
Here you specify a widget, that should be used as the button. Usually you would use an InkWell widget to make it tappable.
Example:
InkWell(
child: CircleAvatar(
backgroundColor: Colors.red,
child: Icon(
Icons.video_call,
color: Colors.white,
),
),
onTap: () {
print('Button tapped $index');
}
)
copied to clipboard
buttonText #
This parameter defines the text placed right of the button, replacing the message body.