[flutter] 플러터 스택드 위젯을 사용하여 간단한 로그인 화면 구현하기

15 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 UI 툴킷으로, 모바일 앱 및 웹 애플리케이션을 빌드하는 데 사용됩니다. 스택(Stack) 위젯은 화면에 여러 위젯을 겹쳐서 표시할 수 있는데, 이를 이용하여 간단한 로그인 화면을 구현해 보겠습니다.

1. 프로젝트 생성 및 의존성 추가

먼저, 새로운 플러터 프로젝트를 생성하고 필요한 의존성을 추가합니다. pubspec.yaml 파일에 다음과 같이 필요한 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^2.3.0

의존성을 추가한 후에는 flutter pub get 명령어로 패키지를 다운로드합니다.

2. 스택 위젯을 사용한 로그인 화면 구성

간단한 로그인 화면을 만들기 위해 다음과 같은 위젯을 사용하여 스택을 구성합니다.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          // 배경 이미지
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/background.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          // 로고 및 입력 필드
          Center(
            child: Column(
              // Center를 이용해 화면 중앙에 배치
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset('assets/logo.png'),
                SizedBox(height: 20),
                // 입력 필드 및 로그인 버튼 등을 구성
                // ...
              ],
            ),
          ),
        ],
      ),
    );
  }
}

이제 LoginScreen 위젯을 앱의 첫 화면으로 설정하고 앱을 실행하면, 스택 위젯을 활용한 간단한 로그인 화면이 나타날 것입니다.

마무리

이렇게 플러터의 스택 위젯을 사용하여 간단한 로그인 화면을 구현해 보았습니다. 스택 위젯을 이용하면 여러 위젯을 겹쳐서 화면을 구성할 수 있어 다양한 UI를 구현할 수 있습니다. 완성된 화면은 다른 위젯과 조합하여 더 다채로운 앱 화면을 만들 수 있습니다.