关于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),)
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

成果如下如：