들어가기 앞서...
스플래쉬란 앱의 초기 접속이나, 로딩 화면이 나올때 나오는 페이지라고 볼수 있다.
보통 모든 앱들은 스플래시 스크린이 존재한다.
목표 설정
- Asset 추가하기(이미지 )
- StatelessWidget 생성(위젯을 만드는 방법을 알것임)
- Column 위젯 (기본으로 제공해줌)
- CircularProgressIndicator 위젯 (기본으로 제공해줌)
- Image 위젯 (이미지를 띄우기 위함)
본문으로...
우선 이미지를 다운을 받고 사용하려고 하는 프로젝트에 붙여넣기를 해준다.
1. 기존에 동영상 강의에서 제공해주는 깃 주소해서 이미지 파일인 asset 만 복사한다.
2. 사용할 프로젝트 열고 오른쪽 마우스 Paste 클릭
그러면 asset 폴더가 잘 붙여진걸 확인 할 수 있다.
그럼, 이제 이미지를 사용할 수 있냐?
아니다! 플러터에서 따로 추가로 설정을 해줘야한다. test 폴더에서 pubspec.yaml 파일을 클릭해서 flutter : 공간 아래에다가 내가 가져온 이미지를 사용하겠다 라고 경로를 추가를 해줘야한다.
assets: -asset/img/logo.png 이렇게 추가하면 logo.png 만 쓰겠다라는 의미이니, logo.png 를 제거하고 요로코롬 작성해주자!
그리고 저장을 하면 pubspec 파일은 무조건 추가를 해주면 상단을 클릭해줘야한다.무조건!
무엇이든 변경을 하면 무조건!!! Pub get 클릭!
클릭하게 되면 터미널에 exit code 0으로 프로세스를 끝냈다! 이렇게 나와야만 우리가 추가한 asset 파일을 추가적으로 이 플러터 프로젝트에서 사용이 가능해진것이다.
코드 작성 시작
기존에 만든 helloWorld 출력 프로젝트로 진행을 하겠다.
runApp() 안에 계속 추가하게 되면 코드가 어마어마 해질것이다
정리를 하자 새로 위젯을 만들것이다. Scaffold 부터를 하나의 위젯을 만들어서 감쌀것이다.
우리는 명칭을 home 안에있는 코드를 스크린으로 명할 것이다. home Screen
최하단에 HomeScreen 클래스를 만들고 StatelessWidget 을 상속해주자!
단축키를 하나 기억하자!
StatelessWidget 을 상속을 해주면 절대적으로 오버라이드를 해줘야하기때문에 에러가 나는 것이다.
그리고 나서 위에 home 에 작성 한 Scaffold 코드를 이 안에 넣어준다.
그리고 class 를 따로 빼놨으니, home: 에 따로 뺴놓은 Class 를 넣어준다.
결국 기능은 똑같은데, 클래스를 따로 뺴서 작성한거라 결과물은 달라진 것은 없다.
하지만 이로써 얻은 장점이 있는데, 우리가 항상 수정하고 Hot-restart 를 눌러서 재실행했는데, 클래스로 따로 빼고 수정본을 확인하려면,
HotReload 를 통해서 확인이 가능하다!
Hot Reload 는 build 함수 안에 작성한 코드들만 재실행해준다.
그러한 이유로! 전에 연습한 HelloWorld 프로젝트에서 HotReload을 사용 못했던 이유는 우리가 MaterialApp 함수 안에 바로 작성을 했기 떄문이다.
꿀팁💡 코드 정리하는 방법 💡
Reformat Code ~ 클릭해서 커맨드 추가해서 사용하기
오른쪽 마우스 클릭해서 Reformat Code ~ 를 클릭해보자!
무슨 기준으로 바뀌냐! 괄호의 콤마를 기준으로 정리가 되는것을 볼수 있다!
매번 클릭해주기 개발 속도가 안나오니깐 커맨드를 추가해주자!
커맨드를 추가해주는법!
기본 설정에 kepMap 을 들어가 커맨드를 설정해주면 된다.
내가 이렇게 설정하고 사용하려했더니! 기존에 디폴트로 이렇게 설정이 되어있나보다!
잘 사용 되어진다!
우리가 만들기로 한 UI 만들기!
이제 수정을 좀 해보자!
body 의 child 안에 코드를 지우고 Image를 넣어보자!
기존 메소드로 Image안에 우리가 추가한 asset 이 있는것을 볼 수 있다.
그리고 경로를 추가해주자!
밑에 로딩 인디케이터를 추가해줄것인데!
Center 위젯안에 child를 이미 image 를 넣어줬기 떄문에 로딩인디케이터를 넣어줄 수가 없다!
그래서 Center 위젯 말고 다른 위젯을 추가해줘야한다. 하지만 Center 를 지우고 Image.asset(~~)를 잘라내서 복붙하기에는 귀찮다!
지워줄 때도 간단하고 빠르게 하는 방법이 있다!
꿀팁💡 위젯 빠르게 제거하는 방법 💡
option + enter 사용하기!
Remove this widget 클릭하면!!
부모 위젯을 지우고 자식 위젯이 바로 붙는것을 볼수 있다!
컬럼 세로, 로우는 가로! 라는 것을 기억해두자!
Column 이라는 위젯으로 감싸줄것이다!
이것도 귀찮으니깐, 빠르게 코드를 작성하기 위해서!
Image 에 커서를 두고! option + enter OR 오른쪽 마우스 클릭 해준다.
Wrap with Column -> Column 으로 감싸기
Column 이라는 위젯에 children 안에 넣어준것을 볼 수 있다.
children은 child 의 복수 형태라고 보면 된다!
지금 코드를 보면 Scaffold의 body 안에있는 파라미터만 특이한걸 볼 수있고, MaterialApp 의 home 이라는 파라미터도 특이한걸 볼수 있다.
대부분의 위젯들은 child 아니면 children 으로 되어있다.
child 는 자식 위젯 1개
children은 자식 위젯 1개 이상 을 넣을 수 있다! 이정도 차이만 있다.
Column 같은 경우, 디폴트로 가장 위로 위젯들을 배치해주게 된다.
가운데로 옮기고 싶다 하면?
Cloumn 에는 기본적으로 mainAxisAlignment 라는 파라미터가 있는데,
mainAxis -> 주축이라는 의미이다. 세로에서 주축은 그냥 세로이다.
Column에서는 주축과 반대축이라고있는데, Column의 주축은 당연히 세로! 반대축은 가로이다.
Row 에서는 Cloumn 과는 반대로! 주축은 가로! 반대축은 세로이다.
플러터에서 파라미터 값과 속성의 이름들이 같거나 비슷핱 경우가 되게 많을것이다!
이유는 플러터에서 인터넷 검색하지말고 편하게 바로 사용하라는 의미이다.
Column 에서의 children 위젯들을 가운데로 보내기 위한 방법으로 MainAxisAlignment의 center 메소드 사용했다!
이제 로딩 바를 넣어줄것이다.
이름을 외우자! CircularProgressIndicator()
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.orange,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('asset/img/logo.png'),
CircularProgressIndicator(
color: Colors.white,
),
],
),
);
}
}배경화면 같게 해주려고 비슷한 background-color : orange 추가
하지만 완전히 똑같이 백그라운드로 맞추고 싶다!
그래서 코드를 약간 수정해주었다!
꿀팁💡 상단 DEBUG 삭제하는 방법 💡
거슬린다면 안보이게 처리 가능하다!
MaterialApp위젯 안 에 debugShowCheckedModeBanner 파라미터 추가 해주기!
상단의 DEBUG 가 보기 싫다면 안보이게 할 수는 있다!
끝으로...
- 프로젝트에 asset 이미지 파일을 새로 추가해주고, pubspec.yaml 파일에 경로 설정해줄 수 있다!
- 클래스를 따로 뺴서 적용 할 수 있으며, StatelessWidget 을 상속을 해 오버라이드 하는 방법을 배웠다!
- asset 폴더의 Image.asset()으로 이미지를 불러올 수 있다!
- HotRead 와 HotRestart 를 하는 조건을 알고 차이점을 알았다!
- 위젯 감싸기를 커맨드로 빠르게 할 수 있다!
- 커맨드를 따로 추가하는 방법을 배웠다!
- IOS 시뮬레이터의 상단 디버그 표시를 지울 수 있다!
'⭐️ 개발 > 플러터' 카테고리의 다른 글
| [꿀팁, 에러] 플러터에서 Run main.dart가 안될때 (0) | 2022.10.27 |
|---|---|
| [이론] Row and Column (2) MainAxisAlignment (2) | 2022.10.26 |
| [이론] Row and Column (1) 세팅하기 (0) | 2022.10.26 |
| [프로젝트] Hello World 출력하기! (0) | 2022.10.23 |
| 플러터 첫번째 (0) | 2022.10.21 |