[Flutter] 5. 스토어 앱 만들기기

김주희

Jun 08, 2025

Contents

1. 프로젝트 생성 2. Flutter 실행 3. Widget 4. 레이아웃 위젯

💡

출처 만들면서 배우는 플러터 앱 프로그래밍 - 최주호, 김근호, 이지원 공저 / 앤써북

MaterialApp, Scaffold, Column, Row, Text, SafeArea, Image, Spacer, Expanded, Padding, SizedBox

1. 프로젝트 생성

2. Flutter 실행

flutter 실행 시 main 함수가 가장 먼저 실행이 된다. 이때 main 함수 안에서 runApp 함수가 호출된다. runApp 호출 시 넘겨주는 위젯이 플러터가 가장 먼저 그림을 그리게 되는 루트 위젯이 된다. 위의 코드에서는 MyApp이 루트 위젯이 되는 것을 알 수 있다.

3. Widget

💡

위젯 내용 채우기

1. 위젯

stl까지 작성하고 자동완성을 하게 되면 다음과 같이 위젯이 만들어진다. 아직 const에 대해서 이해하지 못하므로 const는 다 지우자.

MyApp은 StatelessWidget을 상속받고, StatelessWidget은 Widget을 상속받았기 때문에 MyApp은 이제부터 위젯이 된다. 또한 StatelessWidget의 생성자는 부모의 key를 선택적 매개변수로 받기 때문에 MyApp에서도 상속되어 선택적 매개변수로 부모의 key를 받게 된다. 또한 선택적 매개변수이기 때문에 MyApp 클래스의 생성자에 key를 넣어도 되고 안넣어도 된다. 또한 상속으로 인해 부모의 함수 build를 오버라이딩하게 된다. 따라서 flutter가 화가이고 위젯이 그림인데 화가가 build 함수는 화가가 그림을 그리는 행위라고 볼 수 있다.

2. Placeholder

Placeholder는 임시로 화면을 채워 빈자리를 차지해주는 위젯이다. 따라서 build 함수는 매개변수를 받아서 위젯 타입을 리턴해주는데 Placeholder라는 위젯을 리턴한다. 즉 flutter라는 화가가 build, 그림을 그리게 되는데 build 함수는 Placeholder라는 위젯(그림)을 그리게 된다. 그 결과가 다음과 같다.