Flutter自定義彈窗Dialog效果

更新時間：2022年03月23日 15:09:29 作者：antu58

這篇文章主要為大家詳細(xì)介紹了Flutter自定義彈窗Dialog效果，含底部抽屜，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Flutter自定義彈窗Dialog效果的具體代碼，供大家參考，具體內(nèi)容如下

主要是基于系統(tǒng)的dialog機(jī)制做一些使用限制和自定義UI的優(yōu)化

核心代碼：

class CustomDialog {
?
? static void show(BuildContext context, Widget Function(BuildContext ctx, void Function() dismiss)builder, {bool cancellable = false}) {
? ? showDialog(
? ? ? context: context,
? ? ? barrierDismissible: cancellable,
? ? ? builder: (ctx) {
? ? ? ? return WillPopScope(
? ? ? ? ? child: Dialog(
? ? ? ? ? ? child: builder(ctx, () => Navigator.of(ctx).pop()),
? ? ? ? ? ? backgroundColor: Colors.transparent,
? ? ? ? ? ? shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(0.0))),
? ? ? ? ? ? elevation: 0,
? ? ? ? ? ? alignment: Alignment.center,
? ? ? ? ? ),
? ? ? ? ? onWillPop: () async => cancellable,
? ? ? ? );
? ? ? },
? ? );
? }
?
?
? static void showBottomSheet(BuildContext context, Widget Function(BuildContext ctx, void Function() dismiss)builder, {bool cancellable = true}) {
?
? ? showModalBottomSheet(
? ? ? context: context,
? ? ? isDismissible: cancellable,
? ? ? enableDrag: cancellable,
? ? ? isScrollControlled: true,
? ? ? builder: (BuildContext ctx) {
? ? ? ? return WillPopScope(
? ? ? ? ? child: builder(ctx, () => Navigator.of(ctx).pop()),
? ? ? ? ? onWillPop: () async => cancellable,
? ? ? ? );
? ? ? },
? ? ? //不設(shè)置會默認(rèn)使用屏幕最大寬度而不是子組件寬度
? ? ? constraints: const BoxConstraints(minWidth: 0, minHeight: 0, maxWidth: double.infinity, maxHeight: double.infinity),
? ? ? backgroundColor: Colors.transparent,
? ? );
? }
}

使用：

import 'dart:async';
import 'package:flutter/material.dart';
?
class DialogTestPage extends StatefulWidget {
? const DialogTestPage({Key? key}) : super(key: key);
?
? @override
? State<StatefulWidget> createState() => _DialogTestState();
}
?
class _DialogTestState extends State<DialogTestPage> {
? @override
? Widget build(BuildContext context) {
?
? ? return Scaffold(
? ? ? body: Column(children: [
? ? ? ? const SizedBox(height: 0, width: double.infinity,),
? ? ? ? TextButton(
? ? ? ? ? child: const Text("show dialog"),
? ? ? ? ? onPressed: () => showCustomDialog(),
? ? ? ? ),
? ? ? ? TextButton(
? ? ? ? ? child: const Text("show delay dialog"),
? ? ? ? ? onPressed: () => showDelayDialog(),
? ? ? ? ),
? ? ? ? TextButton(
? ? ? ? ? child: const Text("show sheet"),
? ? ? ? ? onPressed: () => showSheetDialog(),
? ? ? ? ),
? ? ? ], mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.center,),
? ? );
? }
?
?
? void showCustomDialog() {
? ? CustomDialog.show(context, (context, dismiss) {
? ? ? return Container(
? ? ? ? width: 200,
? ? ? ? height: 100,
? ? ? ? color: Colors.white,
? ? ? ? child: Center(child: TextButton(onPressed: () => dismiss(), child: const Text("POP")),),
? ? ? );
? ? });
? }
?
? void showSheetDialog() {
? ? CustomDialog.showBottomSheet(context, (ctx, dismiss) {
? ? ? return Container(
? ? ? ? height: 300,
? ? ? ? color: Colors.white,
? ? ? ? child: Center(child: TextButton(onPressed: () => dismiss(), child: const Text("POP")),),
? ? ? ? margin: const EdgeInsets.all(20),
? ? ? );
? ? });
? }
?
? void showDelayDialog() {
? ? CustomDialog.show(context, (context, dismiss) {
? ? ? //延時關(guān)閉
? ? ? Timer(const Duration(seconds: 2), () => dismiss());
?
? ? ? return Container(
? ? ? ? width: 200,
? ? ? ? height: 100,
? ? ? ? color: Colors.yellow,
? ? ? ? child: const Center(child: Text("等待"),),
? ? ? );
? ? }, cancellable: true);
? }
}

其中show方法中使用到的Dialog默認(rèn)使用material組件庫的，如果覺得有不合理的尺寸約束，可替換我修改過的Dialog組件，有其他需求也可在此定制，為什么不直接放棄使用此組件？主要涉及到其路由跳轉(zhuǎn)中的一些動畫布局之類的。

class Dialog extends StatelessWidget {
?
? const Dialog({
? ? Key? key,
? ? this.backgroundColor,
? ? this.elevation,
? ? this.insetAnimationDuration = const Duration(milliseconds: 100),
? ? this.insetAnimationCurve = Curves.decelerate,
? ? this.insetPadding = const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),
? ? this.clipBehavior = Clip.none,
? ? this.shape,
? ? this.alignment,
? ? this.child,
? }) : super(key: key);
?
?
? final Color? backgroundColor;
? final double? elevation;
? final Duration insetAnimationDuration;
? final Curve insetAnimationCurve;
? final EdgeInsets? insetPadding;
? final Clip clipBehavior;
? final ShapeBorder? shape;
? final AlignmentGeometry? alignment;
? final Widget? child;
?
? static const RoundedRectangleBorder _defaultDialogShape =
? RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4.0)));
? static const double _defaultElevation = 24.0;
?
? @override
? Widget build(BuildContext context) {
? ? final DialogTheme dialogTheme = DialogTheme.of(context);
? ? final EdgeInsets effectivePadding = MediaQuery.of(context).viewInsets + (insetPadding ?? EdgeInsets.zero);
? ? return AnimatedPadding(
? ? ? padding: effectivePadding,
? ? ? duration: insetAnimationDuration,
? ? ? curve: insetAnimationCurve,
? ? ? child: MediaQuery.removeViewInsets(
? ? ? ? removeLeft: true,
? ? ? ? removeTop: true,
? ? ? ? removeRight: true,
? ? ? ? removeBottom: true,
? ? ? ? context: context,
? ? ? ? child: Align(
? ? ? ? ? alignment: alignment ?? dialogTheme.alignment ?? Alignment.center,
? ? ? ? ? child: Material(
? ? ? ? ? ? color: backgroundColor ?? dialogTheme.backgroundColor ?? Theme.of(context).dialogBackgroundColor,
? ? ? ? ? ? elevation: elevation ?? dialogTheme.elevation ?? _defaultElevation,
? ? ? ? ? ? shape: shape ?? dialogTheme.shape ?? _defaultDialogShape,
? ? ? ? ? ? type: MaterialType.card,
? ? ? ? ? ? clipBehavior: clipBehavior,
? ? ? ? ? ? child: child,
? ? ? ? ? ),
? ? ? ? ),
? ? ? ),
? ? );
? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: