Flutter 독학으로 기본기 익히기4 04. Flutter 에서 자주 사용하는 레이아웃 위젯 오늘 배울 것Flutter로 UI 화면을 구현할 때 자주 사용하는 레이아웃 위젯들을 하나하나 소개하고 직접 실습할 수 있는 코드를 제공해드리겠습니다. 오늘 배우는 레이아웃 위젯은 다음과 같습니다. 1. Column2. Row3. Container4. Stack5. Expanded 6. Padding7. SizedBox 1. Column (세로 정렬)Column은 자식 위젯들을 세로로 나열할 때 사용합니다.Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text('첫 번째'), Text('두 번째'), Text('세 번째'), .. 2025. 5. 3. 03. 위젯 트리 구조, DevTools 로 Widget Tree 보는 방법 오늘 배울 것모든 Flutter 화면은 build() 함수 안에서 위젯 트리(Tree) 구조로 만들어집니다. 이 구조를 이해해야 화면 UI를 구성하고 그리기가 수월합니다. 오늘은 실습을 통해 위젯 트리 구조에 대해 배우고 DevTools 로 Widget Tree 보는 방법을 알아보겠습니다. 위젯 트리 구조 시각화하기화면에 텍스트, 버튼, 박스 등을 여러 개 중첩시켜서 위젯 트리가 어떻게 쌓이는지 직접 확인해 보겠습니다. 아래 코드를 main.dart에 붙여 넣고 앱을 실행해 주세요.import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const My.. 2025. 5. 2. 02. StatelessWidget과 StatefulWidget 비교하기 오늘 배울 것실습을 통해 StatelessWidget과 StatefulWidget 차이를 비교하고 StatefulWidget 기본 사용법을 알아보겠습니다. 먼저 둘의 차이를 말해보자면 StatelessWidget은 화면이 절대 안 바뀌는 위젯이고,StatefulWidget은 상태(state)가 변하면 화면이 다시 그려지는 위젯입니다. 실제로 둘이 어떻게 다른지 실습을 통해 확인해 보겠습니다. 실습 방법버튼을 누르면 숫자가 1씩 증가하는 코드를 작성합니다.이를 StatelessWidget과 StatefulWidget 로 만들어 각각 앱을 실행합니다. 버튼을 눌렀을 때 화면의 숫자가 변하지 않으면 Stateless, 숫자가 증가하면 Stateful이라는 걸 직접 눈으로 확인해 봅니다. Statele.. 2025. 5. 1. 01. Hellow Flutter! 첫 홈 화면 그리기 Flutter 독학 시작!Flutter를 혼자 독학하며 기본기를 익히는 글입니다.첫 번째 글은 프로젝트를 생성하고 Hellow Flutter! 첫 홈 화면을 그려보겠습니다. 먼저 Flutter 를 설치해 주세요. (아래 글을 참고해 주세요) Flutter 설치 및 개발 환경 구축하기 for Mac이번 글에서는앱 개발 프레임워크인 Flutter 와 Android Studio, Xcode 를 설치하여 Android, iOS 앱 개발 환경을 구축하겠습니다. Android Studio 는 구글이 만든 Android 앱 개발을 위한 공식 개발 도구입니다. Windaco2020.tistory.com Xcode 를 설치했다면 Simulator까지 실행해 주세요. iOS 시뮬레이터와 함께 보면서 진행해 보겠습니다. .. 2025. 4. 30. 이전 1 다음
