iT邦幫忙

2022 iThome 鐵人賽

DAY 27
0
Software Development

初學軟體開發系列 第 27

Day27-登入帳號密碼介面(上)

  • 分享至 

  • xImage
  •  

今日學習重點
輸入框TextField

說明:
製作一個讓使用者們可以登入的介面,使用TextField的用法來達到此效果。
一開始可以做單純輸入帳號的框就好,所以
程式碼如下:

class Input extends StatelessWidget {
  const Input({super.key});

  Widget _buildName(){
    return const TextField(
      decoration: InputDecoration(
        labelText:"帳號",
        hintText: "請輸入帳號",
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('歡迎'),
      ),
      body:Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(children: [_buildName(),]),
      ) ,
    );
  }
}

https://ithelp.ithome.com.tw/upload/images/20220927/20151918wlaIUtXhxt.png

使用TextField的labelText、hintText,可以有提示框出來,這樣一個簡單的帳號輸入就成功了。
也可以再加點裝飾,利用Icon。

 prefixIcon:Icon(Icons.person),
 suffixIcon:Icon(Icons.edit),

一樣寫在輸入帳號的程式碼下面,使用prefixIcon圖標可以在輸入的前面加入圖標,使用suffixIcon圖標可以在輸入的尾端加入圖。會讓使用者不會覺得登入的介面太單調,好提升使用者的使用意願。
https://ithelp.ithome.com.tw/upload/images/20220927/20151918O7MqcZvCnx.png

今日總結
今天因為比較忙,所以沒有太多的時間來完成今天的內容,所以我輸入框分今天和明天完成,今天只有寫非常簡單的程式碼,用到的東西只是冰山一角,明天的內容會更深入地去探討。
另外,我覺得今天學的輸入框用到的程式碼越來越複雜了,只能照著影片上學習,沒辦法舉一反三,我想,再之後我要去問GDSC社群的大佬們為甚麼要這樣寫,不然我也只能使用插件幫我完成大部分的程式碼。


上一篇
Day26-樣式+手勢
下一篇
Day28-輸入框(下)
系列文
初學軟體開發31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言