Flutter_02. Column(Image), ScrollView, Padding, Row

반응형

오늘은 지난 시간에 이어서 Column에 이미지와 버튼을 추가하고, 화면을 스크롤하여 볼수 있는 ScrollView를 넣어보았다. 지난 시간에 알게 된 것들을 활용하여, 화면에 문구와 이미지를 넣고, 잘 정렬하여 꾸며보려고 한다. 여기에 버튼을 추가하고, 링크로 개인 SNS 연결하여 프로필 페이지처럼 만들어보면 재미있을 것 같다. 우선은 이미지 넣고 스크롤하는 것까지 해보겠다 :)

 

 

[참고] 나만의 프로필 링크 만들기 - HTML, CSS 기초로 프로필 만들어 깃배포하기!

🌈 https://ura257.github.io/myPage/ 

 

 

 

 

body : Column(image), ScrollView

 

0) 지난 시간에 만든 코드 VSCode로 열고 확인

 

 

 

1) Column에 이미지 추가

- images 폴더에 이미지 파일 그래그앤그랍 추가
- Column에 이미지 코드 추가 : Image.asset("이미지 폴더명/파일명.확장자")

 

 

이미지를 1개, 2개 추가하면서 화면을 확인해보자. 다음과 같이 추가한 이미지들이 여백도 없이 붙어서 중앙에 계속 출력되는 것을 확인 할 수 있다. 계속 추가하다보면, 추가한 이미지들이 전체 화면을 넘어가게 되는데, 이때 화면 최하단에  🚧 표시가 보인다.

나는 이미지를 8개를 더 추가했다 ^-^*// 나열한 이미지들의 길이가 너무 길어서, 5~8번 이미지는 아예 보이지 않는다.

 

2) Widget > SingleChildScrollView 추가

- Center 선택하고, 전구(💡)클릭
- Wrap with widget 선택

 

- widget을 SingleChildScrollView로 변경

 

 

3) Command + S 또는 ⚡️ 아이콘 버튼 클릭하여 화면 확인

 

 

 

 

 

body : Padding, Row 맛보기

 

1) Center에 Padding 추가

 

 

2) Padding 값을 all(20.0)으로 전체 값을 설정

 

#Padding - fromLTRB() 설정 - double 타입으로 Left, Top, Right, Bottom의 여백값 설정 가능

나는 Bottom을 제외한 나머지 위좌우 패딩값을 다음과 같이 각각 설정해주었다.

 

3) Command + S 또는 ⚡️ 아이콘 버튼 클릭하여 화면 확인

 

 

4) 이미지에 Padding 추가

- Image 선택하고, 전구(💡)클릭
- Wrap with Padding 선택

 

 

5) Command + S 또는 ⚡️ 아이콘 버튼 클릭하여 화면 확인

 

 

6) Row로 이미지 2개씩 정렬하기

- Image 를 감싼 Padding 선택하고, 전구(💡)클릭
- Wrap with Row 선택

 

Row도 Column과 형태는 동일하다.

>> Row(children: [ A, B, C, ... ])

 

 

7) Row에 정렬 설정

Row의 정렬도 Column과 동일하다. 주축인 mainAxisAlignment에 원하는 정렬값을 선택하여 설정하자.

주축이 아닌 반대방향(ex. Row의 경우, 주측은 가로)은 crossAxisAlignment으로 설정 가능하다.

 

 

8) Command + S 또는 ⚡️ 아이콘 버튼 클릭하여 화면 확인

 

 

9) 나머지 3~8번 이미지 반복 셋팅, 코드 정렬하고 화면 확인

1) 전체 선택 : Command + A
2) 자동 정렬 : Opt + Shift⬆ + F

 

 

 

 

💋 칼라표시가 안보인다면?

setting > "flutter" 검색 > ☑ Dart: Flutter Outline

 

 

 

💋 플러터 기능 가져다쓰기

Flutter에서 사용 가능한 패키지들을 모아 놓은 공식 패키지 저장소이다.

버전 3부터는 플러서에 null이 있음으로, Null safety 가 있는지 꼭 확인하고 사용하자 :)

https://pub.dev/

Dart packages