Flutter自定義彈窗Dialog效果
本文實(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è)置會(huì)默認(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) {
? ? ? //延時(shí)關(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組件庫(kù)的,如果覺(jué)得有不合理的尺寸約束,可替換我修改過(guò)的Dialog組件,有其他需求也可在此定制,為什么不直接放棄使用此組件?主要涉及到其路由跳轉(zhuǎn)中的一些動(dòng)畫布局之類的。
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,
? ? ? ? ? ),
? ? ? ? ),
? ? ? ),
? ? );
? }
}以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android Studio3.6.3 當(dāng)前最新版本數(shù)據(jù)庫(kù)查找與導(dǎo)出方法(圖文詳解)
這篇文章主要介紹了Android Studio3.6.3 當(dāng)前最新版本數(shù)據(jù)庫(kù)查找與導(dǎo)出方法,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
Android模糊處理簡(jiǎn)單實(shí)現(xiàn)毛玻璃效果
這篇文章主要介紹了Android模糊處理簡(jiǎn)單實(shí)現(xiàn)毛玻璃效果的相關(guān)資料,需要的朋友可以參考下2016-02-02
Android使用ScrollView實(shí)現(xiàn)滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Android使用ScrollView實(shí)現(xiàn)滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01
Android自定義布局實(shí)現(xiàn)仿qq側(cè)滑部分代碼
這篇文章主要為大家詳細(xì)介紹了自定義布局實(shí)現(xiàn)仿qq側(cè)滑Android部分代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03

