login 화면 design

기본 page만들기

no custom widget

기본 page를 만들때, 보통 2가지 방식이 쓰인다. custom widget을 사용하지 않는 경우, 예를 들면,

void main(){
  runApp(MaterialApp(home:Scaffold(body: Center(child: Text('test')))));
}

이렇게 기본 widget으로 page를 만드는 경우가 있다. 보통 빠르게 page를 보여줄때 만든다. 하지만, 이것은 static한 화면이고 아무것도 할수 없다.

custom widget

materialApp 부분을 MyApp이란 custom page로 만들어버린다. 나는 아래와 같은 custom widget을 사용해서 기본 page를 만들었다. snippet으로 basic2라는 이름으로 저장했다.

void main(){
  runApp(const MyApp())

}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LoginPage(),
    );
  }
}

Login page는 pages/loginPage.dart에 기술했다.

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
    body: safeArea(
      )
    );
  }
}

image처리

login으로 사용할 google, apple image를 다운 받았다. lib/images라는 폴더를 만들고 넣어 놓았다. image를 project 폴더에 넣는다고 끝나지 않는다. pubspec.yaml에 assets에 넣어야 한다. 아래처럼 폴더 경로만 기입해서 넣는다.

lib/images

page 처리

scaffold에서 column으로 widget들을 배치한다. scaffold의 body에는 보통 notch때문에 safearea widget을 넣는다. safearea의 child로 column을 넣는데, column에 들어가는 정보는 다음과 같다.

1. logo
2. welcome back
3. username textfield
4. password textfield
5. forgot password
6. sign in button
7. or continue with
8. google + apple sign in buttons
9. not a member? register now

logo

logo를 material에서 제공하는 icon을 사용할 수 있다. Icon()을 사용하면 된다. 인자로는 Icons.lock, size:100같은 정보를 사용한다.