Flutter自定义对话框插件override_dialog的使用

Flutter 自定义对话框插件 override_dialog 的使用

overlay_dialog

overlay_dialog 是一个可以操作背景数据的对话框。

Getting Started

它在网页上也能工作，但主要关注于iOS和Android移动设备。

示例版本 0.1.2~

示例版本 0.1.5~

示例版本 0.2.1~

示例代码

以下是一个完整的示例代码，展示了如何使用 override_dialog 插件来创建和显示自定义对话框。

import 'package:flutter/material.dart';
import 'package:override_dialog_example/circular_progress.dart';
import 'package:override_dialog_example/dialog_my_app.dart';
import 'package:override_dialog_example/drag_drop_my_app.dart';
import 'package:override_dialog_example/draggable_dialog_app.dart';
import 'package:override_dialog_example/drawer_my_app.dart';
import 'package:override_dialog_example/front_and_my_app.dart';
import 'package:override_dialog_example/list_my_app.dart';
import 'package:override_dialog_example/picker_my_app.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 显示对话框的方法
  void _showDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('自定义对话框'),
          content: Text('这是一个自定义对话框的内容。'),
          actions: <Widget>[
            TextButton(
              child: Text('取消'),
              onPressed: () {
                Navigator.of(context).pop(); // 关闭对话框
              },
            ),
            TextButton(
              child: Text('确定'),
              onPressed: () {
                Navigator.of(context).pop(); // 关闭对话框
              },
            ),
          ],
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          leadingWidth: MediaQuery.of(context).size.width,
          leading: Builder(
            builder: (BuildContext context) {
              return SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    Row(
                      children: [
                        _iconWidget(const DrawerMyApp(), context),
                        _iconWidget(const DragDropMyApp(), context),
                        _iconWidget(const FrontAndBackMyApp(), context),
                        _iconWidget(const DialogMyApp(), context),
                        _iconWidget(const CircleProgress(), context),
                        _iconWidget(const PickerMyApp(), context),
                        _iconWidget(const DraggableDialogApp(), context),
                      ],
                    ),
                  ],
                ),
              );
            },
          ),
        ),
        body: Center(
          child: ListMyApp(
            bottom: MediaQuery.of(context).viewInsets.bottom,
          ),
        ),
      ),
    );
  }

  // 创建一个带有图标的按钮
  Widget _iconWidget(Widget w, BuildContext context) {
    return IconButton(
      icon: const Icon(Icons.add),
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (BuildContext context) {
              return w;
            },
          ),
        );
      },
    );
  }
}