Flutter UI布局TextField 使用, 简单一个登录页面
代码如下:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SHTPage(),
);
}
}
class SHTPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("steve Widget"),
),
body: SHTContent(),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed:() =>print("FloatingActionButton click"),
) ,
floatingActionButtonLocation:FloatingActionButtonLocation.endFloat ,
);
}
}
class SHTContent extends StatefulWidget {
@override
_SHTContentState createState() => _SHTContentState();
}
class _SHTContentState extends State<SHTContent> {
final usetNameTextEditController = TextEditingController();
final passWordTextEditController = TextEditingController();
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
TextField(
controller: usetNameTextEditController,
decoration:InputDecoration(
labelText: "user name",
icon: Icon(Icons.people),
hintText: "请输入手机号",
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.grey[100],
) ,
),
SizedBox(height: 10,),
TextField(
controller: passWordTextEditController,
decoration:InputDecoration(
labelText: "pass word",
icon: Icon(Icons.people),
hintText: "请输入密码",
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.grey[100],
) ,
onChanged: (value){
print("steve--- on onChanged $value");
},
onSubmitted: (value){
print("steve--- onSubmitted $value");
},
),
SizedBox(height: 40,),
Container(
width: double.infinity,
height: 44,
child: FlatButton(
child: Text("Login ",style: TextStyle(fontSize: 20,color: Colors.white),),
color: Colors.greenAccent,
onPressed: (){
print("steve--- onPressed ");
final username = usetNameTextEditController.text;
final password = passWordTextEditController.text;
print("steve--- username "+username);
print("steve--- password "+password);
},
),
)
],
),
);
}
}