[flutter] FloatingActionButton을 사용하여 로그인 기능 구현하기

11 Dec 2023

flutter

Flutter 앱에 로그인 기능을 구현하는 것은 일반적인 작업입니다. 보편적으로 사용되는 구현 방법 중 하나는 FloatingActionButton을 사용하는 것입니다. 이번 포스트에서는 Flutter에서 FloatingActionButton을 활용하여 로그인 기능을 간단히 구현하는 방법을 알아보겠습니다.

1. FloatingActionButton 추가하기

먼저, Scaffold 위에 FloatingActionButton을 추가해야 합니다. 이를 위해 Scaffold의 floatingActionButton 속성을 사용합니다.

Scaffold(
  appBar: AppBar(
    title: Text('로그인'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // 로그인 기능 구현
    },
    tooltip: '로그인',
    child: Icon(Icons.login),
  ),
  body: // 로그인 화면 UI 구현
);

2. 로그인 기능 구현하기

FloatingActionButton이 클릭되었을 때 실행될 함수를 작성합니다. 예를 들어, 간단한 다이얼로그를 통해 로그인 성공을 알리는 기능을 구현할 수 있습니다.

void _login() {
  // 로그인 로직 구현
  // 성공 시 다이얼로그 표시
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('로그인 성공'),
        content: Text('로그인되었습니다.'),
        actions: <Widget>[
          FlatButton(
            child: Text('확인'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

3. 전체 코드 예시

전체적으로 아래와 같이 코드가 구성될 수 있습니다.

import 'package:flutter/material.dart';

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

class LoginApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('로그인'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            _login();
          },
          tooltip: '로그인',
          child: Icon(Icons.login),
        ),
        body: // 로그인 화면 UI 구현
      ),
    );
  }

  void _login() {
    // 로그인 로직 구현
    // 성공 시 다이얼로그 표시
    // ...
  }
}

위의 예시 코드를 참고하여 Flutter에서 FloatingActionButton을 사용하여 간단한 로그인 기능을 구현할 수 있습니다. 안전한 로그인 및 사용자 인증을 위해 Firebase나 다른 백엔드 서비스를 통합하는 것을 고려해볼 수 있습니다.

이상으로, Flutter에서의 FloatingActionButton을 활용한 간단한 로그인 기능 구현에 대해 알아보았습니다.

참고 자료: Flutter 공식 문서