[Android] TIL 3일차

노코드로 수익형 AI 앱 만들기

 

임시저장 안하고 진행했다가 실수로 컴퓨터 꺼서 다시 쓰느라 너무 늦어졌다..

1-4 : 위젯의 기본 개념

 

• Action 이란?

⇨ 위젯에 애니메이션 추가, 뒤로 이동, 특정 페이지로 이동 등의 기능을 추가하는 것

⇨ navigate to A : A 페이지로 이동하도록 설정

 

•  작동 테스트 방법 3가지

Preview App : 직접 구동되진 않으나 간단히 화면을 보여줌, 로딩 속도가 빠름
Test Mode : 2~3분 걸림, reload 기능이 있음(새로운 기능 및 위젯을 추가하고 리로드 버튼을 누를 시 추가한 것들을 포함하여 10초 안에 리로드 됨), 직접 구동되지만 reload 하지 않을 시 약 12분 뒤에 만료됨
Run : 2~4분 걸림, 직접 구동됨, 새로운 기능 추가 시 다시 빌드 후 로딩(2~4분)

 

✓  Run이 Preview App과 Test Mode에 비해 좋은 점

Run을 통해 빌드 했을 시 위 사진처럼 버전이 저장된다.

⇨ 빌드가 완료되면 그 버전이 저장되어 링크만 복사하면 해당 버전을 바로 볼 수 있다.

 

✓  모든 위젯들의 공통 옵션

•  Visibility
⇨ Conditional : 나중에 다시 설명..
⇨ Responsive : 해상도에 따라서 위젯을 보이게 할 건지 안 할 건지 조정(PC, 모바일, 태블릿 등)
⇨ Opacity : 투명도

•  Padding & Alignment
⇨ Expansion : 나중에 다시 설명..
⇨ Padding : 위젯을 중심으로 여백 추가(옵션 복사 후 다른 위젯에도 적용 가능), 보통 8의 배수 값 입력
⇨ Alignment : 나중에 다시 설명..

+ widht : 넓이, height : 높이

 

✓ Tip, 프로젝트 이전 버전으로 되돌리는 방법

v1을 클릭 시 Snapshots이 나오는 모습

⇨ 우측 상단에 v1 클릭 시 Snapshots이 나온다. 플러터플로우에서 내가 작업한 내용을 자동 저장해둔 곳으로 Peek은 미리 보기, Revert는 해당 시간대로 되돌아간다.  

 

1-5 : 레이아웃위젯

 

• Layout 이란? : 배치(화면요소의 배치)

✓ 레이아웃 위젯 4종류
1. Column
2. Row
3. Container
4. Stack
⇨ 레이아웃 위젯들의 공통적인 특징은 플러터플로우 위젯 중에서 유일하게 부모가 될 수 있는 위젯이다.

 

1-6 : Column과 Row

 

• Column : 열(세로)

 

•  Column Properties
⇨ Main Axis Size : 미니멈(중앙을 기준으로 위젯 크기에 따라 증가), 맥시멈(기본부터 최대치)
⇨ Main Axis Alignment : Column은 세로가 Main, 총 6가지가 존재(위로 정렬, 중앙으로 정렬, 아래로 정렬, 위젯과 위젯 사이에 동일한 여백, 위젯마다 테두리를 주는 것, 맨 위와 아래에 여백이 없고 그 외는 동일한 여백 공간을 두고 배치)
⇨ Cross Axis Aligment : Column은 가로가 Cross, 왼쪽, 중앙, 오른쪽 정렬, 가로 전체를 채움

• Row : 행(가로)

 

• Row Properties
⇨ Main Axis Size : Column과 내용 동일
⇨ Main Axis Alignment : Row는 가로가 Main, 총 6가지 존재(왼쪽, 중앙, 오른쪽 정렬, 위젯과 위젯 사이에 동일한 여백, 위젯마다 테두리를 주는 것, 맨 왼쪽과 오른쪽에 여백이 없고 그 외는 동일한 여백 공간을 두고 배치)
⇨ Cross Axis Aligment : Row는 세로가 Cross, 위, 중앙, 아래 정렬

• Scorollable
⇨ Items Spacing : 위젯 간 여백 직접 입력
⇨ Apply to Start & End : Items Spacing 값을 Start와 End에도 적용
⇨ Start Spacing : Row는 왼쪽, Column은 위 여백
⇨ End Spacing :  Row는 오른쪽, Column은 아래 여백

✓ 이미지 위젯 변경 방법

이미지 위젯 같은 경우 링크(Network)를 통해 이미지를 변경하거나 Asset을 통해 직접 이미지를 삽입할 수 있음

 

 

• Text
⇨ Theme Text Style : 글씨크기 변경
⇨ font weight : 글씨 굵기 변경(Theme Settings에서 전체 변경도 가능)

 

• Text Filed 필드색 지정 방법

Text Field > Filed 설정을 on해서 배경색을 지정할 수 있음

 

✓ Tip, 부모 위젯 원하는 위치에 생성하는 방법

위젯 우클릭 시 Wrap Widget이 나옴, 클릭 시새로운 부모 위젯 생성 가능