Flutter弹窗管理插件on_popup_window_widget的使用

OnPopupWindowWidget是一个强大的Flutter弹窗插件，能够满足你在对话框中的各种需求。以下是关于如何使用该插件的详细指南和示例代码。

特性

• 支持Material 3设计规范
• 响应式布局
• 使用简便，无需额外支持

开始使用

安装步骤

1. 在你的pubspec.yaml文件中添加on_popup_window_widget依赖：

   dependencies:
     flutter:
       sdk: flutter
     on_popup_window_widget: ^latest_version
   

2. 运行flutter pub get来安装依赖。

示例代码

基本用法

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('On Popup Window Widget Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) => OnPopupWindowWidget(
                  title: const Text("This is the title"),
                  footer: const Text("This is the footer"),
                  child: const Text("This is the child"),
                ),
              );
            },
            child: Text('Show Dialog'),
          ),
        ),
      ),
    );
  }
}

添加关闭按钮

showDialog(
  context: context,
  builder: (context) => OnPopupWindowWidget(
    title: const Text("This is the title"),
    footer: const Text("This is the footer"),
    child: const Text("This is the child"),
    overlapChildren: const [
      Positioned(
        right: -10,
        top: -10,
        child: Container(
          width: 50,
          height: 50,
          color: Colors.blue,
          child: Icon(Icons.cancel, color: Colors.white),
        ),
      ),
    ],
  ),
);

使用Widget模式

OnPopupWindowWidget.widgetMode(
  title: const Text("This is the title"),
  footer: const Text("This is the footer"),
  child: const Text("This is the child"),
)

完整示例Demo

以下是一个更完整的示例，展示了如何在应用中使用OnPopupWindowWidget的各种功能：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(title: Text('On Popup Window Widget Demo')),
        body: MainWidget(),
      ),
    );
  }
}

class MainWidget extends StatelessWidget {
  final List<String> languages = [
    "Bangle", "English", "Spanish", "French", "German",
    "Chinese", "Hindi", "Arabic", "Russian", "Portuguese",
    "Japanese", "Italian"
  ];

  List<Widget> generateLanguageButtons(BuildContext context) {
    return languages.map((lang) => Padding(
      padding: const EdgeInsets.symmetric(vertical: 4),
      child: ElevatedButton(
        onPressed: () {},
        child: Text(lang),
      ),
    )).toList();
  }

  Future<void> showCustomDialog(BuildContext context, int indent) async {
    await showDialog(
      context: context,
      builder: (context) => OnPopupWindowWidget(
        biggerMaxSize: 1000,
        indent: indent,
        title: const Text("Please select your Language"),
        footer: Container(
          color: Colors.red,
          child: Column(
            children: [
              ElevatedButton(
                onPressed: () async {
                  await showCustomDialog(context, indent + 1);
                },
                child: const Text("Okay Okay Okay"),
              ),
              TextFormField(),
            ],
          ),
        ),
        overlapChildren: [
          Positioned(
            right: -10,
            top: -10,
            child: IconButton(
              icon: Icon(Icons.cancel, color: Colors.white),
              onPressed: () {
                if (kDebugMode) print("Tap Tap");
              },
            ),
          ),
        ],
        child: Container(
          child: Column(children: generateLanguageButtons(context)),
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ElevatedButton(
            onPressed: () => showDialog(
              context: context,
              builder: (context) => OnPopupWindowWidget(
                biggerMaxSize: 1000,
                title: const Text("Please select your Language"),
                footer: const ElevatedButton(
                  onPressed: null,
                  child: Text("Okay"),
                ),
                child: Column(
                  children: [
                    Container(height: 100, color: Colors.amber),
                    TextFormField(),
                  ],
                ),
              ),
            ),
            child: const Text("Press here"),
          ),
          ElevatedButton(
            onPressed: () async {
              await showCustomDialog(context, 1);
            },
            child: const Text("Overlay Widget"),
          ),
          Center(
            child: OnPopupWindowWidget.widgetMode(
              title: const Text("Please select your Language"),
              footer: const ElevatedButton(
                onPressed: null,
                child: Text("Okay"),
              ),
              overlapChildren: [
                Positioned(
                  right: -10,
                  top: -10,
                  child: IconButton(
                    icon: Icon(Icons.cancel, color: Colors.white),
                    onPressed: () => print("________________________________________"),
                  ),
                ),
              ],
              child: Column(children: generateLanguageButtons(context)),
            ),
          ),
        ],
      ),
    );
  }
}