flutter 自定义弹框

自定义弹框
	在Material组件中定义内容,这样能实现弹框出现屏幕透明的效果
		
	1、定义组件类来继承Dialog,添加build方法，return 自定义内容
	2、通过 showDialog方法调用弹出框
	
	    showDialog( 
	      context: context,
	      builder: (context){
	        return 类组件名();
	      }
	    ).then((value){
	     	参数为Navigator.pop(context,参数)传递的参数
	    });
	    
	3、关闭弹框并传递参数
	
		回调函数中设置
			Navigator.pop(context,参数)传递的参数;

代码示例:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:myflutter/page/me.dart';


class Home4 extends StatefulWidget {
  Home4({Key key}) : super(key: key);

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

class _Home2State extends State<Home4> {

  @override
  void initState() { 
    super.initState();
  }

//回调触发弹框
  show()
  {
    //Future类型,then或者await获取
    showDialog( 
      context: context,
      builder: (context){
        return Log();
      }
    ).then((value){
      print("$value");
    });
  }


  @override
  Widget build(BuildContext context) {
    return Container(
       child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
         children: <Widget>[
           
          RaisedButton(
            child: Text('自定义弹出框'),
            color: Theme.of(context).accentColor,
            onPressed: (){
              show();
            },
          ),


       ]),
    );
  }
}

class Log extends Dialog{

  timer(context)
  {
    var time=Timer.periodic(
      Duration(milliseconds: 1500),
      (t){
        print('执行');
        Navigator.pop(context);
        t.cancel();
      }
    );
  }

  @override
  Widget build(BuildContext context) {

     timer(context);
	
	//自定义弹框内容
    return Material(
      
      type:MaterialType.transparency,
      child: Center(
        
        child:Container(
          height: 300,
          width: 300,
          color: Colors.white,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(20),
                child: Stack(
                  children: <Widget>[
                    Align(
                      child: Text('提示'),
                      alignment:Alignment.center,
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: InkWell(
                        child: Icon(Icons.confirmation_number),
                        onTap: (){
                          Navigator.pop(context,'guanbi');
                        },
                      ),
                    ),
                    
                  ],
                )
              ),
              Divider(),
              Container(
                padding: EdgeInsets.all(10),
                width: double.infinity,
                child: Text('啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈哈哈哈哈哈',textAlign: TextAlign.left,),
              )
            ],
          ),
       )
      ),
    );
  }
}

// 因为表单组件需要改变状态,所以要使用有状态组件

/*

轮播图必须外包一层有高度的父容器或者使用子元素宽高比组件AspectRatio


 */

效果图: