{"id":13600187,"url":"https://github.com/prahack/chat_bubbles","last_synced_at":"2025-04-12T19:45:01.843Z","repository":{"id":43494448,"uuid":"261479060","full_name":"prahack/chat_bubbles","owner":"prahack","description":"Flutter chat bubble/speech bubble widgets.","archived":false,"fork":false,"pushed_at":"2025-01-06T00:36:09.000Z","size":3323,"stargazers_count":95,"open_issues_count":34,"forks_count":77,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T23:09:54.201Z","etag":null,"topics":["android","bubbles","chat","chat-bubbles","dart","flutter","flutter-package","hacktoberfest","ios","speech-bubbles"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/chat_bubbles","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prahack.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-05T13:30:02.000Z","updated_at":"2025-03-24T10:27:23.000Z","dependencies_parsed_at":"2024-01-13T18:24:09.961Z","dependency_job_id":"6496335e-c66a-4a54-9d5a-bcae4148fce8","html_url":"https://github.com/prahack/chat_bubbles","commit_stats":{"total_commits":88,"total_committers":6,"mean_commits":"14.666666666666666","dds":0.2272727272727273,"last_synced_commit":"ee1c67390ce1242327a163e32aebbdda1b35eb2c"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prahack%2Fchat_bubbles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prahack%2Fchat_bubbles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prahack%2Fchat_bubbles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prahack%2Fchat_bubbles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prahack","download_url":"https://codeload.github.com/prahack/chat_bubbles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625490,"owners_count":21135513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","bubbles","chat","chat-bubbles","dart","flutter","flutter-package","hacktoberfest","ios","speech-bubbles"],"created_at":"2024-08-01T18:00:31.155Z","updated_at":"2025-04-12T19:45:01.822Z","avatar_url":"https://github.com/prahack.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# chat_bubbles plugin\n\n![Pub Version](https://img.shields.io/pub/v/chat_bubbles?color=blue)\n![GitHub](https://img.shields.io/github/license/prahack/chat_bubbles)\n![GitHub forks](https://img.shields.io/github/forks/prahack/chat_bubbles)\n![GitHub Repo stars](https://img.shields.io/github/stars/prahack/chat_bubbles)\n![GitHub last commit](https://img.shields.io/github/last-commit/prahack/chat_bubbles)\n![likes](https://img.shields.io/pub/likes/chat_bubbles?logo=dart)\n![popularity](https://img.shields.io/pub/popularity/chat_bubbles?logo=dart)\n![pub points](https://img.shields.io/pub/points/chat_bubbles?logo=dart)\n\nFlutter chat bubble widgets, similar to the Whatsapp and more shapes. Audio and Image chat bubble widgets are also included. Easy to use and implement chat bubbles.\n\n## Getting Started\n\nAdd this to your package's `pubspec.yaml` file:\n\n```yaml\ndependencies:\n  chat_bubbles: ^1.7.0\n```\n\n## Usage\n\nThen you just have to import the package with\n\n```dart\nimport 'package:chat_bubbles/chat_bubbles.dart'\n```\n\nNow you can use this plugin to implement various types of Chat Bubbles, Audio Chat Bubbles and Date chips.\n\n## Examples\n\n### iMessage's bubble example\n\n\u003cimg src=\"https://github.com/prahack/chat_bubbles/blob/master/images/screenshots/imsg1.png?raw=true\"  width=\"250\" height=\"190\" /\u003e\n\n```dart\nBubbleSpecialThree(\n  text: 'Added iMessage shape bubbles',\n  color: Color(0xFF1B97F3),\n  tail: false,\n  textStyle: TextStyle(\n      color: Colors.white,\n      fontSize: 16\n  ),\n),\nBubbleSpecialThree(\n  text: 'Please try and give some feedback on it!',\n  color: Color(0xFF1B97F3),\n  tail: true,\n  textStyle: TextStyle(\n    color: Colors.white,\n    fontSize: 16\n  ),\n),\nBubbleSpecialThree(\n  text: 'Sure',\n  color: Color(0xFFE8E8EE),\n  tail: false,\n  isSender: false,\n),\nBubbleSpecialThree(\n  text: \"I tried. It's awesome!!!\",\n  color: Color(0xFFE8E8EE),\n  tail: false,\n  isSender: false,\n),\nBubbleSpecialThree(\n  text: \"Thanks\",\n  color: Color(0xFFE8E8EE),\n  tail: true,\n  isSender: false,\n)\n```\n\n### Single bubble example\n\n\u003cimg src=\"https://github.com/prahack/chat_bubbles/blob/master/images/screenshots/single_bubble.png?raw=true\"  width=\"220\" height=\"60\" /\u003e\n\n\n```dart\n  BubbleSpecialOne(\n    text: 'Hi, How are you? ',\n    isSender: false,\n    color: Colors.purple.shade100,\n    textStyle: TextStyle(\n      fontSize: 20,\n      color: Colors.purple,\n      fontStyle: FontStyle.italic,\n      fontWeight: FontWeight.bold,\n    ),\n  ),\n```\n\n### Audio chat bubble example\n\n\u003cimg src=\"https://github.com/prahack/chat_bubbles/blob/master/images/screenshots/audio_bubble.png?raw=true\"  width=\"237\" height=\"65\" /\u003e\n\n```dart\n  Duration duration = new Duration();\n  Duration position = new Duration();\n  bool isPlaying = false;\n  bool isLoading = false;\n  bool isPause = false;\n\n  BubbleNormalAudio(\n    color: Color(0xFFE8E8EE),\n    duration: duration.inSeconds.toDouble(),\n    position: position.inSeconds.toDouble(),\n    isPlaying: isPlaying,\n    isLoading: isLoading,\n    isPause: isPause,\n    onSeekChanged: _changeSeek,\n    onPlayPauseButtonClick: _playAudio,\n    sent: true,\n  ),\n```\n\n### Image chat bubble example\n\n\u003cimg src=\"https://github.com/prahack/chat_bubbles/blob/master/images/screenshots/image_bubble.jpg?raw=true\"  width=\"206\" height=\"188\" /\u003e\n\n```dart\n  BubbleNormalImage(\n    id: 'id001',\n    image: _image(),\n    color: Colors.purpleAccent,\n    tail: true,\n    delivered: true,\n  ),\n```\n\n### Date Chip example\n\n\u003cimg src=\"https://github.com/prahack/chat_bubbles/blob/master/images/screenshots/datechip.png?raw=true\"  width=\"237\" height=\"58\" /\u003e\n\n```dart\n  DateChip(\n    date: new DateTime(2021, 5, 7),\n    color: Color(0x558AD3D5),\n  ),\n```\n\n### Message bar example\n\n\u003cimg src=\"https://github.com/prahack/chat_bubbles/blob/master/images/screenshots/messagebar.jpeg?raw=true\"  width=\"270\" height=\"45\" /\u003e\n\n```dart\nMessageBar(\n    onSend: (_) =\u003e print(_),\n    actions: [\n      InkWell(\n        child: Icon(\n          Icons.add,\n          color: Colors.black,\n          size: 24,\n        ),\n        onTap: () {},\n      ),\n      Padding(\n        padding: EdgeInsets.only(left: 8, right: 8),\n        child: InkWell(\n          child: Icon(\n            Icons.camera_alt,\n            color: Colors.green,\n            size: 24,\n          ),\n          onTap: () {},\n        ),\n      ),\n    ],\n  ),\n```\n\n### Main example (Chat View)\n\u003cimg src=\"https://github.com/prahack/chat_bubbles/blob/master/images/screenshots/2022_12_29_main1.jpg?raw=true\"  width=\"235\" height=\"460\" /\u003e \u003cimg src=\"https://github.com/prahack/chat_bubbles/blob/master/images/screenshots/2022_12_29_main2.jpg?raw=true\"  width=\"235\" height=\"460\" /\u003e\n\nCheckout the plugin example to figure out more.\n\n```dart\nDuration duration = new Duration();\nDuration position = new Duration();\nbool isPlaying = false;\nbool isLoading = false;\nbool isPause = false;\n\n@override\nWidget build(BuildContext context) {\n  final now = new DateTime.now();\n  return Scaffold(\n    appBar: AppBar(\n      title: Text(widget.title),\n    ),\n    body: Stack(\n      children: [\n        SingleChildScrollView(\n          child: Column(\n            children: \u003cWidget\u003e[\n              BubbleNormalImage(\n                  id: 'id001',\n                  image: _image(),\n                  color: Colors.purpleAccent,\n                  tail: true,\n                  delivered: true,\n              ),\n              BubbleNormalAudio(\n                color: Color(0xFFE8E8EE),\n                duration: duration.inSeconds.toDouble(),\n                position: position.inSeconds.toDouble(),\n                isPlaying: isPlaying,\n                isLoading: isLoading,\n                isPause: isPause,\n                onSeekChanged: _changeSeek,\n                onPlayPauseButtonClick: _playAudio,\n                sent: true,\n              ),\n              BubbleNormal(\n                text: 'bubble normal with tail',\n                isSender: false,\n                color: Color(0xFF1B97F3),\n                tail: true,\n                textStyle: TextStyle(\n                  fontSize: 20,\n                  color: Colors.white,\n                ),\n              ),\n              BubbleNormal(\n                text: 'bubble normal with tail',\n                isSender: true,\n                color: Color(0xFFE8E8EE),\n                tail: true,\n                sent: true,\n              ),\n              DateChip(\n                date: new DateTime(now.year, now.month, now.day - 2),\n              ),\n              BubbleNormal(\n                text: 'bubble normal without tail',\n                isSender: false,\n                color: Color(0xFF1B97F3),\n                tail: false,\n                textStyle: TextStyle(\n                  fontSize: 20,\n                  color: Colors.white,\n                ),\n              ),\n              BubbleNormal(\n                text: 'bubble normal without tail',\n                color: Color(0xFFE8E8EE),\n                tail: false,\n                sent: true,\n                seen: true,\n                delivered: true,\n              ),\n              BubbleSpecialOne(\n                text: 'bubble special one with tail',\n                isSender: false,\n                color: Color(0xFF1B97F3),\n                textStyle: TextStyle(\n                  fontSize: 20,\n                  color: Colors.white,\n                ),\n              ),\n              DateChip(\n                date: new DateTime(now.year, now.month, now.day - 1),\n              ),\n              BubbleSpecialOne(\n                text: 'bubble special one with tail',\n                color: Color(0xFFE8E8EE),\n                seen: true,\n              ),\n              BubbleSpecialOne(\n                text: 'bubble special one without tail',\n                isSender: false,\n                tail: false,\n                color: Color(0xFF1B97F3),\n                textStyle: TextStyle(\n                  fontSize: 20,\n                  color: Colors.black,\n                ),\n              ),\n              BubbleSpecialOne(\n                text: 'bubble special one without tail',\n                tail: false,\n                color: Color(0xFFE8E8EE),\n                sent: true,\n              ),\n              BubbleSpecialTwo(\n                text: 'bubble special tow with tail',\n                isSender: false,\n                color: Color(0xFF1B97F3),\n                textStyle: TextStyle(\n                  fontSize: 20,\n                  color: Colors.black,\n                ),\n              ),\n              DateChip(\n                date: now,\n              ),\n              BubbleSpecialTwo(\n                text: 'bubble special tow with tail',\n                isSender: true,\n                color: Color(0xFFE8E8EE),\n                sent: true,\n              ),\n              BubbleSpecialTwo(\n                text: 'bubble special tow without tail',\n                isSender: false,\n                tail: false,\n                color: Color(0xFF1B97F3),\n                textStyle: TextStyle(\n                  fontSize: 20,\n                  color: Colors.black,\n                ),\n              ),\n              BubbleSpecialTwo(\n                text: 'bubble special tow without tail',\n                tail: false,\n                color: Color(0xFFE8E8EE),\n                delivered: true,\n              ),\n              BubbleSpecialThree(\n                text: 'bubble special three without tail',\n                color: Color(0xFF1B97F3),\n                tail: false,\n                textStyle: TextStyle(color: Colors.white, fontSize: 16),\n              ),\n              BubbleSpecialThree(\n                text: 'bubble special three with tail',\n                color: Color(0xFF1B97F3),\n                tail: true,\n                textStyle: TextStyle(color: Colors.white, fontSize: 16),\n              ),\n              BubbleSpecialThree(\n                text: \"bubble special three without tail\",\n                color: Color(0xFFE8E8EE),\n                tail: false,\n                isSender: false,\n              ),\n              BubbleSpecialThree(\n                text: \"bubble special three with tail\",\n                color: Color(0xFFE8E8EE),\n                tail: true,\n                isSender: false,\n              ),\n              SizedBox(\n                height: 100,\n              )\n            ],\n          ),\n        ),\n        MessageBar(\n          onSend: (_) =\u003e print(_),\n          actions: [\n            InkWell(\n              child: Icon(\n                Icons.add,\n                color: Colors.black,\n                size: 24,\n              ),\n              onTap: () {},\n            ),\n            Padding(\n              padding: EdgeInsets.only(left: 8, right: 8),\n              child: InkWell(\n                child: Icon(\n                  Icons.camera_alt,\n                  color: Colors.green,\n                  size: 24,\n                ),\n                onTap: () {},\n              ),\n            ),\n          ],\n        ),\n      ],\n    ),\n    // This trailing comma makes auto-formatting nicer for build methods.\n  );\n}\n```\n\n## Issues\n\nPlease feel free to [let me know any issue](https://github.com/prahack/chat_bubbles/issues) regarding to this plugin.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprahack%2Fchat_bubbles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprahack%2Fchat_bubbles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprahack%2Fchat_bubbles/lists"}