一、组件分析
ui如下
根据UI分析我们需要提取哪些是动态的，可以通过传递参数得到不同的结果？
1.左侧icon
2.输入的文本
3.是否是密码框
4.输入框的控制器：如何控制输入框的回调函数
二、快速创建自定义组件
vscode中使用快捷键stl快速生成一个无状态组件，
class CreateMyInput extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
);
}
}
为什么这里使用的是一个无状态组件（StatelessWidget）？，这里只是一个纯展示的，给定固定的参数就会返回固定的结果，而不是涉及自定义组件内部状态交互。因此选择无状态组件。
下面是建立好的无状态组件模板
import ‘package:flutter/material.dart‘;
class CreateMyInput extends StatelessWidget {
final iconString;
final placeholder;
final isPassword;
final inputController;
// const CreateMyInput(
// {Key key,
// @required this.iconString,
// @required this.placeholder,
// @required this.isPassword,
// @required this.inputController})
// : super(key: key);
CreateMyInput({this.iconString,this.placeholder,this.isPassword,this.inputController});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.fromLTRB(15.0,5,15.0,5),
child: Row(
children: <Widget>[
Image.asset(iconString,width: 25,color:Color(0xff2D4ED1)),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 15),
decoration:BoxDecoration(
border:Border(bottom: BorderSide(width: 0.8,color: Color(0xff2D4ED1))), //底部border
),
padding: EdgeInsets.fromLTRB(0, 0, 5, 0),
child: TextField(
controller: inputController,
decoration: InputDecoration(
hintText: placeholder,
contentPadding: EdgeInsets.fromLTRB(0, 17, 15, 15), //输入框内容部分设置padding，跳转跟icon的对其位置
border:InputBorder.none,
),
obscureText: isPassword, //是否是以星号*显示密码
),
),
)
],
),
);
}
}
三、外部使用自定义组
import ‘../base_widgit/create_my_input.dart‘;
//手机号的控制器
TextEditingController phoneController = TextEditingController();
//密码的控制器
TextEditingController passwordController = TextEditingController();
CreateMyInput(iconString:‘images/login_icon_phone.png‘,placeholder:"请输入手机号",isPassword:false,inputController:phoneController),
注意使用的时候参数需要加类型
原文地址：https://www.cnblogs.com/ruoqiang/p/10783088.html