Login Page UI in Flutter

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Welcome", style: TextStyle(fontSize: 32.0)),
            SizedBox(height: 24.0),
            TextFormField(
              decoration: InputDecoration(
                hintText: "Email",
              ),
            ),
            SizedBox(height: 12.0),
            TextFormField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: "Password",
              ),
            ),
            SizedBox(height: 24.0),
            RaisedButton(
              child: Text("Login"),
              onPressed: () {},
            ),
            SizedBox(height: 12.0),
            Text("Forgot your password?"),
            SizedBox(height: 12.0),
            Text("Don't have an account? Sign up"),
          ],
        ),
      ),
    );
  }
}

이 예에서는 Scaffold 위젯을 로그인 페이지의 루트로 사용하고 있습니다. Scaffold 내부에는 로그인 양식 요소가 포함된 열 위젯이 있습니다. Column은 Padding 위젯으로 채워지고 해당 mainAxisAlignment가 MainAxisAlignment.center로 설정되어 양식 요소가 화면에서 수직으로 중앙에 배치됩니다.

양식 요소에는 각각 이메일과 비밀번호를 수집하는 데 사용되는 두 개의 TextFormField 위젯이 포함되어 있습니다. 각 TextFormField에는 필드가 비어 있을 때 표시되는 힌트 텍스트와 같이 필드의 모양을 사용자 지정하는 데 사용되는 데코레이션 속성이 있습니다. 암호 필드에는 필드에 입력한 문자가 가려지도록 obscureText 속성이 true로 설정되어 있습니다.

양식 필드 아래에는 양식을 제출하는 데 사용되는 RaisedButton 위젯이 있습니다. onPressed 속성은 빈 함수로 설정되며, 양식 제출을 처리하기 위해 자신의 함수로 바꿀 수 있습니다.

로그인 버튼 아래에는 비밀번호 재설정 페이지와 가입 페이지에 대한 링크를 제공하는 텍스트가 있습니다.

이것은 간단한 예이지만 필요에 따라 사용자 정의하고 최적화할 수 있습니다. 이것은 로그인 시스템의 전체 구현이 아니며 단지 UI만 표시하고 유효성 검사 논리, API 호출, 응답 처리 등을 처리해야 합니다.