로그인 화면 예제 따라해보기

그냥 갑자기 정보를 찾아가면서 코딩을 하려니까 너무 막막했다.

그래서 다른 로그인 화면 예제를 따라해보면서 익히기로 했다. 

 

예제 자료

https://www.youtube.com/watch?v=ExKYjqgswJg&t=1261s 

assets 파일들 추가하기 

우선 assets 폴더안에 icons와 images 폴더를 넣고 안에 파일들을 넣었다.

svg를 사용하기 위해서 pubspec.yaml 파일에서 flutter_svg: ^0.17.4 추가했다.

 

그리고 flutter: 바로 밑에다가 다음과 같이 추가해주었다. (이렇게 바로 밑에다가 안하면 오류 나더라 ^^ )

 

 

constants 파일 생성 

constants.dart 파일을 생성해주고 다음과 같이 주요한 색상들은 저장해 놓는다. 

 

 

welcome_screen.dart 파일 생성 

 

main.dart에서 불러오기 

import 할 때 주의 점이 import 'package: 프로젝트이름/폴더명~/ 파일' 이런식으로 지정해주어야 한다는 것이다.

(앞의 프로젝트 이름을 넣어주는 것을 몰라서 계속 해맸다. )

ThemeData()를 이용하여 기본 테마를 설정해주었고,

home: WelcomeScreen()으로 아까 stateless 위젯 만들어주었던 것을 불러와준다.

 

 

배경에 이미지 넣어주기 

다음과같이 components 폴더에 body.dart를 생성하고 StatelessWidget으로 형성한다. 

 

이를 welcome_sceen.dart에 body: Body()를 추가해준다. 

 

 

MediaQuery 이용해보기 

Size size = MediaQuery.of(context).size;

이렇게 입력을 하면 스크린의 전체 높이와 넓이를 제공하기 때문에 사용할 수 있다. 

 

 

배경이미지 불러오기 

Stack()은 가장자리 기준으로 위젯을 서로 겹치게 배치해주고 싶을 때 이용한다.  

Positioned()는 Stack() 자식의 위치를 조절할때 쓰인다. 

넓이 같은 경우는 width: size.width *0.3 => 하면 전체넓이의 0.3을 차지하는 크기가 지정된다. 

 

 

 

https://api.flutter.dev/flutter/widgets/Stack-class.html

Stack class - widgets library - Dart API

https://chal-kak.tistory.com/156

Flutter : Stack 위젯은 뭐 할 때 쓰는 거지?

https://api.flutter.dev/flutter/widgets/Positioned-class.html

Positioned class - widgets library - Dart API

 

마찬가지로 이미지 하나 더 추가해준다. 

 

 

Background widget으로 바꿔주기 

Container쪽에 오른쪽 마우스 클릭 후에 Refactor => Extract Flutter Widgetd을 누른다.

Widget name: Background 로 해준다. 

 

다음 아래와 같이 코드를 약간 수정한다. 

import 'package:flutter/material.dart';

class Body extends StatelessWidget {
  const Body({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    //이 사이즈는 스크린의 전체 높이와 넓이를 제공한다.
    return Background(child: Column(
      children: <Widget>[],
    ));
  }
}

class Background extends StatelessWidget {
  final Widget child;
  const Background({
    Key? key,
    required this.child,
  }) : super(key: key);



  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
        height: size.height,
        width: double.infinity,
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Positioned(
              top: 0,
              left: 0,
              child: Image.asset(
                'assets/images/main_top.png',
                width: size.width * 0.3,
              ),
            ),
            Positioned(
              bottom:0,
              left: 0,
              child: Image.asset('assets/images/main_bottom.png'),
              width: size.width * 0.2,
            ),
            child,
          ],
        ));
  }
}

 

background.dart로 컴포넌트 분리

body.dart에서 Class Background 이하를 background.dart로 새로운 파일안에 복사 붙여넣기 한다.

 

body.dart에 분리된 파일을 불러오기 한다.