Flutter填写用户名和密码表单实例

开篇寄语

在flutter设计程序过程中，用户的登录页面自然是必不可少，伯衡君今天就学习了这个的部署设计，发现也是非常简单，以一个最基本的样式来讲解，更华丽的都可以从基础改变。

前情提要

• 《Flutter制作自己的第一个全平台APP学习之Line Charts篇》
• 《Flutter实现图片轮播carousel slider实例竟然是如此简单》
• 《Flutter制作弹出框背景是磨砂特效Blur Effects的例子》
• 《Flutter制作自己的第一个全平台APP学习之实用功能篇》
• 《Flutter制作自己的第一个全平台APP学习之Popup篇》

内容详情

以下内容大多是更改lib下的main.dart文件内容，删掉里面的内容，复制粘贴代码，开启调试就可以出现了。、

试举例如下：

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isObscure = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(25),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              const TextField(
                decoration: InputDecoration(
                    labelText: 'username',
                    suffixIcon: Icon(Icons.verified_sharp)),
              ),
              TextField(
                obscureText: _isObscure,
                decoration: InputDecoration(
                    labelText: 'password',
                    suffixIcon: IconButton(
                        icon: Icon(_isObscure
                            ? Icons.visibility
                            : Icons.visibility_off),
                        onPressed: () {
                          setState(() {
                            _isObscure = !_isObscure;
                          });
                        })),
              ),
              Container(height: 20),
              ElevatedButton(onPressed: () {}, child: const Text('Login'))
            ]),
      ),
    );
  }
}

生成效果如下图所示：