[TIL] Flutter 9기 사전 캠프 Day 4: flutter 프로젝트 & Widget

현서·2025년 11월 11일
TILdartflutter

[TIL] Flutter 9기

목록 보기
4/65

📝 flutter 프로젝트

프로젝트 구조

⭐️ 중요한 파일

📁 lib/

앱 만들기 위한 Dart 코드 작성하는곳
기본적으로 main.dart가 진입점

📁 pubspec.yaml

프로젝트의 정보 기록
플러터 공식 패키지 저장소인 pub.dev 의 패키지를 사용하기 위해 추가하는곳
앱 내에서 사용할 이미지, 폰트 파일들의 위치 선언하는곳

📁 pubspec.lock

설치된 패키지들의 정확한 버전을 고정하여 기록
프로젝트 재설치 시 동일한 환경을 보장
패키지 pubspec.yaml 에 추가하고 패키지 가져오면 자동으로 추가됨

📁 android, ios, linux, macos, web, windows 폴더

디바이스 권한(GPS, 카메라 등) 설정
각각의 플랫폼에서 표시되는 이름 및 아이콘 수정
네이티브 기능 직접 개발할 때 사용하기도함

📁 test/

lib 폴더 아래에 작성한 Dart코드가 잘 작동하는지 Dart 코드로 테스트코드 작성하는곳

📁 .gitignore

Git에 포함시키지 않을 파일이나 폴더를 명시 (예: .dart_tool/, build/ 등)

📁 analysis_options.yaml

Dart 정적 분석 도구의 옵션을 설정하는 파일
코드 스타일 및 린트 규칙 등을 정의

➕ 그 외

📁 .dart_tool/

Dart 도구들이 사용하는 내부 캐시 디렉토리
개발자가 직접 수정할 일 없음

📁 .metadata

Flutter의 프로젝트 메타 정보를 담고 있으며 자동 생성됨

📁 .idea , flutter_study_app.iml

IDE(코드 에디터 설정 관련)

Flutter / Dart 폴더React 폴더설명
lib/src/실제 앱(웹) 로직이 들어가는 주요 코드 폴더
main.dartindex.js / App.jsx진입점 파일
pubspec.yamlpackage.json패키지, 설정, 리소스 선언
pubspec.lockpackage-lock.json설치된 패키지 버전 고정
android / ios / web / windows 등public/ + 플랫폼 관련 파일플랫폼별 권한, 아이콘, 네이티브 설정
test/tests/ 또는 src/tests/테스트 코드 작성 위치
.gitignore.gitignoreGit에서 제외할 파일 명시
analysis_options.yaml.eslintrc / prettier.config린트 규칙, 코드 스타일 설정
.dart_tool/node_modules/.cache내부 빌드/툴 캐시
.metadata(React에서는 별도 없음)Flutter 프로젝트 메타 정보
.idea / *.iml.vscode / .ideaIDE/에디터 설정 파일

리엑트 폴더랑 비슷한 부분이 좀 있어서 대입해봤다

Dart 프로젝트와 마찬가지로 앱의 시작점은 main 함수

패키지 사용

패키지란?

  • Flutter에서의 패키지는 외부에서 제공하는 라이브러리 또는 플러그인
  • 화면 전환 애니메이션, HTTP 통신, 날짜 포맷 처리 등 다른사람이 이미 만들어 놓은 코드를 손쉽게 가져와 사용할 수 있음

사용 방법

1️⃣ pubspec.yaml 직접 수정

추가 후 flutter pub get 명령어 입력하거나 저장

dependencies:
  http: ^1.4.0 # 패키지명: 버전넘버 형식

2️⃣ 명령어 사용

flutter pub add http
방법설명추천 여부
pubspec.yaml 직접 수정직접 YAML 파일을 열고 텍스트로 의존성을 추가해야 함. 버전 오타, 들여쓰기 오류 발생 가능성 ↑❌ 실수 위험 있음
flutter pub add 명령어 사용명령어로 자동 추가, 들여쓰기나 구문 오류 없이 안전함. 사용하는 플러터 버전과 호환되는 최신 안정 버전을 추가해줌✅ Flutter 권장 방식

버전 형식 설명 (^1.4.0의 의미)

