Flutter編寫一個(gè)簡(jiǎn)單登錄界面

首先來看一下效果圖


注意事項(xiàng)：

? ? ? ? 動(dòng)態(tài)改變Widget，需要使用StatefulWidget，在更新Widget時(shí)，使用setState就行。廢話不說，上代碼：

import 'package:flutter/material.dart';

import 'dart:io';

import 'package:flutter/services.dart';

var usernameController = new TextEditingController();

var passworkController = new TextEditingController();

String userName;

String passwork;

bool checkboxSelected;

void main() {

? runApp(MyApp());

? if (Platform.isAndroid) {

? ? // 以下兩行 設(shè)置android狀態(tài)欄為透明的沉浸。寫在組件渲染之后，是為了在渲染后進(jìn)行set賦值，覆蓋狀態(tài)欄，寫在渲染之前MaterialApp組件會(huì)覆蓋掉這個(gè)值。

? ? SystemUiOverlayStyle systemUiOverlayStyle =

? ? ? ? SystemUiOverlayStyle(statusBarColor: Colors.transparent);

? ? SystemChrome.setSystemUIOverlayStyle(

? ? ? ? systemUiOverlayStyle.copyWith(statusBarBrightness: Brightness.light));

? ? // SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light

? ? //? ? .copyWith(statusBarBrightness: Brightness.light));

? }

}

class MyApp extends StatelessWidget {

? @override

? Widget build(BuildContext context) {

? ? return MaterialApp(

? ? ? home: Scaffold(

? ? ? ? body: SingleChildScrollView(

? ? ? ? ? child: Column(

? ? ? ? ? ? //MainAxisSize在主軸方向占有空間的值，默認(rèn)是max。還有一個(gè)min

? ? ? ? ? ? mainAxisSize: MainAxisSize.max,

? ? ? ? ? ? //MainAxisAlignment：主軸方向上的對(duì)齊方式，會(huì)對(duì)child的位置起作用，默認(rèn)是start。

? ? ? ? ? ? mainAxisAlignment: MainAxisAlignment.start,

? ? ? ? ? ? children: <Widget>[

? ? ? ? ? ? ? iconImg(),

? ? ? ? ? ? ? editWidget(),

? ? ? ? ? ? ? bt_Widget(),

? ? ? ? ? ? ? radioBt_Widget(),

? ? ? ? ? ? ],

? ? ? ? ? ),

? ? ? ? ),

? ? ? ),

? ? );

? }

}

/**

* icon界面

*/

