Una breve introducción a la implementación de la interfaz de inicio de sesión de Flutter

Implementación de la interfaz de inicio de sesión:

código:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class denglu extends StatefulWidget {
    
    
  @override
  Myhome createState() => Myhome();
}

/*--------------------------------------------------------------------*/

class Myhome extends State<denglu> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    // FToast;

    return Scaffold(
        appBar: AppBar(
          title: const Text(
            '邮箱登录',
            style: TextStyle(
              color: Colors.black,
              fontSize: 15,
            ),
          ),
          centerTitle: true,
        ),
        body: Column(
          children: [
            const Text('邮箱账号登录',
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 10,
                    fontWeight: FontWeight.bold,
                    height: 3)),
            const TextField(
              decoration: InputDecoration(
                counterText: '邮箱格式有误 ',
                counterStyle: TextStyle(color: Colors.red, fontSize: 10),
                icon: Icon(
                  Icons.person,
                  size: 20,
                ),
                hintText: '请输入邮箱名',
                hintStyle: TextStyle(fontSize: 10),
                enabledBorder: OutlineInputBorder(
                    borderRadius:
                        BorderRadius.all(Radius.circular(60)), //边角为30的方框
                    borderSide: BorderSide(color: Colors.black) //设置边框线的颜色和粗细
                    ),
                focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(60)),
                    borderSide: BorderSide(color: Colors.deepOrange)),
              ),
            ),
            const TextField(
              decoration: InputDecoration(
                icon: Icon(Icons.lock,size: 20,),
                hintText: '请输入密码',
                counterText: '账户密码错误',
                counterStyle: TextStyle(color: Colors.red,fontSize: 10),
                enabledBorder: OutlineInputBorder(
                    borderRadius:
                        BorderRadius.all(Radius.circular(60)), //边角为30的方框
                    borderSide: BorderSide(color: Colors.black) //设置边框线的颜色和粗细
                    ),
                focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(60)),
                    borderSide: BorderSide(color: Colors.deepOrange)),
              ),
            ),
            RaisedButton(child: Text('登 录'),color: Colors.yellow,
                onPressed: () {
    
    
              print('a');
            }),
            const Text('忘记密码 | 注册新账号')
          ],
        ));
  }
}