[flutter] 플러터 sticky 헤더를 가진 로그인 페이지 만들기

30 Nov 2023

flutter

이번 블로그 포스트에서는 플러터(Flutter)를 사용하여 Sticky 헤더를 가진 로그인 페이지를 만들어 보겠습니다.

1. 개요

로그인 페이지는 애플리케이션의 사용자 인증을 위해 매우 중요한 부분입니다. 플러터를 사용하여 로그인 페이지를 만들 때, 사용자 경험을 향상시키기 위해 Sticky 헤더를 추가하는 것이 좋습니다. Sticky 헤더는 스크롤되더라도 항상 화면 상단에 고정되는 헤더를 말합니다.

2. 프로젝트 설정

먼저, Flutter 개발 환경을 설정해야 합니다. Flutter SDK를 설치한 후, IDE나 터미널에서 새로운 Flutter 프로젝트를 생성합니다.

flutter create sticky_header_login
cd sticky_header_login

3. UI 디자인

로그인 화면에는 로고, 입력 필드 및 버튼이 필요합니다. 본 예제에서는 Material Design을 기반으로 UI를 디자인합니다.

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.symmetric(vertical: 40),
              child: Text(
                'My App',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            TextField(
              decoration: InputDecoration(
                labelText: '이메일',
              ),
            ),
            TextField(
              decoration: InputDecoration(
                labelText: '비밀번호',
              ),
            ),
            RaisedButton(
              onPressed: () {
                // TODO: 로그인 기능 구현
              },
              child: Text('로그인'),
            ),
          ],
        ),
      ),
    );
  }
}

4. Sticky 헤더 구현

Sticky 헤더를 구현하기 위해 CustomScrollView 위젯을 사용합니다. 여기에 SliverAppBar를 추가하여 Sticky 헤더를 생성합니다.

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: CustomScrollView(
          slivers: [
            SliverAppBar(
              // Sticky 헤더 설정
              pinned: true,
              expandedHeight: 200, // 헤더의 높이
              flexibleSpace: FlexibleSpaceBar(
                title: Text('로그인'),
              ),
            ),
            SliverList(
              delegate: SliverChildListDelegate([
                Container(
                  padding: EdgeInsets.symmetric(vertical: 40),
                  child: Text(
                    'My App',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                TextField(
                  decoration: InputDecoration(
                    labelText: '이메일',
                  ),
                ),
                TextField(
                  decoration: InputDecoration(
                    labelText: '비밀번호',
                  ),
                ),
                RaisedButton(
                  onPressed: () {
                    // TODO: 로그인 기능 구현
                  },
                  child: Text('로그인'),
                ),
              ]),
            ),
          ],
        ),
      ),
    );
  }
}

5. 로그인 기능 추가

로그인 기능은 별도의 비즈니스 로직을 추가하여 구현해야 합니다. 예제에서는 로그인 버튼을 누르면 경고 메시지를 출력하는 기능만 구현했습니다.

RaisedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('로그인'),
          content: Text('로그인 버튼을 눌렀습니다.'),
          actions: [
            FlatButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text('확인'),
            ),
          ],
        );
      },
    );
  },
  child: Text('로그인'),
),

6. 마무리

이제 플러터를 사용하여 Sticky 헤더를 가진 로그인 페이지를 만드는 방법에 대해 알아보았습니다. Sticky 헤더는 사용자 경험을 향상시키고, 애플리케이션의 전반적인 UI를 개선하는 데 매우 유용한 기능입니다. 추가적인 기능을 구현하고 디자인을 개선해나갈 수 있습니다.

참고 자료:

샘플 코드는 여기에서 확인할 수 있습니다.

목차