speech bubble flutter

speech_bubble package

• documentation

SpeechBubble

A flutter widget that emulates a speech bubble.

This widget is modeled after the red Instagram notification popups.

Dart Pub: https://pub.dartlang.org/packages/speech_bubble#-installing-tab-

Depend on it

Add this to your package's pubspec.yaml file:

You can install packages from the command line:

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

Now in your Dart code, you can use:

Creates a widget that emulates a speech bubble. Could be used for a tooltip, or as a pop-up notification, etc.

• child -> Widget

The child contained by the SpeechBubble.

• nipLocation -> NipLocation

The location of the nip of the speech bubble. Use the NipLocation enum, either TOP, RIGHT, BOTTOM, or LEFT. The nip will automatically center to the side that it is assigned.

• color -> Color

The color of the body of the SpeechBubble and nip. Defaultly red.

• borderRadius -> double

The borderRadius of the SpeechBubble. The SpeechBubble is built with a circular border radius on all 4 corners.

• height -> double

The explicitly defined height of the SpeechBubble. The SpeechBubble will defaultly enclose its child.

• width -> double

The explicitly defined width of the SpeechBubble. The SpeechBubble will defaultly enclose its child.

• padding -> Widget

The padding widget between the child and the edges of the SpeechBubble.

Example Code

• speech_bubble

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Speech bubble for Flutter

vi-k/bubble

Folders and files, repository files navigation.

A Flutter widget for chat like a speech bubble in Whatsapp and others.

See sources .

If stick set to false the right offset of bubble equal to the offset from the left, not taking into account the size of the nip. This allows the bubbles to line up. If stick set to true , the far side will be stick to the edge.

• alignment

• nipWidth and nipHeight

• nipRadius

• nipOffset

• elevation

A thick shadow.

A thin shadow.

• shadowColor

Contributors 3

• CMake 14.4%

• Add Package   /   Feedback
• 📝 Articles & Reports
• User Journey Home Screen, App Icon & Name Splash Screen Onboarding Carousel Feature Discovery - Coach Marks Authentication Providers & UI Biometric & Local Authentication PIN, OTP & Password Field Feedback App Update
• ChatGPT, AI, ML & Game Development ChatGPT, LLM & Generative AI Augmented Reality (AR) & Virtual Reality (VR) Machine Learning, OCR & Computer Vision Voice Assistant, ASR, TTS & STT 3D Game Development
• Functionality Geolocation & Maps Ad Serving Analytics & Consumer Insights Health & Fitness Cryptography, Security & Permissions Localization, Internationalization & Translation
• Storage Persistent SQL Database Persistent NoSQL Database Database Adapters & Connectors Cloud Storage & Cloud Database Cache & Temporary Storage Graph Query Language
• Scanning & Printing QR Code & Bar Code Document Scanner PDF Printing
• UI, Theme & Color Design System Light Mode, Dark Mode & Themes Widget Library & UI Framework Responsive UI Neumorphic UI Glassmorphic UI Flowy & Squishy UI Dual Screen & Folding Device UI Color Picker & Utilities Server Driven UI & Widget Generation
• Networking, Sensors, Communication & APIs WiFi & Network Sensors Bluetooth, NFC, Beacon Network Connectivity Status HTTP Client & Utilities WebSocket & RPC OpenAPI & Swagger API Dio
• Social Media, Chat & Communication Chat SMS Messaging & Push Notification Live Streaming & Real-time Communication Social Media Avatar, Profile Picture & Chat Heads
• Multimedia Image Video Camera Music & Audio Picture-in-picture Carousel or Cover Flow Story View Tinder Swipe Cards Placeholder Crop Image Edit, Save & Compress Multimedia Multimedia Utilities
• Navigation, Search & Sharing Routing Deep Linking App Bar & Action Bar Drawer & Navigation Rail Menu Tab Bottom Navigation Bar Search Bar, Search APIs & Utilities Sharing & Intent
• Components Status Bar Badge, Corner Banner & Ribbon Notification & Toast Indicators: Loading, Refresh, Progress Card & Expansion Tile Dialogs WebView Header Bottom Panels & Bottomsheets Floating Action Button Table Widget Extension
• Scrollables Scrollable, ScrollView & Scrollbar List Pagination & Lazy Loading Timeline Grid Tree View
• User Input, Form & Settings Settings UI Form Stepper Checkbox & Radio Button Dropdown Spin Box Button & Progress Button Chip & Tag Switch Slider Country Picker & Country Code Picker File Picker Multimedia Picker Contact Picker Location, Place & Address Picker Generic Picker Date & Time Picker
• Text, Icons & Keyboard Icons Fonts Emoji & Rich Text Text Decoration, Effect & Animation Code Editor & Syntax Highlighter Rich Text, Markdown & HTML Editor Autoformat, Masking & Validation Autocomplete Parsing & Other Text Utilities Keyboard
• Date, Time and Calendar Stopwatch, Timer & Countdown Clock Calendar Date & Time Utilities
• Canvas, Visualization & Animation Shapes & Path Animation & Transition Background Effects, Gradients & Shaders Clipper & Decoration Plots & Visualization Drawing, Painting & Signature Touch & Gesture Layout & Overlay
• Developer Tools Developer Tools App Packaging & Publishing Storybook or Component Driven UI Development Device Preview, Screen Capture & Screenshot Linter Testing Debugging & Logging Performance & Crash Insights Python, Rust & Other Language Interface Code Generator & Serialization (JSON) Dart Extension & Enhancement
• Architecture & Infrastructure Dependency Injection & State Management Flutter Framework Hooks Backend, Web Server & Web Framework Firebase AWS
• Payment & Rewards Payment API/SDK Web3, Crypto & Blockchain Credit Card UI & Scanner Games & Rewards
• File Formats JSON XML, YAML & Interchange Formats CSV, Excel, ODS & Sheets Markdown HTML, CSS & SASS EPUB JavaScript Compressed Files MS Word, ODT, DOC Latex Presentation, Slides, Keynote & PPT
• Platform Specific Tools & Utilities Command Line (CLI) or Console Desktop (Windows, Linux & macOS) Flutter Web Android/iOS Device Software & Hardware TV, Watch & Cars IoT, Special Hardware & Chips
• Helpers and Utilities Device Utilities Package Utilities Geolocation Utilities Math Utilities File, Folder & Path Utilities
• Ecosystem Flutter Community

Flutter Gems is a curated list of 6000+ useful Dart & Flutter packages that are categorized based on functionality.

Discord Medium LinkedIn Twitter

SUPPORTED BY 🚨

API Dash is a beautiful open source cross-platform API client powered by Flutter which can help you easily create API requests, visually inspect responses and generate API integration code. Click here to check it out!

by yet-another.dev

About bubble package

A Flutter widget for chat like a speech bubble in Whatsapp and others.

Open Source Flutter Apps & Projects that use bubble package

Openpeerchat-flutter.

Sending/relaying messages to nearby devices until the destination is reached, instead of relying on a central server.

Click here to submit an open source Flutter app or project that uses this package.

Any issues in this page? Report here .

Last updated: November 15, 2024