flutter 自定义微信/支付宝密码输入框

如图：

项目需求需要实现以上效果

思路解析：

1 可以用dialog来实现
2 可以用一个新statfulWidget实现

因为不大熟悉dialog，故用了一个新的statefulWidget来实现页面效果，直接上代码：

///
/// 功能：
/// 描述：设置密码弹框功能
/// crated by xudailong on 2020/3/10.
///
class MineDestorySetPwdPage extends StatefulWidget {
  @override
  _MineDestorySetPwdPageState createState() => _MineDestorySetPwdPageState();
}

class _MineDestorySetPwdPageState extends State<MineDestorySetPwdPage> {

  String pwdData = '';

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  bool showError = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent, //把scaffold的背景色改成透明
      body: Container(
        color: MyColor.lightColor,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        alignment: Alignment.bottomLeft,
        child: Column(
          children: <Widget>[

            Container(
              width: MediaQuery.of(context).size.width,
              height: 150,
            ),
            Container(
              height: 180,
              width: 300,
              child: Column(
                children: <Widget>[
                  GestureDetector(
                    child: Container(
                      alignment: Alignment.topRight,
                      child: Image.asset(ImageUtil.getLocalPath(ImageConstant.icon_pass_close),width: 10,height: 10,),
                      padding: EdgeInsets.only(right:MyDimen.baseRight,top: MyDimen.baseLeft ),
                    ),
                    onTap: (){
                      Navigator.of(context).pop();
                    },
                    behavior: HitTestBehavior.opaque,
                  ),
                  Container(
                    child: Text('请输入账户密码',style: TextStyle(fontSize: MyDimen.dp14,color: MyColor.norFontColor,fontFamily: MyFont.nboldFont,fontWeight: FontWeight.w600),),
                  ),
                  Container(
                    height: 50,
                    width: 250,
                    margin: EdgeInsets.only(top: MyDimen.dp30),
                    child:  CustomJPasswordField(pwdData),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: MyDimen.baseLeft,right: MyDimen.baseRight,top: MyDimen.dp20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        showError?Text('您输入的密码有误',style: TextStyle(fontSize: MyDimen.dp12,color: MyColor.redNumFontColor,fontFamily: MyFont.nboldFont,fontWeight: FontWeight.w500),):Container(),
                        GestureDetector(
                          child: Text('忘记密码',style: TextStyle(fontSize: MyDimen.dp12,color: MyColor.norFontColor,fontFamily: MyFont.nboldFont,fontWeight: FontWeight.w500),),
                          onTap: (){
                            RouteUtil.jump2AccountPwd(context);
                          },
                          behavior: HitTestBehavior.opaque,
                        )
                      ],
                    ),
                  ),
                ],
              ),
              decoration: BoxDecoration(
                  color: MyColor.bg_white,
                  borderRadius: BorderRadius.all(Radius.circular(10))
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(),
            ),
            Align(
              child: Container(
                height: 200,
                width: MediaQuery.of(context).size.width,
                color: MyColor.bg_white,
                alignment: Alignment.bottomCenter,
                child: MyKeyboard(_onKeyDown),
              ),
              alignment: Alignment.bottomCenter,
            )
          ],
        ),
      ),
    );
  }

欢迎阅读：免费搭建个人博客：https://blog.csdn.net/xudailong_blog/article/details/78762262