class iconImg extends StatelessWidget {

? @override

? Widget build(BuildContext context) {

? ? // TODO: implement build

? ? return Container(

? ? ? alignment: Alignment.topCenter,

? ? ? child: Container(

? ? ? ? decoration: BoxDecoration(

? ? ? ? ? ? borderRadius: new BorderRadius.circular((20.0)), // 圓角度

? ? ? ? ? ? boxShadow: [

? ? ? ? ? ? ? ///陰影顏色/位置/大小等

? ? ? ? ? ? ? BoxShadow(

? ? ? ? ? ? ? ? color: Colors.grey[300],

? ? ? ? ? ? ? ? offset: Offset(1, 1),

? ? ? ? ? ? ? ? ///模糊陰影半徑

? ? ? ? ? ? ? ? blurRadius: 10,

? ? ? ? ? ? ? ),

? ? ? ? ? ? ? BoxShadow(

? ? ? ? ? ? ? ? ? color: Colors.grey[300],

? ? ? ? ? ? ? ? ? offset: Offset(-1, -1),

? ? ? ? ? ? ? ? ? blurRadius: 5),

? ? ? ? ? ? ? BoxShadow(

? ? ? ? ? ? ? ? ? color: Colors.grey[200],

? ? ? ? ? ? ? ? ? offset: Offset(1, -1),

? ? ? ? ? ? ? ? ? blurRadius: 10),

? ? ? ? ? ? ? BoxShadow(

? ? ? ? ? ? ? ? ? color: Colors.grey[100],

? ? ? ? ? ? ? ? ? offset: Offset(-1, 1),

? ? ? ? ? ? ? ? ? blurRadius: 10)

? ? ? ? ? ? ],

? ? ? ? ? ? border: Border.all(

? ? ? ? ? ? ? width: 1.0,

? ? ? ? ? ? ? color: Color(0xFFE0E0E0),

? ? ? ? ? ? )),

? ? ? ? margin: EdgeInsets.only(top: 60.0),

? ? ? ? child: Container(

? ? ? ? ? decoration: BoxDecoration(

? ? ? ? ? ? borderRadius: new BorderRadius.circular((20.0)), // 圓角度

? ? ? ? ? ? color: Colors.white,

? ? ? ? ? ),

? ? ? ? ? child: Column(

? ? ? ? ? ? mainAxisSize: MainAxisSize.max,

? ? ? ? ? ? mainAxisAlignment: MainAxisAlignment.center,

? ? ? ? ? ? children: <Widget>[

? ? ? ? ? ? ? new Padding(

? ? ? ? ? ? ? ? padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),

? ? ? ? ? ? ? ? child: Container(

? ? ? ? ? ? ? ? ? width: 70.0,

? ? ? ? ? ? ? ? ? height: 70.0,

? ? ? ? ? ? ? ? ? child: Image.asset(

? ? ? ? ? ? ? ? ? ? 'images/icon.png',

? ? ? ? ? ? ? ? ? ? scale: 2.85,

? ? ? ? ? ? ? ? ? ? alignment: Alignment.center,

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ),

? ? ? ? ? ? ],

? ? ? ? ? ),

? ? ? ? ),

? ? ? ),

? ? );

? }

}

class editWidget extends StatefulWidget {

? editWidget({Key key}) : super(key: key);

? @override

? _editWidget createState() => new _editWidget();

}

/**

* 輸入框界面

*/

class _editWidget extends State<editWidget> {

? var userClearFlag = false;

? var pswClearFlag = false;

? @override

? Widget build(BuildContext context) {

? ? // TODO: implement build

? ? return Container(

? ? ? padding: EdgeInsets.fromLTRB(30.0, 5.0, 10.0, 10.0),

? ? ? child: Column(

? ? ? ? children: <Widget>[

? ? ? ? ? Container(

? ? ? ? ? ? alignment: Alignment.centerLeft,

? ? ? ? ? ? margin: EdgeInsets.only(bottom: 30.0, top: 100.0),

? ? ? ? ? ? child: Text(

? ? ? ? ? ? ? '用戶登錄',

? ? ? ? ? ? ? textAlign: TextAlign.left,

? ? ? ? ? ? ? style: TextStyle(fontSize: 22.0, color: Color(0xff333333)),

? ? ? ? ? ? ),

? ? ? ? ? ),

? ? ? ? ? Row(

? ? ? ? ? ? children: <Widget>[

? ? ? ? ? ? ? Image.asset(

? ? ? ? ? ? ? ? 'images/user.png',

? ? ? ? ? ? ? ? width: 18.0,

? ? ? ? ? ? ? ),

? ? ? ? ? ? ? Expanded(

? ? ? ? ? ? ? ? child: Container(

? ? ? ? ? ? ? ? ? margin: EdgeInsets.only(left: 10.0, right: 5.0),

? ? ? ? ? ? ? ? ? child: TextField(

? ? ? ? ? ? ? ? ? ? controller: usernameController,

? ? ? ? ? ? ? ? ? ? maxLines: 1,

? ? ? ? ? ? ? ? ? ? //是否自動(dòng)更正

? ? ? ? ? ? ? ? ? ? autocorrect: true,

? ? ? ? ? ? ? ? ? ? //是否自動(dòng)對(duì)焦

? ? ? ? ? ? ? ? ? ? autofocus: false,

? ? ? ? ? ? ? ? ? ? textInputAction: TextInputAction.unspecified,

? ? ? ? ? ? ? ? ? ? decoration: InputDecoration(

? ? ? ? ? ? ? ? ? ? ? ? hintStyle:

? ? ? ? ? ? ? ? ? ? ? ? ? ? TextStyle(color: Color(0xffBFBFBF), fontSize: 16.0),

? ? ? ? ? ? ? ? ? ? ? ? hintText: '請(qǐng)輸入用戶名',

? ? ? ? ? ? ? ? ? ? ? ? border: InputBorder.none,

? ? ? ? ? ? ? ? ? ? ? ? prefixStyle: TextStyle(

? ? ? ? ? ? ? ? ? ? ? ? ? ? color: Color(0xff333333), fontSize: 16.0)),

? ? ? ? ? ? ? ? ? ? onChanged: (val) {

? ? ? ? ? ? ? ? ? ? ? setState(() {

? ? ? ? ? ? ? ? ? ? ? ? pswClearFlag = false;

? ? ? ? ? ? ? ? ? ? ? ? if (val.length > 0)

? ? ? ? ? ? ? ? ? ? ? ? ? userClearFlag = true;

? ? ? ? ? ? ? ? ? ? ? ? else

? ? ? ? ? ? ? ? ? ? ? ? ? userClearFlag = false;

? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? print(val);

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? onEditingComplete: () {

? ? ? ? ? ? ? ? ? ? ? print('點(diǎn)擊鍵盤');

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? onSubmitted: (val) {

? ? ? ? ? ? ? ? ? ? ? print('完成${val}');

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ),

? ? ? ? ? ? ? Offstage(

? ? ? ? ? ? ? ? offstage: !userClearFlag,

? ? ? ? ? ? ? ? child: GestureDetector(

? ? ? ? ? ? ? ? ? child: Container(

? ? ? ? ? ? ? ? ? ? margin: EdgeInsets.only(right: 10.0),

? ? ? ? ? ? ? ? ? ? child: Image.asset(

? ? ? ? ? ? ? ? ? ? ? 'images/clear.png',

? ? ? ? ? ? ? ? ? ? ? width: 15.0,

? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? onTap: () {

? ? ? ? ? ? ? ? ? ? print('清空');

? ? ? ? ? ? ? ? ? ? usernameController.clear();

? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ),

? ? ? ? ? ? ],

? ? ? ? ? ),

? ? ? ? ? Container(

? ? ? ? ? ? height: 1.0,

? ? ? ? ? ? margin: EdgeInsets.only(bottom: 40.0),

? ? ? ? ? ? decoration: BoxDecoration(

? ? ? ? ? ? ? border: Border.all(width: 1.0, color: Color(0xffD9D9D9)),

? ? ? ? ? ? ),

? ? ? ? ? ),

? ? ? ? ? Row(

? ? ? ? ? ? children: <Widget>[

? ? ? ? ? ? ? Image.asset(

? ? ? ? ? ? ? ? 'images/psw.png',

? ? ? ? ? ? ? ? width: 18.0,

? ? ? ? ? ? ? ),

? ? ? ? ? ? ? Expanded(

? ? ? ? ? ? ? ? child: Container(

? ? ? ? ? ? ? ? ? margin: EdgeInsets.only(left: 10.0, right: 5.0),

? ? ? ? ? ? ? ? ? child: TextField(

? ? ? ? ? ? ? ? ? ? controller: passworkController,

? ? ? ? ? ? ? ? ? ? maxLines: 1,

? ? ? ? ? ? ? ? ? ? //是否自動(dòng)更正

? ? ? ? ? ? ? ? ? ? autocorrect: true,

? ? ? ? ? ? ? ? ? ? //是否自動(dòng)對(duì)焦

? ? ? ? ? ? ? ? ? ? autofocus: false,

? ? ? ? ? ? ? ? ? ? // 是否是密碼

? ? ? ? ? ? ? ? ? ? obscureText: true,

? ? ? ? ? ? ? ? ? ? textInputAction: TextInputAction.unspecified,

? ? ? ? ? ? ? ? ? ? keyboardType: TextInputType.phone,

? ? ? ? ? ? ? ? ? ? decoration: InputDecoration(

? ? ? ? ? ? ? ? ? ? ? ? hintStyle:

? ? ? ? ? ? ? ? ? ? ? ? ? ? TextStyle(color: Color(0xffBFBFBF), fontSize: 16.0),

? ? ? ? ? ? ? ? ? ? ? ? prefixStyle:

? ? ? ? ? ? ? ? ? ? ? ? ? ? TextStyle(color: Color(0xff333333), fontSize: 16.0),

? ? ? ? ? ? ? ? ? ? ? ? hintText: '請(qǐng)輸入密碼',

? ? ? ? ? ? ? ? ? ? ? ? border: InputBorder.none),

? ? ? ? ? ? ? ? ? ? onChanged: (val) {

? ? ? ? ? ? ? ? ? ? ? setState(() {

? ? ? ? ? ? ? ? ? ? ? ? userClearFlag = false;

? ? ? ? ? ? ? ? ? ? ? ? if (val.length > 0)

? ? ? ? ? ? ? ? ? ? ? ? ? pswClearFlag = true;

? ? ? ? ? ? ? ? ? ? ? ? else

? ? ? ? ? ? ? ? ? ? ? ? ? pswClearFlag = false;

? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? print(val);

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ),

? ? ? ? ? ? ? Offstage(

? ? ? ? ? ? ? ? offstage: !pswClearFlag,

? ? ? ? ? ? ? ? child: GestureDetector(

? ? ? ? ? ? ? ? ? child: Container(

? ? ? ? ? ? ? ? ? ? margin: EdgeInsets.only(right: 10.0),

? ? ? ? ? ? ? ? ? ? child: Image.asset(

? ? ? ? ? ? ? ? ? ? ? 'images/clear.png',

? ? ? ? ? ? ? ? ? ? ? width: 15.0,

? ? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? onTap: () {

? ? ? ? ? ? ? ? ? ? passworkController.clear();

? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ),

? ? ? ? ? ? ],

? ? ? ? ? ),

? ? ? ? ? Container(

? ? ? ? ? ? height: 1.0,

? ? ? ? ? ? decoration: BoxDecoration(

? ? ? ? ? ? ? border: Border.all(width: 1.0, color: Color(0xffD9D9D9)),

? ? ? ? ? ? ),

? ? ? ? ? ),

? ? ? ? ],

? ? ? ),

? ? );

? }

}

/**

* 登錄按鈕

*/

class bt_Widget extends StatelessWidget {

? @override

? Widget build(BuildContext context) {

? ? // TODO: implement build

? ? return GestureDetector(

? ? ? child: Container(

? ? ? ? margin:

? ? ? ? ? ? EdgeInsets.only(left: 30.0, right: 30.0, top: 50.0, bottom: 10.0),

? ? ? ? padding: EdgeInsets.only(top: 10.0, bottom: 10.0),

? ? ? ? decoration: BoxDecoration(

? ? ? ? ? borderRadius: BorderRadius.circular(20.0),

? ? ? ? ? color: Color(0xff3896FF),

? ? ? ? ? boxShadow: [

? ? ? ? ? ? ///陰影顏色/位置/大小等

? ? ? ? ? ? BoxShadow(

? ? ? ? ? ? ? color: Colors.grey[200],

? ? ? ? ? ? ? offset: Offset(1, 1),

? ? ? ? ? ? ? ///模糊陰影半徑

? ? ? ? ? ? ? blurRadius: 10,

? ? ? ? ? ? ),

? ? ? ? ? ? BoxShadow(

? ? ? ? ? ? ? ? color: Colors.grey[200], offset: Offset(-1, -1), blurRadius: 5),

? ? ? ? ? ? BoxShadow(

? ? ? ? ? ? ? ? color: Colors.grey[200], offset: Offset(1, -1), blurRadius: 10),

? ? ? ? ? ? BoxShadow(

? ? ? ? ? ? ? ? color: Colors.grey[200], offset: Offset(-1, 1), blurRadius: 10)

? ? ? ? ? ],

? ? ? ? ),

? ? ? ? child: Row(

? ? ? ? ? mainAxisAlignment: MainAxisAlignment.center,

? ? ? ? ? children: <Widget>[

? ? ? ? ? ? Text(

? ? ? ? ? ? ? '登 錄',

? ? ? ? ? ? ? style: TextStyle(fontSize: 16.0, color: Color(0xffffffff)),

? ? ? ? ? ? ? textAlign: TextAlign.center,

? ? ? ? ? ? ),

? ? ? ? ? ],

? ? ? ? ),

? ? ? ),

? ? ? onTap: () {

? ? ? ? showAlertDialog(context);

? ? ? },

? ? );

? }

? void showAlertDialog(BuildContext context) {

? ? showDialog(

? ? ? ? context: context,

? ? ? ? builder: (_) => new AlertDialog(

? ? ? ? ? ? ? ? title: new Text("Dialog Title"),

? ? ? ? ? ? ? ? content: new Text("This is my content"),

? ? ? ? ? ? ? ? actions: <Widget>[

? ? ? ? ? ? ? ? ? new FlatButton(

? ? ? ? ? ? ? ? ? ? child: new Text("CANCEL"),

? ? ? ? ? ? ? ? ? ? onPressed: () {

? ? ? ? ? ? ? ? ? ? ? Navigator.of(context).pop();

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ? ? new FlatButton(

? ? ? ? ? ? ? ? ? ? child: new Text("OK"),

? ? ? ? ? ? ? ? ? ? onPressed: () {

? ? ? ? ? ? ? ? ? ? ? Navigator.of(context).pop();

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? )

? ? ? ? ? ? ? ? ]));

? }

}

class radioBt_Widget extends StatefulWidget {

? radioBt_Widget({Key key}) : super(key: key);

? @override

? _radioBt_Widget createState() => new _radioBt_Widget();

}

/**

* 記住密碼單選框

*/

class _radioBt_Widget extends State<radioBt_Widget> {

? bool _checkboxSelected = true;

? @override

? Widget build(BuildContext context) {

? ? // TODO: implement build

? ? return Container(

? ? ? margin: EdgeInsets.only(left: 25.0, top: 15.0),

? ? ? child: GestureDetector(

? ? ? ? child: Row(

? ? ? ? ? mainAxisAlignment: MainAxisAlignment.start,

? ? ? ? ? children: <Widget>[

? ? ? ? ? ? Container(

? ? ? ? ? ? ? margin: EdgeInsets.only(right: 5.0),

? ? ? ? ? ? ? padding: EdgeInsets.only(top: 5.0, bottom: 5.0, left: 5.0),

? ? ? ? ? ? ? child: Image.asset(

? ? ? ? ? ? ? ? _checkboxSelected ? 'images/wu.png' : 'images/gou.png',

? ? ? ? ? ? ? ? width: 15.0,

? ? ? ? ? ? ? ),

? ? ? ? ? ? ),

? ? ? ? ? ? Text(

? ? ? ? ? ? ? '記住密碼',

? ? ? ? ? ? ? style: TextStyle(fontSize: 14.0, color: Color(0xff333333)),

? ? ? ? ? ? )

? ? ? ? ? ],

? ? ? ? ),

? ? ? ? onTap: () {

? ? ? ? ? setState(() {

? ? ? ? ? ? _checkboxSelected = !_checkboxSelected;

? ? ? ? ? });

? ? ? ? },

? ? ? ),

? ? );

? }

}

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 用了整整一天的時(shí)間，終于整出來一個(gè)自己滿意的登錄界面github地址，分享出來和大家一起學(xué)習(xí)和進(jìn)步。 import...
    王芙娟閱讀 8,798評(píng)論 0贊 6
  • //https://github.com/peng8350/flutter_pulltorefresh impor...
    秋分落葉閱讀 2,772評(píng)論 0贊 1
  • 在使用Flutter構(gòu)建WhatsApp之前，我們創(chuàng)建了一個(gè)帶有選項(xiàng)卡和導(dǎo)航的基本appbar。 今天，我們將使用...
    Sper_CL閱讀 1,242評(píng)論 0贊 0
  • 今天有幸參加了“世界孤獨(dú)癥日”主題活動(dòng)，當(dāng)我在殘疾人康復(fù)中心看到自閉癥兒童那一張張?zhí)煺鏌o邪的可愛臉龐，心中有說不出...
    溫暖的冰珊閱讀 614評(píng)論 5贊 8
  • 周一學(xué)《活法》隨時(shí)準(zhǔn)備說謝謝，作為人隨時(shí)隨地說謝謝。謝謝這個(gè)詞對(duì)陌生人說的非常多，對(duì)家人.朋友.同事說的比較少，謝...
    武廳887685閱讀 334評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容