【自学Flutter】6.6 自定义输入框样式

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.效果图