大家好，這裡是
【whycode】
今天我們來用
dart+flutter
框架擼一個APP登入介面。
先貼效果圖
效果圖
思維導圖
思維導圖
背景
使用deepPurple為基礎色，調整不透明度讓整個頁面的顏色從左至右依次變化。
背景code
將BoxDecoration作為實參傳入Container。用線性梯度變化來修飾BoxDecoration的顏色變化，設定顏色變化起點為左側中間。
icon
flutter自帶Google Material設計的所有圖示字型，透過Icons。xxx呼叫，這裡使用了account_circle圖示演示。
color引數設定圖示顏色，size引數設定圖示大小，這裡設定圖示大小為100。
icon code
在
https://material.io/resources/icons/?style=baseline
可以瀏覽Material自帶的所有圖示。
material icon
輸入框
圓角
圓角code
為使兩端圓角均是半圓形，使用BoxDecoration中的borderRadius設定圓角直徑為100。如果將username圓角的直徑設定小一點，比如設定為12。
可以看到uername輸入框四個角變成了圓弧形狀。
接收輸入
在Cantainer中新增一個TextField子控制元件。
輸入code
登入按鈕
登入按鈕使用扁平按鈕FlatButton，設定FlatButton的shape引數能達到調整按鈕形狀的目的。
登入button code
程式碼中使用了長方形設定按鈕圓角直徑為100。
忘記密碼按鈕
使用圖示扁平按鈕FlatButton。icon。
忘記密碼button code
FlatButton。icon中icon引數設定按鈕圖示種類和樣式，label設定按鈕文字提示。
