그냥 갑자기 정보를 찾아가면서 코딩을 하려니까 너무 막막했다.
그래서 다른 로그인 화면 예제를 따라해보면서 익히기로 했다.
예제 자료
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
https://chal-kak.tistory.com/156
https://api.flutter.dev/flutter/widgets/Positioned-class.html
마찬가지로 이미지 하나 더 추가해준다.
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에 분리된 파일을 불러오기 한다.
'🕊 Flutter > 프로젝트(교양과목 커뮤니티 앱)' 카테고리의 다른 글
로그인 기능 구현 (0) | 2022.06.10 |
---|---|
2022.04.06 (0) | 2022.04.06 |