运行界面

说明

Flutter中文网本地图片加载教程：
https://flutterchina.club/assets-and-images/
如果需要使用本地图片：
1、在项目根目录中加入 assets 文件夹，并将相应图片资源下载到本地
2、在 pubspec.yaml 配置静态文件

  assets:
    - assets/baiduLogo.png
    - assets/closeEye.png
    - assets/openEye.png

3、代码中更改图片的加载方式为本地

Code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Baidu Disk',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  State createState() {
    return _LoginPageState();
  }
}

class _LoginPageState extends State<LoginPage> {
  final _biggerFont =
      const TextStyle(fontSize: 30.0, fontWeight: FontWeight.w600);
  final _normalFont = const TextStyle(fontSize: 18.0);
  final _borderRadius = BorderRadius.circular(6);

  String _accountText = '';
  String _pwdText = '';
  bool _isEnableLogin = false;
  bool _obscureText = true;

  Widget _buildTopWidget() {
    return Container(
      margin: EdgeInsets.only(top: 40),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Image.asset('assets/baiduLogo.png'),
          Text(
            '欢迎登录百度账户',
            style: _biggerFont,
          ),
        ],
      ),
    );
  }

  void _checkUserInput() {
    if (_accountText.isNotEmpty && _pwdText.isNotEmpty) {
      if (_isEnableLogin) return;
    } else {
      if (!_isEnableLogin) return;
    }
    setState(() {
      _isEnableLogin = !_isEnableLogin;
    });
  }

  Widget _buildAccountEditTextField() {
    return Container(
      margin: EdgeInsets.only(top: 80),
      child: TextField(
        onChanged: (text) {
          _accountText = text;
          _checkUserInput();
        },
        style: _normalFont,
        decoration: InputDecoration(
          hintText: '请输入手机号/用户名/邮箱',
          filled: true,
          fillColor: Color.fromARGB(255, 240, 240, 240),
          contentPadding: EdgeInsets.only(left: 8),
          border: OutlineInputBorder(
              borderSide: BorderSide.none, borderRadius: _borderRadius),
        ),
      ),
    );
  }

  Widget _buildPwdEditTextField() {
    return Container(
      margin: EdgeInsets.only(top: 15),
      child: TextField(
        onChanged: (text) {
          _pwdText = text;
          _checkUserInput();
        },
        style: _normalFont,
        obscureText: _obscureText,
        decoration: InputDecoration(
          hintText: '请输入密码',
          filled: true,
          fillColor: Color.fromARGB(255, 240, 240, 240),
          contentPadding: EdgeInsets.only(left: 8),
          border: OutlineInputBorder(
              borderSide: BorderSide.none, borderRadius: _borderRadius),
          suffixIcon: IconButton(
            onPressed: () => setState(() => _obscureText = !_obscureText),
            //远程图片加载
            // icon: Image.network(
            //   _obscureText ? 'https://pic.kurihada.com/assets/closeEye.png' : 'https://pic.kurihada.com/assets/openEye.png',
            //   width: 20,
            //   height: 20,
            // ),
            //本地图片加载
            icon: Image.asset(
              _obscureText ? 'assets/closeEye.png' : 'assets/openEye.png',
              width: 20,
              height: 20,
            ),
            splashColor: Colors.transparent,
            // 点击去掉阴影效果
            highlightColor: Colors.transparent, //点击去掉阴影效果
          ),
        ),
      ),
    );
  }

  _getLoginButtonPressed() {
    if (!_isEnableLogin) return null;
    return () {};
  }

  Widget _buildLoginButton() {
    return Container(
      margin: EdgeInsets.only(top: 30),
      width: MediaQuery.of(context).size.width,
      height: 45,
      child: RaisedButton(
        child: Text(
          "登录",
          style: _normalFont,
        ),
        color: Colors.blue,
        disabledColor: Colors.black12,
        textColor: Colors.white,
        disabledTextColor: Colors.black12,
        shape: RoundedRectangleBorder(
          borderRadius: _borderRadius,
        ),
        onPressed: _getLoginButtonPressed(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('LoginPage'),
      ),
      body: Container(
        margin: EdgeInsets.only(left: 25, right: 25),
        child: Column(
          children: <Widget>[
            _buildTopWidget(),
            _buildAccountEditTextField(),
            _buildPwdEditTextField(),
            _buildLoginButton(),
          ],
        ),
      ),
    );
  }
}