关于flutter:flutter登录注册编写

登录页-页面剖析
步骤：

①将无状态组件改成有状态组件-右键 重构    ②增加可点击的图标-iconButton    ③增加状态-showPassword  ④依据状态展现不同内容  ⑤给图标增加点击事件   ⑥测试   

问题及解决方案：
1、去注册色彩问题
增加style
2、高低间距问题？
增加Padding
3、边距/异形屏幕问题
应用SafeArea
4、垂直高度有余问题
应用listView代替Column
5、登录按钮宽度和色彩问题？
宽度：SizeBox或者父级固定宽度
色彩：手动设置
注册页-页面剖析
步骤：

①增加文件/pages/register.dart    ②将login.dart文件复制到register.dart    ③批改类名    ④批改title  ⑤在路由增加register   ⑥测试   ⑦优化登录注册跳转，应用Navigator.pushReplacementNamed

登录页面

import 'package:flutter/material.dart';import '../routes.dart';class LoginPage extends StatefulWidget {  const LoginPage({ Key key }) : super(key: key);  @override  _LoginPageState createState() => _LoginPageState();}class _LoginPageState extends State<LoginPage> {  bool showPassword = false;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: Text('登录'),),      body: SafeArea(        minimum: EdgeInsets.all(30),        child: ListView(          children: [            TextField(              decoration: InputDecoration(                labelText: '用户名',                hintText: '请输出用户名'              ),            ),            Padding(padding: EdgeInsets.all(10)),            TextField(              obscureText: !showPassword,              decoration: InputDecoration(                labelText: '明码',                hintText: '请输出明码',                suffixIcon: IconButton(                  onPressed: (){                    setState(() {                      showPassword = !showPassword;                    });                  },                   icon: Icon(showPassword ? Icons.visibility_off : Icons.visibility),                )              ),            ),            Padding(padding: EdgeInsets.all(10)),            // ignore: deprecated_member_use            RaisedButton(              color: Colors.green,              onPressed: (){              },              child: Text('登录', style: TextStyle(color: Colors.white),),            ),            Padding(padding: EdgeInsets.all(10)),            Row(              mainAxisAlignment: MainAxisAlignment.center,              children: [                Text('还没有账号，'),                // ignore: deprecated_member_use                FlatButton(                  onPressed: (){                    Navigator.pushReplacementNamed(context, Routes.register);                  },                   child: Text('去注册',                  style: TextStyle(color: Colors.green),)                )              ],            )          ],        ),      ),    );  }}

注册页面

import 'package:flutter/material.dart';import '../routes.dart';class RegisterPage extends StatefulWidget {  const RegisterPage({ Key key }) : super(key: key);  @override  _RegisterPageState createState() => _RegisterPageState();}class _RegisterPageState extends State<RegisterPage> {  bool showPassword = false;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: Text('注册'),),      body: SafeArea(        minimum: EdgeInsets.all(30),        child: ListView(          children: [            TextField(              decoration: InputDecoration(                labelText: '用户名',                hintText: '请输出用户名'              ),            ),            Padding(padding: EdgeInsets.all(10)),            TextField(              obscureText: !showPassword,              decoration: InputDecoration(                labelText: '明码',                hintText: '请输出明码'              ),            ),            Padding(padding: EdgeInsets.all(10)),            TextField(              obscureText: !showPassword,              decoration: InputDecoration(                labelText: '确认明码',                hintText: '请输出明码',              ),            ),            Padding(padding: EdgeInsets.all(10)),            // ignore: deprecated_member_use            RaisedButton(              color: Colors.green,              onPressed: (){              },              child: Text('注册', style: TextStyle(color: Colors.white),),            ),            Padding(padding: EdgeInsets.all(10)),            Row(              mainAxisAlignment: MainAxisAlignment.center,              children: [                Text('有账号，'),                // ignore: deprecated_member_use                FlatButton(                  onPressed: (){                    Navigator.pushReplacementNamed(context, Routes.login);                  },                   child: Text('去登录',                  style: TextStyle(color: Colors.green),)                )              ],            )          ],        ),      ),    );  }}

成果如下如：