diff --git a/README.md b/README.md index 45b268d..3313827 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,74 @@ # flutter_basic_chat_bubble -A new Flutter package project. +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. -## Getting Started +![Screenhot](https://github.com/rwbr/flutter_basic_chat_bubble/blob/main/img/demo_screen.png) -This project is a starting point for a Dart -[package](https://flutter.dev/developing-packages/), -a library module containing code that can be shared easily across -multiple Flutter or Dart projects. +## Usage + +### Set the dependency + +``` +dependencies: + flutter_basic_chat_bubble: ^0.0.1 +``` + +### Install + +``` +flutter pub get +``` + +### Import it + +```dart +import 'package:flutter_basic_chat_bubble/flutter_basic_chat_bubble.dart'; +``` + +### Use it + +```dart +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', + ); + }, + ), +); +``` + +For more details see the **example**. + +## Properties + +```dart +final BasicChatMessage message; +final bool isMe; +final Color backgroundColor; +final Color textColor; +final Color buttonColor; +final Widget buttonWidget; +final String buttonText; +``` -For help getting started with Flutter, view our -[online documentation](https://flutter.dev/docs), which offers tutorials, -samples, guidance on mobile development, and a full API reference. diff --git a/example/lib/main.dart b/example/lib/main.dart index ee9b8dd..d2487bf 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -6,30 +6,26 @@ void main() { } class BasicChatBubbleDemo extends StatelessWidget { + // Creating a list of sample Chat messages final List messages = [ BasicChatMessage( peerUserName: 'User1', - ownUserName: 'My name', messageText: 'Awsome message!', timeStamp: '12:00'), BasicChatMessage( peerUserName: 'User1', - ownUserName: 'My name', messageText: 'Awsome message!', timeStamp: 'Yesterday'), BasicChatMessage( peerUserName: 'User1', - ownUserName: 'My name', messageText: 'Awsome message!', timeStamp: 'Tue'), BasicChatMessage( peerUserName: 'User1', - ownUserName: 'My name', messageText: 'Awsome message!', timeStamp: 'Mon'), BasicChatMessage( peerUserName: 'User1', - ownUserName: 'My name', messageText: 'Awsome message!', timeStamp: 'Sun', ), @@ -40,19 +36,7 @@ class BasicChatBubbleDemo extends StatelessWidget { return MaterialApp( title: 'Basic Chat Bubble Demo', theme: ThemeData( - // This is the theme of your application. - // - // Try running your application with "flutter run". You'll see the - // application has a blue toolbar. Then, without quitting the app, try - // changing the primarySwatch below to Colors.green and then invoke - // "hot reload" (press "r" in the console where you ran "flutter run", - // or simply save your changes to "hot reload" in a Flutter IDE). - // Notice that the counter didn't reset back to zero; the application - // is not restarted. primarySwatch: Colors.blue, - // This makes the visual density adapt to the platform that you run - // the app on. For desktop platforms, the controls will be smaller and - // closer together (more dense) than on mobile platforms. visualDensity: VisualDensity.adaptivePlatformDensity, ), home: Scaffold( @@ -61,7 +45,8 @@ class BasicChatBubbleDemo extends StatelessWidget { itemBuilder: (BuildContext context, int index) { return BasicChatBubble( message: messages[index], - isMe: index % 2 == 0, + 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 diff --git a/img/demo_screen.png b/img/demo_screen.png new file mode 100644 index 0000000..d85c9a1 Binary files /dev/null and b/img/demo_screen.png differ diff --git a/lib/flutter_basic_chat_message.dart b/lib/flutter_basic_chat_message.dart index c48de5c..0035f95 100644 --- a/lib/flutter_basic_chat_message.dart +++ b/lib/flutter_basic_chat_message.dart @@ -6,10 +6,8 @@ /// DateTime [timeStamp] is the date/time of the message was sent class BasicChatMessage { String peerUserName; - String ownUserName; String messageText; String timeStamp; - BasicChatMessage( - {this.peerUserName, this.ownUserName, this.messageText, this.timeStamp}); + BasicChatMessage({this.peerUserName, this.messageText, this.timeStamp}); }