bubble 0.1.4 bubble: ^0.1.4 copied to clipboard
A Flutter widget for chat like a speech bubble in Whatsapp and others.
import 'package:flutter/material.dart';
import 'package:bubble/bubble.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const TITLE = 'Bubble Demo';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: TITLE,
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
static const Color COLOR_LEFT = Colors.white;
static const Color COLOR_RIGHT = Color.fromARGB(255, 225, 255, 199);
static const Color COLOR_CAPTION = Color.fromARGB(255, 212, 234, 244);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(MyApp.TITLE),
),
body: Container(
width: double.infinity,
color: Colors.yellow.withAlpha(64),
child: ListView(
padding: EdgeInsets.all(8),
children: [
Container(
alignment: Alignment.topCenter,
child: Bubble(
source: BubbleSource.NO_SOURCE,
color: COLOR_CAPTION,
child: Text('TODAY', style: TextStyle(fontSize: 10)),
),
),
Container(
alignment: Alignment.topLeft,
child: Bubble(
source: BubbleSource.TOP_LEFT,
color: COLOR_LEFT,
child: Text('Hi Jason. Sorry to bother you. I have a queston for you.'),
),
),
Container(
alignment: Alignment.topRight,
child: Bubble(
source: BubbleSource.TOP_RIGHT,
color: COLOR_RIGHT,
child: Text('OK, whats\'up?'),
),
),
Container(
alignment: Alignment.topLeft,
child: Bubble(
source: BubbleSource.TOP_LEFT,
color: COLOR_LEFT,
child: Text('I\'ve been having a problem with my computer.'),
),
),
Container(
alignment: Alignment.topLeft,
child: Bubble(
source: BubbleSource.TOP_LEFT,
color: COLOR_LEFT,
margin: EdgeInsets.only(top: 2),
showNip: false,
child: Text('Can you help me?'),
),
),
Container(
alignment: Alignment.topRight,
child: Bubble(
source: BubbleSource.TOP_RIGHT,
color: COLOR_RIGHT,
child: Text('What\'s the problem?'),
),
),
Divider(),
Bubble(
source: BubbleSource.TOP_LEFT,
elevation: 1,
child: Text('Test 1'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 6,
nipWidth: 8,
nipHeight: 10,
nipRadius: 1,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: const EdgeInsets.only(top: 8),
child: Text('Test 2'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 8,
nipWidth: 16,
nipHeight: 8,
nipRadius: 0,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 3r0'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 8,
nipWidth: 16,
nipHeight: 8,
nipRadius: 1,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 3r1'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 8,
nipWidth: 16,
nipHeight: 8,
nipRadius: 2,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 3r2'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 8,
nipWidth: 16,
nipHeight: 8,
nipRadius: 3,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 3r3'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 8,
nipWidth: 16,
nipHeight: 8,
nipRadius: 4,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 3r4'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 0,
nipOffset: 28,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 4r0'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 1,
nipOffset: 8,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 4r1'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 2,
nipOffset: 8,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 4r2'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 3,
nipOffset: 8,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 4r3'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 4,
nipOffset: 8,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 4r4'),
),
Bubble(
source: BubbleSource.NO_SOURCE,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 1,
nipOffset: 8,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 5'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 1,
nipOffset: 8,
showNip: false,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 6'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 1,
nipWidth: 8,
nipHeight: 16,
nipRadius: 1,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 7'),
),
Bubble(
source: BubbleSource.TOP_LEFT,
radius: 1,
nipWidth: 32,
nipHeight: 8,
nipRadius: 0,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, right: 50),
child: Text('Test 8'),
),
Divider(),
Bubble(
source: BubbleSource.TOP_RIGHT,
elevation: 1,
child: Text('Test 1'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 6,
nipWidth: 8,
nipHeight: 10,
nipRadius: 1,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: const EdgeInsets.only(top: 8),
child: Text('Test 2'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 8,
nipWidth: 16,
nipHeight: 8,
nipRadius: 0,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 3r0'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 8,
nipWidth: 16,
nipHeight: 8,
nipRadius: 1,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 3r1'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 8,
nipWidth: 16,
nipHeight: 8,
nipRadius: 2,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 3r2'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 8,
nipWidth: 16,
nipHeight: 8,
nipRadius: 3,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 3r3'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 8,
nipWidth: 16,
nipHeight: 8,
nipRadius: 4,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 3r4'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 0,
nipOffset: 8,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 4r0'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 1,
nipOffset: 8,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 4r1'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 2,
nipOffset: 8,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 4r2'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 3,
nipOffset: 8,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 4r3'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 4,
nipOffset: 8,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 4r4'),
),
Bubble(
source: BubbleSource.NO_SOURCE,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 1,
nipOffset: 8,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 5'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 16,
nipWidth: 16,
nipHeight: 8,
nipRadius: 1,
nipOffset: 8,
showNip: false,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 6'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 1,
nipWidth: 8,
nipHeight: 16,
nipRadius: 1,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 7'),
),
Bubble(
source: BubbleSource.TOP_RIGHT,
radius: 1,
nipWidth: 32,
nipHeight: 8,
nipRadius: 0,
nipOffset: 0,
showNip: true,
color: Colors.white,
elevation: 1,
shadowColor: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
margin: EdgeInsets.only(top: 8, left: 50),
child: Text('Test 8'),
),
],
),
),
);
}
}