- Notifications
You must be signed in to change notification settings - Fork4
A custom flutter widget for tooltips and popups within your flutter app based off of the red instagram notification popups.
License
rodineijf/PHSpeechBubble
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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:
speech_bubble: ^0.0.5Install it
You can install packages from the command line:
$ flutter packages getAlternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.
Import it
Now in your Dart code, you can use:
import 'package:speech_bubble/speech_bubble.dart';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.
import'package:flutter/material.dart';import'package:speech_bubble/speech_bubble.dart';voidmain()=>runApp(newMyApp());classMyAppextendsStatefulWidget {@override_MyAppStatecreateState()=>new_MyAppState();}class_MyAppStateextendsState<MyApp> {@overrideWidgetbuild(BuildContext context) {returnnewMaterialApp( home:newScaffold( appBar:newAppBar( title:constText('Plugin example app'), ), body:newCenter( child:newSpeechBubble( nipLocation:NipLocation.BOTTOM,// child: Column(// mainAxisSize: MainAxisSize.min,// children: <Widget>[// Text("Give your users some guided instruction"),// Text("From the inside of a Speech Bubble")// ],// ), child:Row( mainAxisSize:MainAxisSize.min, children:<Widget>[Icon(Icons.favorite, color:Colors.white, ),Padding( padding:constEdgeInsets.all(4.0), ),Text("1", style:TextStyle( color:Colors.white, fontSize:18.0, ), ), ], ), ), ), ), ); }}