책 검색 앱 제작 (1)

Eungae

Jan 08, 2026

Contents

파일 생성, git 연결 프로젝트 구조화 presentation 최소 구조 만들기 AppBar 구현 텍스트 필드 구현 git push

💡

대원칙

실습은 최소 3번씩 해보기.

안 되면 더 하기.

안 하고 불안해 하지 않기.

앞으로 실습은 최소 3번씩 반복하기로 한다.

제작을 어떤 순서로 진행하는지에 익숙해지는 것을 목표로 한다.

TIL은

1회 제작 시: 제작 순서 기록

2회 제작 시: 코드 작성 순서 기록

3회 제작 시: 디테일한 코드 작성 기록 (1, 2회에서 놓친 부분)

을 중심으로 작성하도록 한다.

파일 생성, git 연결

파일생성

VS code 열어서 → flutter: new file → application 생성

git 연결

터미널에서 내 프로젝트 폴더로 이동


cd 프로젝트폴더

git init (로컬 폴더를 git 저장소로 만들기)


git init

git init : 작업할 폴더를 git 폴더로 초기화

성공하면 .git 폴더가 내부에 생김 (숨김 폴더)

git status

상태 확인 명령어

아직 관리되지 않은 파일이 있는지 (untrackted), 커밋할 준비가 됐는지 확인하는 용도

파일 스테이징 (git add)

전체 파일을 한 번에 올릴 때


git add .

선택 파일을 올릴 때


# 하나의 파일을 올릴 때
git add `파일명.확장자`

# 여러 개의 파일을 올릴 때
git add `파일1.확장자` `파일2.확장자` `파일3.확장자`

폴더 단위로


git add 폴더명/

첫 커밋 만들기


git commit -m "first commit"

원격 레포 주소 연결


git remote add origin 레포주소

#예시
git remote add origin https://github.com/username/my-project.git

원격 레포로 첫 push


git push -u origin main

main : 기본 브랜치 이름

-u : 앞으로 push/pull 할 때 origin main을 기본으로 쓰겠다.

여기까지가 처음 작업할 때 깃 세팅하는 법.

작업하면서 브랜치 만드는 거는 그때 가서 해보는 걸로.

프로젝트 구조화


lib/
├── data/                             ← 모델 레이어 역할
│   ├── models/                       ← 데이터 클래스
│   └── repositories/                 ← 데이터 저장/조작
├── presentation/
│   ├── detail/                       ← 화면 (페이지)
│   │   ├── widgets/                  ← detail에서 사용하는 재사용 위젯
│   │   ├── detail_page.dart
│   │   └── detail_view_model.dart
│   ├── home/                         ← 화면 (페이지)
│   │   ├── widgets/                  ← home에서 사용하는 재사용 위젯
│   │   ├── home_page.dart
│   │   └── home_view_model.dart
│   └── widgets/                      ← 앱 전역에서 사용하는 재사용 위젯
└── main.dart

presentation 최소 구조 만들기

home_page.dart / detail_page.dart — 최소 구조 만들기

home_page.dart : StatelessWidget을 상속 받는 HomePage 클래스 생성

StatelessWidget 상속 시 override는 필수. 세트. 앞으로 다시 언급 안 함.
Scaffold 반환

appBar와 body로 최소한의 구조 만들어놓기.

appBar : AppBar(),

body: Text(’클래스명’),

detail_page.dart에도 동일하게 세팅

main.dart

home 세팅

home: HomePage()

riverpod 설치

터미널: flutter pub add flutter_riverpod

→ 시물레이터 열어서 실행되는지 확인해보기 : HomePage 텍스트 출력 확인

AppBar 구현

텍스트 필드 구현

자주 사용하는 속성 모음 참고

텍스트 필드 주의사항: 텍스트필드 바깥을 터치했을 때 키보드가 사라지는 기능이 없음 → GestureDetector로 감싸줘야 함.


return GestureDetector(
	onTap: () {
		FocusScope.of(context).unfocus();
	},
	child: Scaffold( ...

contentPadding

AppBar의 title 영역은 높이/패딩 제약이 있어서

테두리가 잘리거나

힌트 텍스트의 수직 정렬이 이상해지거나

키보드 올라올 때 레이아웃이 튀는 경우

가 생길 수 있으므로, contentPadding을 주는 것이 좋다.

텍스트필드에 노출될 행 수: 1행으로 지정


appBar: AppBar(
	title: TextField(
		maxLines: 1)),

hintText


appBar: AppBar(
	title: TextField(
		decoration: InputDecoration(
			hintText: "검색어를 입력해 주세요"),),),

테두리: border


appBar: AppBar(
	title: TextField(
		decoration: InputDecoration(
			enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(width: 1),
      ),
	    focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(width: 2),
      ),

TextEditingController

텍스트필드는 단순히 텍스트를 입력하는 창에 불과함. → 그러나 우리는 검색 기능을 통해 여기에 입력되는 값을 코드에 넘겨 작업을 수행할 것임. TodoList 처럼 단순한 입력칸이 아니라, 앱 상태를 바꾸는 통로가 되는 것.

“입력 → 반응”

검색어로 API 호출

자동완성 리스트 노출

필터된 화면 노출

버튼 활성화 등등

⇒ TextEditingController 가 필요한 이유


class HomePage 와
---

TextEditingController textEditingController = TextEditingController();

---
@override 사이


		->
	AppBar title TextField 에서 controller: textEditingController로 설정해준다.

git push

commit : “텍스트필드 세팅”