[flutter] 플러터(IndexedStack)를 사용하여 로그인 및 회원가입 페이지를 작성할 수 있나요?

07 Dec 2023

flutter

먼저, 플러터 프로젝트를 생성하고 필요한 패키지를 import 합니다.

import 'package:flutter/material.dart';

다음으로, 로그인 페이지와 회원가입 페이지를 구현합니다. 예를 들어, 로그인 페이지는 TextFormField를 사용하여 이메일과 비밀번호를 입력받는 형태로 만들 수 있습니다.

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('로그인'),
      ),
      body: Center(
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(hintText: '이메일'),
            ),
            TextFormField(
              decoration: InputDecoration(hintText: '비밀번호'),
            ),
            ElevatedButton(
              onPressed: () {
                // 로그인 처리 로직
              },
              child: Text('로그인'),
            ),
          ],
        ),
      ),
    );
  }
}

회원가입 페이지도 비슷한 방식으로 구현할 수 있습니다.

class SignUpPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('회원가입'),
      ),
      body: Center(
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(hintText: '이름'),
            ),
            TextFormField(
              decoration: InputDecoration(hintText: '이메일'),
            ),
            TextFormField(
              decoration: InputDecoration(hintText: '비밀번호'),
            ),
            ElevatedButton(
              onPressed: () {
                // 회원가입 처리 로직
              },
              child: Text('회원가입'),
            ),
          ],
        ),
      ),
    );
  }
}

마지막으로, IndexedStack 위젯을 사용하여 로그인 페이지와 회원가입 페이지를 스택으로 관리하고 필요한 인덱스에 따라 해당 페이지를 보여줍니다.

class LoginSignupPage extends StatefulWidget {
  @override
  _LoginSignupPageState createState() => _LoginSignupPageState();
}

class _LoginSignupPageState extends State<LoginSignupPage> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: currentIndex,
        children: [
          LoginPage(),
          SignUpPage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (index) {
          setState(() {
            currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.login),
            label: '로그인',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_add),
            label: '회원가입',
          ),
        ],
      ),
    );
  }
}

이렇게 구현하면 IndexedStack을 사용하여 로그인 페이지와 회원가입 페이지를 간단하게 작성할 수 있습니다. 필요에 따라 로그인 처리와 회원가입 처리 로직을 추가하여 완성할 수 있습니다.

참고로, 이 예시는 간단한 형태의 페이지 구현 방법을 보여주기 위한 예시일 뿐이며, 실제 애플리케이션에서는 보안과 사용자 경험을 고려하여 추가적인 기능과 예외 처리가 필요할 수 있습니다.