Flutter 위젯 기본 이해

학습 내용:

•   Flutter 기본 위젯: Scaffold, AppBar, Column, Row, Container, Text.
•   MaterialApp과 기본 UI 구조 이해.
•   위젯 트리와 레이아웃 개념(정렬, 패딩).

목표/실습 과제:

•   Flutter 프로젝트에서 MaterialApp과 Scaffold로 기본 앱 틀 생성.
•   Column/Row를 사용해 세로/가로 레이아웃 구성 연습.
•   Text와 Container로 간단한 UI 요소 배치(예: 제목, 설명 텍스트).
•   예제: 앱바에 “My App” 제목, 화면 중앙에 “Hello Flutter” 텍스트 표시.

 

1. Flutter 프레임워크

Flutter는 구글이 개발한 오픈소스 UI 프레임워크로, 단일 코드베이스로 iOS, Android, 웹, 데스크톱 앱을 만들 수 있습니다. 빠른 성능과 네이티브 앱 같은 사용자 경험을 제공하며, 위젯 기반으로 화면을 구성합니다. 초보자도 직관적으로 앱 UI를 설계할 수 있어 인기 있는 도구입니다.

2. Dart란 무엇인가요?

Dart는 구글이 만든 프로그래밍 언어로, Flutter 앱 개발에 사용됩니다. 문법이 간단하고, 자바스크립트나 자바와 비슷해 배우기 쉽습니다. Dart는 객체지향이며, 비동기 프로그래밍(async/await)을 지원해 네트워크 요청 같은 작업을 효율적으로 처리합니다. Flutter에서는 UI와 로직을 모두 Dart로 작성합니다.

3. Flutter를 시작하는 방법

1. 개발 환경 설정:
   
   •  Flutter 공식 사이트에서 Flutter SDK를 다운로드하고 설치.
   •   Visual Studio Code와 Android Studio 같은 IDE에 Flutter 플러그인 설치.
   •   안드로이드 에뮬레이터 또는 iOS 시뮬레이터 설정.
2. 첫 프로젝트 생성:
   •   터미널에서 flutter create my_app 명령어로 새 프로젝트 생성.
   •   flutter run으로 앱 실행.
3. 학습 자료:
   •   첫 Flutter 앱 Codelab으로 기본 앱 만들기 연습.
   •   개발환경구축 설명

4. 각 Flutter 프로젝트의 3가지 중요한 부분

1. lib 폴더:
   • 앱의 주요 Dart 코드가 위치. main.dart는 앱의 진입점.
   • UI, 로직, 상태 관리 코드 포함.
2. pubspec.yaml:
   • 프로젝트 설정 파일. 의존성(패키지), 이미지 등 자산을 정의.
   • 예: flutter pub add http로 패키지 추가.
3. build 폴더:
   • Flutter가 컴파일한 결과물 저장. 개발자가 직접 수정하지 않음.
   • 앱 실행 시 자동 생성.

5. Flutter 레이어 케이크

Flutter의 구조는 레이어 케이크처럼 계층으로 나뉩니다. 각 계층은 앱 개발의 특정 부분을 담당합니다.

• 최상층: 위젯 계층 (Material, Cupertino 위젯으로 UI 구성).
• 중간층: 렌더링 계층 (위젯을 화면에 그리는 역할, 애니메이션 처리).
• 하단층: 엔진 계층 (Skia 그래픽 엔진으로 네이티브 성능 구현).
• 최하층: 플랫폼 계층 (iOS, Android 등 플랫폼별 네이티브 기능 연결).
• 참고: Flutter 공식 문서 - 아키텍처.

플러터 작동방식 유튜브

Flutter 레이어 케이크

 

6. Flutter 위젯 빌드 방법

Flutter는 위젯으로 UI를 구성합니다. 위젯은 화면의 모든 요소(버튼, 텍스트, 이미지 등)를 나타냅니다.

• 기본 구조:

  import 'package:flutter/material.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text("Hello Flutter")),
          body: Center(child: Text("Welcome!")),
        ),
      );
    }
  }
  

• 빌드 방법:
  • StatelessWidget: 고정된 UI(예: 정적 텍스트).
  • StatefulWidget: 동적 UI(예: 버튼 클릭 시 텍스트 변경).
  • 위젯은 트리 구조로 조합(예: Scaffold 안에 Column, Text 등).
• 참고: Flutter 위젯 카탈로그에서 다양한 위젯 확인.

 

참고 자료:

• Flutter 위젯 카탈로그: 시각/구조 위젯 설명.
• Flutter 레이아웃 튜토리얼: Row/Column 사용법.
• 검색 키워드: “Flutter 위젯 예제”, “Flutter 레이아웃 기초”.
• Dart와 Flutter의 패키지 저장소 : pub.dev
•  Windows-inspired fluent_ui
•  macOS-inspired macos_ui
•  Ubuntu-inspired yaru