flutter仿手机百度网盘登录页和个人主页

发布于 15 天前  5 次阅读


运行界面

登录页面

20210713180625350

个人主页

20210713180719750

说明

账号:admin
密码:123456
对于账号和密码的格式没有进行验证
图片资源可以用外部图片,也可下载我以上传的资源,已放在:https://pic.kurihada.com/assets 中,在后面添加相应需要的文件名即可,例如:https://pic.kurihada.com/assets/baiduLogo.png

源代码

mian.dart

import 'package:flutter/material.dart';
import 'package:myapp/personal_center.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;

  @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(),
          ],
        ),
      ),
    );
  }

  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 () {};
  }

  bool _login() {
    if (_accountText == "admin" && _pwdText == '123456') {
      Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => PersonalCenter(), maintainState: false));
      return true;
    } else {
      showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(
              title: Text("提示"),
              content: Text("账号或密码错误,请检查"),
              actions: <Widget>[
                ElevatedButton(
                  child: Text("确认"),
                  onPressed: () {
                    Navigator.of(context).pop(true); //关闭对话框
                  },
                )
              ],
            );
          });
      return false;
    }
  }

  Widget _buildLoginButton() {
    return Container(
      margin: EdgeInsets.only(top: 30),
      width: MediaQuery.of(context).size.width,
      height: 45,
      child: ElevatedButton(
        child: Text(
          "登录",
          style: _normalFont,
        ),
        style: ButtonStyle(
          //字体颜色
          foregroundColor: MaterialStateProperty.resolveWith(
            (states) {
              if (_accountText.isNotEmpty && _pwdText.isNotEmpty) {
                //获取焦点时的颜色
                return Colors.white;
              }
              //默认状态使用灰色
              return Colors.black38;
            },
          ),
          //背景颜色
          backgroundColor: MaterialStateProperty.resolveWith(
            (states) {
              if (_accountText.isNotEmpty && _pwdText.isNotEmpty) {
                //获取焦点时的颜色
                return Colors.blue;
              }
              //默认状态使用灰色
              return Color.fromARGB(255, 220, 220, 220);
            },
          ),
          side: MaterialStateProperty.all(
              BorderSide(width: 1, color: Colors.white)), //边框
          shape: MaterialStateProperty.all(BeveledRectangleBorder(
              borderRadius: BorderRadius.circular(8))), //圆角弧度
        ),
        // onPressed: _getLoginButtonPressed(),
        onPressed: () {
          if (_getLoginButtonPressed() != null) _login();
        },
      ),
    );
  }
}

personal_center.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:myapp/res/listData.dart';

class PersonalCenter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("个人中心"),
        ),
        body: Container(
          child: Column(
            children: <Widget>[
              _userHead(),
              _functionalDomain(),
              _quit(context),
            ],
          ),
        ));
  }
}

String _userName = '移动用户';
double _usedSpace = 668;
double _totSpace = 3220;

Widget _userHead() {
  return Container(
    height: 200,
    width: 600,
    color: Colors.white,
    child: Stack(
      children: <Widget>[
        Align(
          alignment: Alignment(-0.95, -0.65),
          child: Container(
            width: 100.0,
            height: 100.0,
            decoration: new BoxDecoration(
              borderRadius: BorderRadius.circular(150.0),
              image: DecorationImage(
                image: new AssetImage('assets/user-head.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        Align(
          alignment: Alignment(-0.35, -0.75),
          child: Text(
            _userName,
            style: TextStyle(
              fontSize: 30,
              color: Colors.black,
            ),
          ),
        ),
        Align(
          alignment: Alignment(0.07, -0.68),
          child: Container(
            width: 30.0,
            height: 30.0,
            decoration: new BoxDecoration(
              borderRadius: BorderRadius.circular(150.0),
              image: DecorationImage(
                image: new AssetImage('assets/user-level0.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        Align(
          alignment: Alignment(0.25, -0.72),
          child: Container(
            padding: EdgeInsets.only(left: 120.0, right: 50.0, top: 50.0),
            child: LinearProgressIndicator(
              value: _usedSpace/_totSpace,
              backgroundColor: Colors.black12,
            ),
          ),
        ),
        Align(
          alignment: Alignment(-0.23, -0.1),
          child: Text(
            _usedSpace.toString()+'GB/'+_totSpace.toString()+'GB',
            style: TextStyle(
              fontSize: 20,
              color: Colors.black38,
            ),
          ),
        ),
      ],
    ),
  );
}

List<Widget> _getListData() {
  var tempList = listData.map((value) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.asset(
            value['imageUrl'],
            width: 90.0,
            height: 90.0,
          ),
          Text(
            value['title'],
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          ),
        ],
      ),
    );
  });
  return tempList.toList();
}

Widget _functionalDomain() {
  return GridView(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4, //横轴三个子widget
      childAspectRatio: 1.0, //宽高比为1时,子widget
    ),
    children: _getListData(),
    shrinkWrap: true,
  );
}

Widget _quit(BuildContext context) {
  final _normalFont = const TextStyle(fontSize: 18.0);
  return Container(
    margin: EdgeInsets.only(top: 30),
    width: MediaQuery.of(context).size.width,
    height: 45,
    alignment: AlignmentDirectional.bottomCenter,
    child: ElevatedButton(
      child: Text(
        "退出",
        style: _normalFont,
      ),
      style: ButtonStyle(
        side: MaterialStateProperty.all(
            BorderSide(width: 1, color: Colors.white)), //边框
        shape: MaterialStateProperty.all(BeveledRectangleBorder(
            borderRadius: BorderRadius.circular(8))), //圆角弧度
      ),
      onPressed: () {
        Navigator.pop(context);
      },
    ),
  );
}

平平无奇的大学在读本科生