이제 배운내용을 토대로 간단하게 화면 로딩 부분을 구현해보려고 한다!
현업에서 실제 앱 개발 순서 & 폴더를 나누는 기준 & 플러그인 추가 방법!
현업에서 실제 앱을 만들려고 한다면 이 순서로 주로 진행이 된다고 한다
기획 -> UI 구상하기 -> 구현하기 -> 테스트 해보기
더 많이 내부에 상세하게 있겠지만 현재는 이정도로 큰 범주로 봐보려고한다.
안드로이드 스튜디오에서 프로젝트 폴더를 나누는 기준
-
screen : 스크린 전체에 해당하는 위젯들 모아두는 폴더
-
component : 스크린을 구성하는데 공통으로 사용할 만한 요소의 위젯들을 모아두는 폴더
-
model : 모델들을 따로 모아두는 폴더
-
const : 상수들을 따로 모아두는 폴더
플러그인 추가 방법
외부 플러그인이나 이미지를 가져오기, 폰트 등을 가져온다면 항상 pubspec.yml에 지정을 해줘야한다!
만약 외부 플러그인을 가져온다면 dependencies안에 flutter에 적어주면 된다
splash_screen 앱 만들기!
하나의 그림과 아래는 로딩이 원형태로 돌아가는 애니메이션을 추가한 로딩 화면입니다.
순서
- 이미지를 가져오고 assets폴더에 넣어주기
- assets폴더에 이미지 가져온 걸 pubspec.yml에 적어주기
- 코드에 이미지 넣는 코드 추가하기
- 애니메이션 관련 코드 추가하기
- Row Column 으로 맨 가운데 정렬하기
이미지 가져와서 화면에 지정하기
이미지를 넣을 폴더를 미리 만들어줘야한다! -> assets라는 이름으로 폴더를 한개 만들어줬다
그리고 pubspec.yml에 있는 flutter: 부분에 이미지를 지정했다고 추가해준다
이걸 안하게 되면 이미지가 화면에 구현되지 않는다!!
row & column와 mainAxisAlignment를 활용한 화면 정렬
import 'package:flutter/material.dart';
void main() {
runApp(SplashScreen());
}
class SplashScreeen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: (
Container: (
decoration: BoxDecoration(
color: Color(0xFFF99231),
),
child: (
Row(
mainAxisAlignment: MainAxisAlignment.Center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.Center,
children: [
Image.asset('assets/logo.png', width: 200),
CirculatorProgressIndicator(
AlwaysStoppedAnimation(
Colors.white
),
),
],
),
],
),
),
),
),
),
);
}
}차고로 Row는 가로는 전부채우려고 하고 세로는 그 데이터 크기만큼만 최소로 채운다
Column은 Row와 반대로 세로만 전부 채우려고 하고 가로는 그 데이터 크기만큼 최소로 채운다!
Row & Column을 같이 적게 되면 딱 그 이미지만큼만 채운다! -> 이건 Container의 컬러를 바꿔보면서 검증했다!
피드백 & 다짐
42서울이 비상이다...! 10기가 마지막이 될 수도 있을거 같다는 불안감이 오는 가운데
플러터를 더 집중적으로 공부해보기로 결정했다
이걸 통해 매달 대회를 나가고, 실력을 쌓으며 이 분야로 가봐야겠다!
