bubble 1.3.0 copy "bubble: ^1.3.0" to clipboard
bubble: ^1.3.0 copied to clipboard

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

example/lib/main.dart

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?"),
              ),
            ],
          ),
        ),
      );
}
604
likes
160
points
18.8k
downloads
screenshot

Documentation

API reference

Publisher

verified publisheryet-another.dev

Weekly Downloads

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

Repository (GitHub)
View/report issues

Topics

#chat #bubble #widget

License

BSD-2-Clause (license)

Dependencies

flutter

More

Packages that depend on bubble