DevLogMJ

Stateless 위젯을 사용해 위 사진처럼 텍스트와 이미지를 배치하는 방법에 대해 알아보았다.

Stateless 위젯 하나로만 구성된 화면으로, 기능이 전혀 없는 화면이다.

전체 화면 구성

텍스트가 배치된 줄과 이미지 두 장이 세로, 즉 Column으로 배치되어 있다.

맨 위의 텍스트들은 가로, 즉 Row로 배치되어 있다.

1. 이미지 에셋 추가

먼저, image 배치를 위해 이미지 에셋을 assets폴더에 넣어 준다.

2. 에셋 경로 설정

pubspec.yaml 파일에서 'assets: '를 찾아 주석 처리를 해제해 주고 에셋 폴더 경로를 입력해 준다.

3. main.dart 에서 home 화면 구성

main.dart에서 예시코드를 지우고 다음과 같이 작성한다.

앱이 시작되면 MyApp 클래스의 home인 StorePage를 불러오는 코드이다.

이제, 본격적으로 화면을 구성할 StorePage를 만들면 된다.

StorePage 코드

전체 코드가 Scaffold 내부에 구현되었다.

Scaffold 란?

• 각 페이지의 구조를 잡아주는 위젯
• AppBar, BottomNavigation, FloatingActionButton 등 자주 사용되는 구조를 따로 구현하지 않아도 사용할 수 있다.

Scaffold 없이도 구현이 가능하지만, 이미 만들어진 구조 내에서 작업하는 것이 훨씬 편하고 효율적이다.

코드 분석

SafeArea

 - 화면 상단의 상태표시줄을 침범하지 않는 하단 공간

 사용: SafeArea에 Column을 배치해 전체 위젯이 상태표시줄 아래에 표시되도록 함.

Spacer()

 - 남은 공간만큼 간격을 만들어주는 위젯

 사용: text사이마다 Spacer() 이 사용되어 텍스트 사이에 동일한 여백을 만들어줌.

SizeBox

 - width, height값으로 지정된 수치만큼의 사이즈를 가지는 빈 상자

 사용: Row에 높이를 지정해 글자와 이미지가 너무 가깝지 않게 해 줌.

Expanded

 - Row, Column 내에서 남은 공간을 확장하여 공간을 채워주는 위젯

 사용: 사진이 빈 공간을 남기지 않고 꽉 차게 해 줌.