flutter获取验证码输入框组件

代码

import 'package:flutter/material.dart';

class ValidataInputBoxWidget extends StatefulWidget {
  ValidataInputBoxWidget({Key key, this.onChange, this.icon,this.getValidata}) : super(key: key);

  final IconData icon; //输入框icon materialIcon
  final onChange; //输入框change事件
  final getValidata;//点击获取验证码按钮事件

  @override
  State<StatefulWidget> createState() {
    return ValidataInputBoxWidgetBuilder();
  }
}

class ValidataInputBoxWidgetBuilder extends State<ValidataInputBoxWidget> {
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 10.0),
      margin: EdgeInsets.only(bottom: 30.0),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100.0),//圆角
          border: Border.all(//边框
              width: 1.0,
              style: BorderStyle.solid,
              color: Color.fromRGBO(0, 0, 0, 0.1))),
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 2,
            child: TextField(
            //输入框
              onChanged: widget.onChange,
              decoration: InputDecoration(
                  border: InputBorder.none,
                  icon: widget.icon != null ? Icon(widget.icon) : null),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
            //获取验证码按钮
              decoration: BoxDecoration(
                  color: Color(0xff0099ff),
                  borderRadius: BorderRadius.only(
                      bottomRight: Radius.circular(80.0),
                      topRight: Radius.circular(80.0))),
              child: FlatButton(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(80.0),
                        topRight: Radius.circular(80.0))),
                child: Text('获取验证码',style: TextStyle(color:Colors.white),),
                onPressed: widget.getValidata,
              ),
            ),
          )
        ],
      ),
    );
  }
}

说明

这个组件脱胎于上一篇flutter 自定义样式输入框

预览