[Flutter] 스나이퍼팩토리 Flutter 기초과정 (3)

GONG·2023년 3월 24일

flutter 스나이퍼팩토리

스나이퍼팩토리 Flutter

목록 보기

3/44

3일차 과제(+미션) 링크 👉 3일차 과제(+미션)

위젯의 속성

위젯마다 각각 원하는 설정을 할 수 있는 특수한 값들
위젯마다 사용할 수 있는 속성이 다르다.
“일반적으로” 자식위젯 사용시 child 속성이름값을 사용한다.
속성마다 들어갈 수 있는 데이터 타입이 정해져있다.
IDE에서 코드의 위젯들에 각각 마우스를 올려보면 설명서가 나온다.

설명서를 통해 무슨 데이터타입이 들어가야하는지 알 수 있다.

→ 다 외우지 않아도 된다!

❗하지만…
- 설명서에 데이터타입이 조금 다르게 나올 수도 있다.
- 막 따라서 적는다고 해도 안 되는 경우가 있다.
- 이럴 때는 해당 위젯을 검색하여 예제를 확인하는 것이 빠르다.

Column 위젯

세로로 위젯을 나열할 때 사용
자식 “들”을 가질 수 있는 위젯 (child ❌, children ⭕)
children에는 데이터타입이 List인 것만 넣어줄 수 있다.

Column(
  children: [
    Text('Widget: 1'),
    Text('Widget: 2'),
  ],
)

Row 위젯

가로로 위젯을 나열할 때 사용
자식 “들”을 가질 수 있는 위젯 (child ❌, children ⭕)
children에는 데이터타입이 List인 것만 넣어줄 수 있다.

Row(
  children: [
    Text('Widget: 1'),
    Text('Widget: 2'),
  ],
)

연습

ListTile 위젯

구글 머티리얼디자인의 ListTile을 표현하기 위한 디자인된 위젯
https://m2.material.io/components/lists

title : 제목, Widget 데이터만 들어갈 수 있다.
subtitle : 부제목, Widget 데이터만 들어갈 수 있다.

ListTile(
  title: Text('홍길동'),
  subtitle: Text('010-0000-0000'),
),

leading : 앞에 위젯 추가
trailing : 뒤에 위젯 추가

Padding 위젯

자식에게 패딩(간격)을 원하는 만큼 띄우고 싶을 때 사용
간격을 띄우는 방법은 3가지지만, 오늘은 padding만 배움
child에는 Widget 데이터만 들어갈 수 있다
padding에는 EdgeInsets 데이터만 들어갈 수 있다

Padding(
  padding: EdgeInsets.all(8),
  child: Text('안녕하세요'),
)

연습

SizeBox 위젯

자식위젯에게 사용할 수 있는 공간(크기)를 정해줄 때
height : 높이. double, int의 값을 줄 수 있다.
width : 너비. double, int의 값을 줄 수 있다.

현업 Tip) Column이나 Row의 자식들 사이사이에 간격을 넣고 싶을 때도 사용함 (간격 띄우는 방법 2)
- 추가 지식) Center 위젯은 본인이 가질 수 있는 최대의 너비/높이를 기준으로 자식에게 가운데를 제공한다.

Container 위젯 ⭐

중요
자식위젯에게 사용할 수 있는 공간(크기)를 정해줄 때
예쁘게 내 자식을 포장해서 보여주고 싶을 때 (색상넣기, 둥글게하기, 그림자넣기 등)

Container(
  width: 300,
  height: 300,
  child: Text('안녕하세요'),
)

색상 넣기

Container(
  width: 300,
  height: 300,
  child: Text('안녕하세요'),
)

Decoration 넣기
decoration은 컨테이너의 모든 디자인요소를 수정할 수 있다.
decoration 속성을 사용할 때는 반드시 color 속성이 decoration을 통해 사용되어야 한다.

Container(
  // color: Colors.indigo,
  width: 300,
  height: 300,
  child: Text('안녕하세요'),
  decoration: BoxDecoration(),
)

Decoration 여러가지 속성 넣어보기

Container(
  width: 300,
  height: 300,
  child: Text('안녕하세요'),
  decoration: BoxDecoration(
    color: Colors.indigo,           // 색
    border: Border.all(),           // 테두리
    borderRadius: BorderRadius.circular(24),    // 테두리 둥글게
    gradient: LinearGradient(       // 그라데이션
      begin: Alignment.topLeft,     // 그라데이션 시작
      end: Alignment.bottomRight,   // 그라데이션 끝
      colors: [                     // 그라데이션 색
        Colors.red,
        Colors.blue,
      ]
    ),
    boxShadow: [                    // 그림자
      BoxShadow(
        color: Colors.black12,      // 그림자 색
        blurRadius: 4,              // 그림자 흐리게
        spreadRadius: 8,            // 그림자 효과 반경
        offset: Offset(30, 30),     // 그림자 위치. Offset(x축, y축)
      )
    ]
  ),
)

현업 Tip)
- margin을 통해 현재 위치에서 떨어지는 간격을 넣어주고 싶을 때 margin: EdgeInsets.all(24) (간격 띄우는 방법 3)
- Text만큼 가장 기본적. 제일 많이 쓰이는 위젯 중 하나
- alignment를 통해 자식이 보여질 위치를 결정할 수 있다. (Center와 같이) alignment: Alignment.center
- padding이 있어서, 부모로 따로 Padding 위젯을 쓸 필요가 없다. padding: EdgeInsets.all(24)

Image 위젯

플러터에서 이미지를 표현하는 위젯들의 종류
Image.network : 네트워크에서 이미지를 가져온다.
Image.asset : 내 저장소에서 이미지를 가져온다.
Image.memory, Image.file : 추후에 필요에 의해 학습

