flutter 弹框封装【组件】

最新推荐文章于 2024-08-16 15:30:00 发布

flutter大佬(接私活)

最新推荐文章于 2024-08-16 15:30:00 发布

阅读量138

点赞数 1

分类专栏： flutter 文章标签： flutter javascript 开发语言

本文链接：https://blog.csdn.net/m0_62359005/article/details/134315564

版权

flutter 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

提示框自定义组件，不懂的私信问我哦~

import 'package:flutter/material.dart';

class AutoDismissAlertDialog extends StatefulWidget {
  final String message;
  final Duration duration;

  const AutoDismissAlertDialog({
    required this.message,
    this.duration = const Duration(seconds: 2),
  });

  @override
  _AutoDismissAlertDialogState createState() => _AutoDismissAlertDialogState();
}

class _AutoDismissAlertDialogState extends State<AutoDismissAlertDialog>
    with TickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    _animation = CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut,
    );
    _showDialog();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void _showDialog() {
    _animationController.forward();
    Future.delayed(widget.duration, _dismissDialog);
  }

  void _dismissDialog() {
    _animationController.reverse().then((_) {
      Navigator.of(context).pop();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Stack(
        children: [
          GestureDetector(
            onTap: null,
            child: Container(
              color: Colors.transparent,
            ),
          ),
          Center(
            child: ScaleTransition(
              scale: _animation,
              child: Container(
                width: 280,
                height: 46,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: Color(0xFF000000).withOpacity(0.7),
                  borderRadius: BorderRadius.circular(4.0),
                ),
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 12),
                  alignment: Alignment.center,
                  child: Center(
                    child:
                        Text(widget.message, style: CustomTextStyle.text14_6),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

用法：

 showDialog(
                                  context: context,
                                  builder: (context) {
                                    return AutoDismissAlertDialog(
                                      message: user.msginfo,
                                      duration: Duration(seconds: 1),
                                    );
                                  },
                                );

弹框，弹出秒数自定义，页面中间灰色弹出框