6.6 自定义输入框样式
1.源代码
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Theme(
data: Theme.of(context).copyWith(
hintColor: Colors.green,
inputDecorationTheme: InputDecorationTheme(
labelStyle: TextStyle(color: Colors.blue),
hintStyle: TextStyle(color: Colors.orange),
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
autofocus: true,
decoration: InputDecoration(
prefixIcon:Icon(Icons.perm_identity),
labelText: "用户名",
hintText: "请输入用户名",
),
),
TextField(
obscureText: true,
decoration: InputDecoration(
prefixIcon:Icon(Icons.lock),
labelText: "密码",
hintText: "请输入密码",
),
),
],
),
)
)
)
);
}
}
2.解释源代码
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Theme(
data: Theme.of(context).copyWith(
hintColor: Colors.green,
inputDecorationTheme: InputDecorationTheme(
labelStyle: TextStyle(color: Colors.blue),
hintStyle: TextStyle(color: Colors.orange),
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
autofocus: true,
decoration: InputDecoration(
prefixIcon:Icon(Icons.perm_identity),
labelText: "用户名",
hintText: "请输入用户名",
),
),
TextField(
obscureText: true,
decoration: InputDecoration(
prefixIcon:Icon(Icons.lock),
labelText: "密码",
hintText: "请输入密码",
),
),
],
),
)
)
)
);
}
}
3.效果图
![效果图](https://i-blog.csdnimg.cn/blog_migrate/c4ccffc56e0279022d7c759b55e4e18d.png)