Flutter (Dart의 pub 패키지 매니저)는 Semantic Versioning (의미론적 버전)을 따름
형식: ^주.부.수 → 예: ^1.4.0
1 = 주 버전 (Major): 기능/구조가 크게 변경되었을 때 증가
4 = 부 버전 (Minor): 새로운 기능이 호환성 깨지지 않게 추가되었을 때 증가
0 = 수 버전 (Patch): 버그 수정이나 사소한 개선^ 기호 의미

^ 기호 의미

^1.4.0 → (>=1.4.0 <2.0.0)
안정성과 호환성을 유지하면서 최신 패치를 자동으로 적용하도록 하는 의미

📝 Widget

Widget이란?

Flutter에서 UI를 구성하는 모든 것의 기본 단위 👉 눈에 보이는 모든것이 위젯

텍스트, 버튼, 이미지, 스크롤 영역, 레이아웃 구성 요소 등 모든 시각적 요소는 위젯으로 표현됩니다.

  • 위젯은 재사용 가능하고 조합 가능한 구조를 가짐
  • Flutter는 위젯 트리(widget tree)를 기반으로 화면을 렌더링
  • UI의 상태와 구조를 선언적으로 표현함

위젯 사용법

Flutter 위젯은 두 가지 유형으로 구분

StatelessWidget (상태 없음)

  • 한 번 생성되면 UI가 바뀌지 않는 위젯
  • 예: 텍스트, 아이콘, 로고 등
// StatelessWidget (추상클래스)를 상속받아서 build 메서드 재정의
class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('변하지 않는 텍스트');
  }
}

StatefulWidget (상태 있음)

  • 사용자의 동작에 따라 UI가 바뀌는 위젯
  • 내부적으로 상태(State)를 저장하고setState()를 통해 UI를 갱신함
  • 예: 버튼 클릭 횟수 증가, 입력 필드, 토글 등
class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              count++;
            });
          },
          child: Text('증가'),
        ),
      ],
    );
  }
}
  • StatelessWidget
class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("변하지 않는 텍스트");
  }
}
  • StatefulWidget
class CounterWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
   return CounterState();
  }
 
}

class CounterState extends State<CounterWidget> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        count++;
        setState(() {
          
        });
      },
      child: Text("$count")
      );
  }
}

onTap이 onClick 느낌인듯

📝 기본 위젯

MaterialApp

MaterialApp이란?

Flutter 앱의 루트(최상위) 위젯
앱 전체의 테마, 라우팅(페이지 이동), 타이틀, 폰트 등을 설정할 수 있는 핵심 컨테이너

  • Material Design 스타일을 적용할 수 있게 해주는 틀
  • 보통 앱당 하나만 존재 ✨

주요 속성

title: 앱의 이름
home: 첫 번째 표시할 화면 위젯 ✨
theme: 전체 테마 설정
routes: 라우트 정의

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
  ),
  home: const MyHomePage(title: 'Flutter Demo Home Page'),
);

Scaffold

Scaffold이란?

앱의 기본적인 화면 구조를 잡는 뼈대 위젯
상단바(AppBar), 하단바(BottomNavigationBar), 본문(body) 등을 담는 컨테이너
Flutter 앱의 "화면 1개"를 구성할 때 대부분 Scaffold를 사용

MaterialApp 은 그림일기장 전체, Scaffold 는 그림 일기장 각 낱장

주요 속성

appBar: 상단바 설정
body: 화면의 주요 내용
floatingActionButton: 동작 버튼
drawer: 사이드 메뉴

Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        const Text('You have pushed the button this many times:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: const Icon(Icons.add),
  ), // This trailing comma makes auto-formatting nicer for build methods.
);

AppBar

AppBar란?

화면 상단에 나타나는 헤더 영역
타이틀, 아이콘, 액션 버튼 등을 배치할 수 있으며, 대부분 Scaffold의 appBar 속성내에 사용

주요 속성

title: 제목 표시
actions: 우측 액션 버튼들
leading: 왼쪽 아이콘 (예: 뒤로가기, 햄버거 메뉴 등)
backgroundColor: 배경색 지정

profile
현서
이전 포스트

[TIL] Flutter 9기 사전 캠프 Day 3: 컬렉션 & 비동기 프로그래밍 & nullable & 예외처리 & 열거형 상수 enum & Dart의 네이밍 컨벤션

다음 포스트

[TIL] Flutter 9기 사전 캠프 day 5: 텍스트, 이미지, 아이콘 위젯 & Colum, Row & SizedBox, Container & Expanded, Spacer, Center & GestureDetector, ElevatedButton

0개의 댓글