Flutter弹出窗口插件flutter_popup的使用

flutter_popup简介

flutter_popup包是Flutter应用程序中显示简单且可自定义弹出窗口的便捷工具。它提供了一个高亮功能，可以引导用户的注意力到特定区域。

开始使用

在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_popup: ^3.3.4

然后导入包：

import 'package:flutter_popup/flutter_popup.dart';

使用方法

基本用法

以下是一个简单的例子，展示了如何使用CustomPopup来创建一个带有文本内容和图标子组件的弹出窗口。

CustomPopup(
  content: Text('George says everything looks fine'),
  child: Icon(Icons.help),
),

自定义样式

你还可以通过传递不同的参数来自定义弹出窗口的外观，例如箭头颜色、遮罩颜色、背景颜色等。

CustomPopup(
  arrowColor: Colors.orange,
  barrierColor: Colors.green.withOpacity(0.1),
  backgroundColor: Colors.white,
  content: Text('George says everything looks fine'),
  child: Icon(Icons.help),
),

复杂内容

你也可以将更复杂的小部件放入弹出窗口中，比如滑块或菜单列表。

CustomPopup(
  content: _Slider(),
  child:Text('slider'),
)

CustomPopup(
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: List.generate(5, (index) => Text('menu$index')),
  ),
  child: const Icon(Icons.add_circle_outline),
)

高级布局

对于更复杂的布局需求，你可以嵌套多个CustomPopup小部件，并调整其属性以适应你的设计要求。

Container(
  decoration: BoxDecoration(color: Colors.white),
  padding: EdgeInsets.symmetric(vertical: 10),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      CustomPopup(
        showArrow: false,
        contentPadding:EdgeInsets.symmetric(horizontal: 30, vertical: 10),
        barrierColor: Colors.transparent,
        contentDecoration: BoxDecoration(
          color: Colors.white,
        ),
        content: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: List.generate(4,(index) => Text('item$index'),),),
        ),
        child: Text('filter1'),
      ),
      Text('filter2'),
      Text('filter3'),
    ],
  ),
)

完整示例Demo

下面是一个完整的Dart代码示例，演示了如何在一个Flutter应用中集成并使用flutter_popup插件。

import 'package:flutter/material.dart';
import 'package:flutter_popup/flutter_popup.dart';

void main() => runApp(const MyApp());

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

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Scaffold(
        backgroundColor: Color(0xFFFAFAFA),
        appBar: AppBar(
          title: const Text('example'),
          actions: [
            // example0 menu
            Padding(
              padding: const EdgeInsets.only(right: 30),
              child: CustomPopup(
                content: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: List.generate(5, (index) => Text('menu$index')),
                ),
                child: const Icon(Icons.add_circle_outline),
              ),
            ),
          ],
        ),
        body: Column(
          children: [
            // example1 text
            CustomPopup(
              barrierColor: Colors.green.withOpacity(0.1),
              backgroundColor: Colors.white,
              content: Text('George says everything looks fine'),
              child: Icon(Icons.help, color: Colors.grey),
            ),
            SizedBox(height: 20),

            // example2 slider
            CustomPopup(
              arrowColor: Colors.orange,
              content: _Slider(),
              child: Container(
                padding: const EdgeInsets.all(10),
                color: Colors.primaries[10],
                child: Text('slider'),
              ),
            ),
            SizedBox(height: 20),

            // example3 calendar
            CustomPopup(
              showArrow: false,
              content: SizedBox(
                width: 300,
                child: CalendarDatePicker(
                  initialDate: DateTime.now(),
                  firstDate: DateTime.now(),
                  lastDate: DateTime.now(),
                  onDateChanged: (v) {},
                ),
              ),
              child: Container(
                padding: const EdgeInsets.all(10),
                color: Colors.primaries[10],
                child: Text('calendar'),
              ),
            ),

            SizedBox(height: 20),

            // example4 filter
            Container(
              decoration: BoxDecoration(color: Colors.white),
              padding: EdgeInsets.symmetric(vertical: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  CustomPopup(
                    showArrow: false,
                    contentPadding:
                        EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                    barrierColor: Colors.transparent,
                    contentDecoration: BoxDecoration(
                      color: Colors.white,
                    ),
                    content: SizedBox(
                      width: double.infinity,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: List.generate(
                          4,
                          (index) => Text('item$index'),
                        ),
                      ),
                    ),
                    child: Text('filter1'),
                  ),
                  Text('filter2'),
                  Text('filter3'),
                ],
              ),
            ),
            SizedBox(height: 20),
            Text('data' * 100, maxLines: 20),
          ],
        ),
      ),
    );
  }
}

class _Slider extends StatefulWidget {
  const _Slider();

  @override
  State<_Slider> createState() => __SliderState();
}

class __SliderState extends State<_Slider> {
  double progress = 0.5;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      height: 100,
      child: Slider(
        value: progress,
        onChanged: (value) {
          setState(() => progress = value);
        },
      ),
    );
  }
}

以上就是关于flutter_popup插件的基本介绍及使用方法，希望对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时联系我：QQ:965471570, Gmail:herowws90@gmail.com。