bubble 1.3.0
bubble: ^1.3.0 copied to clipboard
A Flutter widget for chat like a speech bubble in Whatsapp and others.
import 'package:bubble/bubble.dart';
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const title = 'Bubble Demo';
@override
Widget build(BuildContext context) => MaterialApp(
title: title,
theme: ThemeData(
primarySwatch: Colors.teal,
// Material 3 paints the app bar with the surface colour, not the
// primary one; this keeps it teal, as on the README screenshots.
appBarTheme: const AppBarTheme(
backgroundColor: Colors.teal,
foregroundColor: Colors.white,
),
),
home: const MyHomePage(
title: title,
),
);
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
super.key,
required this.title,
});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
static const styleSomebody = BubbleStyle(
nip: BubbleNip.leftCenter,
color: Colors.white,
borderColor: Colors.blue,
borderWidth: 1,
elevation: 4,
margin: BubbleEdges.only(top: 8, right: 50),
alignment: Alignment.topLeft,
);
static const styleMe = BubbleStyle(
nip: BubbleNip.rightCenter,
color: Color.fromARGB(255, 225, 255, 199),
borderColor: Colors.blue,
borderWidth: 1,
elevation: 4,
margin: BubbleEdges.only(top: 8, left: 50),
alignment: Alignment.topRight,
);
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ColoredBox(
color: Colors.yellow.withAlpha(64),
child: ListView(
padding: const EdgeInsets.all(8),
children: [
Bubble(
alignment: Alignment.center,
color: const Color.fromARGB(255, 212, 234, 244),
borderColor: Colors.black,
borderWidth: 2,
margin: const BubbleEdges.only(top: 8),
child: const Text(
'TODAY',
style: TextStyle(fontSize: 10),
),
),
Bubble(
style: styleSomebody,
child: const Text(
'Hi Jason. Sorry to bother you. I have a question for you.',
),
),
Bubble(
style: styleMe,
child: const Text("Whats'up?"),
),
Bubble(
style: styleSomebody,
child:
const Text("I've been having a problem with my computer."),
),
Bubble(
style: styleSomebody,
margin: const BubbleEdges.only(top: 4),
showNip: false,
child: const Text('Can you help me?'),
),
Bubble(
style: styleMe,
child: const Text('Ok'),
),
Bubble(
style: styleMe,
showNip: false,
margin: const BubbleEdges.only(top: 4),
child: const Text("What's the problem?"),
),
],
),
),
);
}