flutter + getx 用戶登錄

  1. 首先,我們需要在項目中添加 getflutter_secure_storage 依賴。在 pubspec.yaml 文件中添加以下內(nèi)容:
dependencies:
  flutter:
    sdk: flutter
 get: ^4.5.1 
  flutter_secure_storage: ^4.2.0
  1. 在我們的應(yīng)用程序中,我們需要創(chuàng)建一個 UserController 類來處理用戶身份驗證。在 lib/controllers/user_controller.dart 文件中添加以下內(nèi)容:
import 'package:flutter_secure_storage/flutter_secure_storage.dart'; 
import 'package:get/get.dart'; 

class UserController extends GetxController { 
  final storage = FlutterSecureStorage(); 
  String _token; 
  String get token => _token; 

  Future login(String email, String password) async { 
    // 這里寫登錄邏輯 
    // 成功登錄后,保存 token 
    _token = "xxxxxxxxxxxxxx"; 
    await storage.write(key: "token", value: _token); 
    return true; 
  } 
  
  Future logout() async { 
    // 刪除 token 
    await storage.delete(key: "token"); 
    _token = null; 
  } 
  
  Future checkLogin() async { 
    // 從 storage 中獲取 token,判斷是否已登錄 
    _token = await storage.read(key: "token"); 
    return _token != null; 
  } 
  
} 
  1. 創(chuàng)建 LoginPage 頁面,用于用戶登錄。在 lib/pages/login_page.dart 文件添加以下內(nèi)容:
import 'package:flutter/material.dart'; 
import 'package:get/get.dart'; 
import 'package:getx_login_demo/controllers/user_controller.dart'; 

class LoginPage extends StatelessWidget { 
  
  final UserController _userController = Get.put(UserController()); 
  
  @override 
  Widget build(BuildContext context) { 
    
    return Scaffold( 
      appBar: AppBar( title: Text("登錄"), ), 
      body: Center( 
        child: Column( 
          mainAxisAlignment: MainAxisAlignment.center, 
          children: [ 
            Container( 
              margin: EdgeInsets.symmetric(horizontal: 20), 
              child: TextFormField( 
                decoration: InputDecoration( labelText: "郵箱", ), 
                validator: (value) { 
                  if (value.isEmpty) { 
                    return "郵箱不能為空"; 
                  } 
                  return null; 
                }, 
              ), 
            ), 
            
            SizedBox( height: 10, ), 
            
            Container( 
              margin: EdgeInsets.symmetric(horizontal: 20), 
              child: TextFormField( 
                obscureText: true, 
                decoration: InputDecoration( labelText: "密碼", ), 
                validator: (value) { 
                  if (value.isEmpty) { 
                    return "密碼不能為空"; 
                  } 
                  
                  return null; 
                }, 
              ), 
            ), 
            
            SizedBox( height: 20, ), 
            
            ElevatedButton( 
              onPressed: () async { 
                var email = "test@test.com"; 
                var password = "123456"; 
                bool success = await _userController.login(email, password); 
                if (success) { 
                  Get.offAllNamed("/"); 
                } else { 
                  Get.snackbar("錯誤", "登錄失敗"); 
                } 
              }, 
              child: Text("登錄"),
            ),
          ], 
        ), 
      ), 
    ); 
  } 
  
} 
  1. 創(chuàng)建 HomePage 頁面,用于已登錄用戶。在 lib/pages/home_page.dart 文件添加以下內(nèi)容:
import 'package:flutter/material.dart'; 
import 'package:get/get.dart';
import 'package:getx_login_demo/controllers/user_controller.dart'; 

class HomePage extends StatelessWidget { 
  
  final UserController _userController = Get.find(); 
  
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        title: Text("首頁"), 
        actions: [ 
          IconButton( 
            icon: Icon(Icons.logout), 
            onPressed: () async { 
              await _userController.logout(); 
              Get.offAllNamed("/login"); 
            }, 
          ), 
        ], 
      ), 
      body: 
      Center( 
        child: Text("歡迎回來!"), 
      ), 
    ); 
  } 

} 
  1. 最后,在 lib/main.dart 中添加以下內(nèi)容:
import 'package:flutter/material.dart'; 
import 'package:get/get.dart';
import 'package:getx_login_demo/pages/home_page.dart'; 
import 'package:getx_login_demo/pages/login_page.dart'; 

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

class MyApp extends StatelessWidget { 

  @override 
  Widget build(BuildContext context) { 

    return GetMaterialApp( 
      title: 'Flutter Demo', 
      theme: ThemeData( 
        primarySwatch: Colors.blue, 
      ), 
      initialRoute: "/", 
      getPages: [ 
        GetPage(name: "/", page: () => HomePage()), 
        GetPage(name: "/login", page: () => LoginPage()), 
      ], 
    ); 
  } 
} 

現(xiàn)在,我們可以運(yùn)行應(yīng)用程序,并嘗試登錄。當(dāng)我們成功登錄后,我們將被重定向到主頁。當(dāng)我們點(diǎn)擊主頁上的“退出”按鈕時,我們將被重定向到登錄頁面。

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

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

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