关键词:TextEditingController FutureBuilder GestureDetector Container
TextEditingController就是在OC中UITextFeild 控件 [TextEditingController.addListener].监听输入框输入字符 类似于UITextFeild的textvalueDidChange代理
FutureBuilder :Creates a widget that builds itself based on the latest snapshot of 基于最后一个快照来创建一个控件
GestureDetector:Creates a widget that detects gestures. 创建一个具有手势的组件
点击不触发
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
Container这是一个容器 分为两个部分:容器布局和容器里的小组件
return Container(
margin: EdgeInsets.only(left: 20, top: 100),
height: 150.0,
width: 150.0,
color: Colors.tealAccent,
alignment: Alignment.center,
//--上面是布局
//--下面是控件里的小组件
child: Image.network(
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F15%2F20161215221311_2PZF5.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611842988&t=eec792699666f6f0d8aec13940d71f7e',
width: 150,
height: 150,
fit: BoxFit.cover,
),
);
效果展示:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fluttertoast/fluttertoast.dart';
final TextStyle _availableStyle = TextStyle(
fontSize: 16.0,
color: Colors.pinkAccent,
);
final TextStyle _unAvailabStyle = TextStyle(
fontSize: 16.0,
color: const Color(0xFFCCCCCC),
);
class LoginPage extends StatefulWidget {
//
final int countdown;
final Function onTapCallBack;
final bool available;
LoginPage({
this.countdown: 60,
this.onTapCallBack,
this.available: true,
});
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State {
String phone;
String code;
// Timer _timer;
int _seconds;
TextStyle inkWellStyle = _availableStyle;
var _futureBuilderFuture;
var _phoneController = new TextEditingController();
var _codeContrller = new TextEditingController();
@override
void initState() {
var context = this.context;
_seconds = widget.countdown;
_futureBuilderFuture = _loginReAction(context, true);
_phoneController.addListener(() {
phone = _phoneController.text;
print(phone);
});
_codeContrller.addListener(() {
code = _codeContrller.text;
print(code);
});
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
_codeContrller = null;
_phoneController = null;
super.dispose();
}
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
return FutureBuilder(
future: _futureBuilderFuture,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError || !snapshot.hasError) {
return _loginPage(context);
}
}
},
);
}
Widget _loginPage(BuildContext context) {
return Container(
child: Scaffold(
body: GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.topRight,
colors: [
Theme.of(context).primaryColorLight.withAlpha(200),
Theme.of(context).accentColor.withAlpha(0),
Theme.of(context).accentColor.withAlpha(0),
Theme.of(context).primaryColor.withAlpha(200),
])),
child: SingleChildScrollView(
child: Column(
children: [
_loginImge(),
_buildPhoneTF(),
_buildCodeTF(),
_loginButton()
],
),
),
),
),
),
);
}
Widget _loginImge() {
return Container(
margin: EdgeInsets.only(left: 20, top: 100),
height: 150.0,
width: 150.0,
color: Colors.tealAccent,
alignment: Alignment.center,
child: Image.network(
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F15%2F20161215221311_2PZF5.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611842988&t=eec792699666f6f0d8aec13940d71f7e',
width: 150,
height: 150,
fit: BoxFit.cover,
),
);
}
Widget _buildPhoneTF() {
return Container(
padding: EdgeInsets.fromLTRB(30, 20, 30, 20),
child: TextField(
controller: _phoneController,
cursorColor: Theme.of(context).primaryColor,
keyboardType: TextInputType.number,
decoration: InputDecoration(
icon: Icon(CupertinoIcons.phone),
hintText: 'phoneNum',
counterText: ''),
maxLength: 11,
maxLines: 1,
inputFormatters: [WhitelistingTextInputFormatter(RegExp("[0-9]"))],
),
);
}
Widget _buildCodeTF() {
return Container(
padding: EdgeInsets.fromLTRB(30, 20, 30, 20),
child: TextField(
controller: _codeContrller,
cursorColor: Theme.of(context).primaryColor,
keyboardType: TextInputType.number,
decoration: InputDecoration(
icon: Icon(CupertinoIcons.brightness),
hintText: 'Code',
counterText: '',
suffixIcon: Container(
child: FlatButton(
onPressed: () {
_showToast('OK Click Code');
},
child: Text('click'),
),
),
),
),
);
}
Widget _loginButton(){
return Container(
height: ScreenUtil().setHeight(70),
margin: EdgeInsets.only(top: ScreenUtil().setHeight(40)),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
colors: [
Theme.of(context).primaryColor,
Theme.of(context).accentColor,
]
),
borderRadius: BorderRadius.circular(35),
),
child: MaterialButton(
minWidth: ScreenUtil().setWidth(600),
height: ScreenUtil().setHeight(100),
child: Text('Sign In',style: TextStyle(color: Colors.white),),
onPressed: () async{
await _loginReAction(context, false).then((result) {
_showToast('Ok loginReAction');
});
},
),
);
}
void _showToast(String msg) {
Fluttertoast.showToast(
msg: msg,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIos: 1,
backgroundColor: Colors.black87,
textColor: Color(0xFFffffff),
);
}
}
Future _loginReAction(BuildContext context, bool aotoLogin) async {}