bubble_popup_window 0.0.2 copy "bubble_popup_window: ^0.0.2" to clipboard
bubble_popup_window: ^0.0.2 copied to clipboard

A Flutter Bubble popup library, providing floating popup components with arrow indicators.

example/lib/main.dart

import 'package:bubble_popup_window/bubble_popup_window.dart';
import 'package:example/pages/complex_example.dart';
import 'package:flutter/material.dart';
import 'package:example/pages/basic_example.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bubble PopupWindow Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Bubble PopupWindow Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(
                  builder: (BuildContext context) {
                    return const BasicExample();
                  },
                ));
              },
              child: const Text("Basic Example"),
            ),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(
                  builder: (BuildContext context) {
                    return const ComplexExample();
                  },
                ));
              },
              child: const Text("Complex Example"),
            ),
            const SizedBox(
              height: 20,
            ),
            Builder(builder: (anchorContext) {
              return ElevatedButton(
                onPressed: () {
                  BubblePopupWindow.show(
                    //锚点上下文
                    anchorContext: anchorContext,
                    //弹窗布局,用户自定义
                    child: const Text(
                      '这是一个气泡弹窗',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 14,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                    //弹窗方向
                    direction: BubbleDirection.bottomCenter,
                    //弹窗颜色
                    color: Colors.red,
                    //弹窗圆角半径
                    radius: BorderRadius.circular(8),
                    //弹窗内边距
                    padding: const EdgeInsets.all(16),
                    //弹窗距离锚点间距
                    gap: 4.0,
                    //弹窗距离屏幕边缘最小间距
                    miniEdgeMargin: const EdgeInsets.only(left: 10, right: 10),
                    //遮罩层颜色
                    maskColor: null,
                    //点击弹窗外部时是否自动关闭弹窗
                    dismissOnTouchOutside: true,
                    //是否显示箭头
                    showArrow: true,
                    //箭头宽度
                    arrowWidth: 12.0,
                    //箭头高度
                    arrowHeight: 6.0,
                  );
                },
                child: const Text("ToolTip"),
              );
            })
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
4
likes
0
points
140
downloads

Publisher

unverified uploader

Weekly Downloads

A Flutter Bubble popup library, providing floating popup components with arrow indicators.

Repository (GitHub)
View/report issues

Topics

#popup #bubble #flutter

License

unknown (license)

Dependencies

flutter

More

Packages that depend on bubble_popup_window