Image.network

이미지를 사용할 때, .network를 붙이게 되면 네트워크의 데이터를 사용함
우리가 사용하는 ‘웹’에는 수많은 네트워크 이미지가 있음
브라우저에서 이미지 웹주소를 하나 가져온다 (CDN 방식으로 많이 쓰이기 때문)

Image.network('https://images.unsplash.com/photo-1543906965-f9520aa2ed8a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80')

url 주소는 String 데이터 타입으로 전달

Image.asset

pubspec.yaml에 등록되어있는 이미지를 사용할 때 사용하는 위젯
pubspec.yaml에 이미지를 등록하는 방법?
1. pubspec.yaml의 아래부분을 찾아 주석을 해제함
```
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
```
1. assets > images 폴더 생성, 이미지 넣기
2. pubspec.yaml에 이미지 경로 등록
```
Image.asset('assets/images/flutter-logo.png'),
```

💡 Image.asset vs Image.network

상황마다 다르게 사용

네트워크가 없는 상황

Image.asset

네트워크에 연결하지 않아도 장치 내부(어플 내부)에 있기 때문에

인터넷을 통해서 이미지를 보여줘야 하는 상황

Image.network

서버에서 받아오는 이미지로 네트워크를 연결해야만 볼 수 있기 때문에

현업 Tip) Image.asset 사용하는 특별한 경우

디자이너가 작업해준 Icon, 어플 필수 이미지(로고) 등등

장치 내부에 있어야 로딩이 빠르기 때문

플러터 폴더구조

플러터 프로젝트 생성시 자동으로 생성되는 폴더들

쳐다볼 필요없는…
- .dart tool / .idea / 프로젝트명.iml / pubspec.lock / README.md
빌드용으로 서서히 알게될
- android / ios / linux / macos / web / windows / test
- 빌드 : 개발된 프로젝트를 실행 가능한 프로그램으로 변환하는 작업
- android : 안드로이드 빌드시 꼭 필요한 빌드용 폴더 (앱 제작 후 어플 설치 파일(apk) 등이 여기에 저장됨)
- ios : iOS 빌드시 꼭 필요한 빌드용 폴더 (xcode가 직접적 소통하는 폴더)
- linux : Linux용 빌드시 꼭 필요한 폴더
- web : Web 빌드시 꼭 필요한 폴더
- windows : Windows용 빌드시 꼭 필요한 폴더
- test : 유닛테스트, 프로젝트 테스트용 폴더 ( 플러터 고급용) 각 플랫폼마다 사용하는 전용 폴더가 있고, 해당 폴더에서 빌드가 이루어진다
꼭 알아야하는
- lib / pubspec.yaml

pubspec.yaml

플러터 프로젝트 생성시 자동으로 생성되는 중요한 파일 중 하나
프로젝트가 사용하는 이미지, 폰트, 패키지 등의 자원들을 등록하는 출입국사무소같은 역할
네트워크가 아닌 장치에 저장돼있는 이미지를 사용한다면 등록과정이 반드시 필요함
작업할 때 다른사람의 작업물 코드(패키지) 또한 필요한 상황이 오게됨. 예시) 다른 사람이 만들어놓은 결제관련 패키지
결론적으로, 패키지 의존성 관리 역할

단축키가 안먹을때...................

한국어 입력기가 [한컴 입력기]로 설정되어있어서 안먹는 것이었음…
Ctrl + Shift 누르고, Shift만 뗀다.

Microsoft 입력기 선택

→ 중반에 해결해서 초반엔 눈물 참으면서 한땀한땀 노동했음

→ 이제 단축키가 잘먹어요…

Github로 소스코드 관리하기

💡 VS Code에서 Github 업로드하기

vs code 설치, git 설치, github 회원가입을 마친 후에 아래 내용 진행하기

간단한 테스트 코드를 Github에 업로드해보겠습니다.

Initialize Repository
→ Github에 업로드할 파일 열기
→ 좌측 브랜치 모양 아이콘 클릭
.

Github Repository 생성
→ Github 로그인 후 좌측 상단 New 버튼 클릭
→ 레포지토리 이름 작성
Public : 공개저장소. 누구나 저장소에 접근할 수 있음
Private : 개인저장소. 자신만 저장소에 접근할 수 있음
-> 상단에 보이는 링크가 repo 주소. 복사하기
.

Remote 세팅

github의 어떤 repo에 업로드할지 설정하는 과정
→ 상단 Terminal → New Terminal 클릭해서 터미널 창 열기
→ git remote add origin (repo 주소) 입력
아무 일도 일어나지 않으면 잘 설정된 것!
git remote -v 를 입력해 주소를 확인할 수 있다.
.

Commit

로컬에서 발생한 변경 사항을 기록하고 저장하는 과정
→ 커밋할 대상 선택

→ 커밋하기
위 입력 칸에 커밋 메시지를 작성하고, Commit 버튼 클릭

만약 이런 창이 뜬다면

git config —global [user.email](http://user.email) “메일주소”
git config —global [user.name](http://user.name) “이름” 입력하기

커밋 완료
.

Push
로컬이 아닌 github에 최종 업로드하는 과정
→ … 클릭 → Push 클릭

→ github에 생성했던 repo를 들어가보면 코드가 잘 올라가있다~~~

[추천] 마켓플레이스에서 git graph를 검색해서 설치하면 편하게 깃 로그를 확인할 수 있다!
1. git graph 검색 후 설치

2. Commit 버튼 위 아이콘 클릭

2.1 화면 맨 아래에서도 들어갈 수 있다

3. 아래 사진처럼 쉽게 git log를 확인할 수 있다~

~끝~
https://github.com/kdy1242/sniperfactory_flutter