我報名參加金石計劃1期挑戰——瓜分10萬獎池，這是我的第4篇文章，點選檢視活動詳情

本文，我將解析怎麼前構建一個使用者互動的登入頁面。這裡，我使用 TextField 掛件，這方便使用者輸入使用者名稱和密碼。還使用 FlatButton 掛件，來處理一些動作。當然，我還使用了 Image 掛件來設定登入頁面的 logo。

效果圖如下：

第一步： main() 函式

dart import 'package:flutter/material.dart';void main() { runApp(MyApp()); }class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: LoginDemo(), ); } }

這個 main() 函式也就是應用的入口。MyApp 類中添加了一個 LoginDemo 類作為 home 屬性的引數。

第二步：class LoginDemo

設定腳手架的 appBar 屬性來作為應用的標題，如下：

dart appBar: AppBar( title: Text('Login Page'), ),

在本次的 UI 佈局中，所有的掛件都會放在 Column 掛件中，然後存放在腳手架的 body 中。Column 中的第一個是存放 Container 掛件，用來處理 Image 掛件。

dart Container( height: 150.0, width: 190.0, padding: EdgeInsets.only(top: 40), decoration: BoxDecoration( borderRadius: BorderRadius.circular(200), ), child: Center( child: Image.asset('asset/images/flutter-logo.png'), ), ),

flutter-logo.png 檔案存放在 asset/images 資料夾中。我們需要在 pubspec.yaml 檔案中配置路徑。

```dart

To add assets to your application, add an assets section, like this:

assets: - asset/images/ ```

新增完資源之後，我們可以執行應用了。

然後，使用 TextField 掛件處理使用者名稱和密碼。 TextField 掛件是一個輸入掛件，幫助我們處理使用者的輸入資訊。

dart Padding( padding: EdgeInsets.all(10), child: TextField( decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'User Name', hintText: 'Enter valid mail id as [email protected]' ), ), ), Padding( padding: EdgeInsets.all(10), child: TextField( obscureText: true, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Password', hintText: 'Enter your secure password' ), ), ),

這裡的 Padding 掛件能夠幫助你設定 TextField 掛件的內邊距。

obscureText 屬性值為 true 的時候，幫助我們對 TextField 展示特殊的字元，而不是真正的文字。

我們使用 FlatButton 掛件來處理忘記密碼

dart FlatButton( onPressed: (){ //TODO FORGOT PASSWORD SCREEN GOES HERE }, child: Text( 'Forgot Password', style: TextStyle(color: Colors.blue, fontSize: 15), ), ),

onPressed() 這個函式中，我們可以處理頁面跳轉或者其他的點選邏輯。

對於登入按鈕，我們使用 FlatButton 掛件，但是我們得裝飾一下，這裡我們使用 Container 進行包裹。

dart Container( height: 50, width: 250, decoration: BoxDecoration( color: Colors.*blue*, borderRadius: BorderRadius.circular(20), ), child: FlatButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (_) => HomePage()), ); }, child: Text( 'Login', style: TextStyle(color: Colors.*white*, fontSize: 25), ), ), ),

上面我們設定了 Container 掛件的 height 和 width 屬性，所以 flatbutton 也會獲取到相同的高度和寬度。

decoration 屬性允許我們設計按鈕，比如顏色 colorColors.blue 和 borderRadiusBorderRadius.circular(20) 屬性。

最後指定 Text 掛件以為新使用者建立賬號

這裡我們可以通過 GestureDetector 掛件的 onTap() 功能進行導航操作。或者建立類似忘記密碼按鈕的 onPressed() 事件。

這裡是整個專案的完整程式碼：

```dart // lib/HomePage.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); }

class _HomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Page'), ), body: Center( child: Container( height: 80, width: 150, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(10)), child: FlatButton( onPressed: () { Navigator.pop(context); }, child: Text( 'Welcome', style: TextStyle(color: Colors.white, fontSize: 25), ), ), ), ), ); } } ```

```dart // lib/main.dart import 'package:flutter/material.dart';

import 'HomePage.dart';

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: LoginDemo(), ); } }

class LoginDemo extends StatefulWidget { @override _LoginDemoState createState() => _LoginDemoState(); }

class _LoginDemoState extends State { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( title: Text("Login Page"), ), body: SingleChildScrollView( child: Column( children: [ Padding( padding: const EdgeInsets.only(top: 60.0), child: Center( child: Container( width: 200, height: 150, /decoration: BoxDecoration( color: Colors.red, borderRadius: BorderRadius.circular(50.0)),/ child: Image.asset('asset/images/flutter-logo.png')), ), ), Padding( //padding: const EdgeInsets.only(left:15.0,right: 15.0,top:0,bottom: 0), padding: EdgeInsets.symmetric(horizontal: 15), child: TextField( decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Email', hintText: 'Enter valid email id as [email protected]'), ), ), Padding( padding: const EdgeInsets.only( left: 15.0, right: 15.0, top: 15, bottom: 0), //padding: EdgeInsets.symmetric(horizontal: 15), child: TextField(

            obscureText: true,
            decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Password',
                hintText: 'Enter secure password'),
          ),
        ),
        FlatButton(
          onPressed: (){
            //TODO FORGOT PASSWORD SCREEN GOES HERE
          },
          child: Text(
            'Forgot Password',
            style: TextStyle(color: Colors.blue, fontSize: 15),
          ),
        ),
        Container(
          height: 50,
          width: 250,
          decoration: BoxDecoration(
              color: Colors.blue, borderRadius: BorderRadius.circular(20)),
          child: FlatButton(
            onPressed: () {
              Navigator.push(
                  context, MaterialPageRoute(builder: (_) => HomePage()));
            },
            child: Text(
              'Login',
              style: TextStyle(color: Colors.white, fontSize: 25),
            ),
          ),
        ),
        SizedBox(
          height: 130,
        ),
        Text('New User? Create Account')
      ],
    ),
  ),
);

} } ```

本文采用意譯的方式翻譯。原文 https://levelup.gitconnected.com/login-page-ui-in-flutter-65210e7a6c90

Flutter 實現登入 UI

第一步： main() 函式

第二步：class LoginDemo

To add assets to your application, add an assets section, like this:

推薦閱讀