Flutter VOD 강의_예제 2번 / TIL

주혜림·2025년 12월 16일
TILflutter

Flutter 입문하기
2번 예제 앱 실행해보기

▶︎ 레시피 앱 만들어보기

🔽[ 기본 환경 세팅 ]

1. 전체적인 레이아웃 나누기

  • 만들 앱의 화면을 확인
  • Column 사용
  • 화면의 구성요소 나누기

2. 각 요소를 위젯으로 나눠서 컴포넘트화

  • 화면을 구성하는 요소를 여러 블록으로 쪼개서 컴포넌트로 만드는 작업
  • 코드의 간결화를 위해 Scaffold내에서 모든 요소를 구현하는게 아니라 여러 파일로 나누는 것
  • 코드를 재사용하고 유지보수의 편의성이 증대
  • 각 요소의 이름을 잘 지어준다. 구조가 동일한 것은 하나의 위젯만 만들어서 재사용하면 편하다.

3. flutter 프로젝트 생성

  • 프로젝트 최상위 경로에 폴더를 만들고 이미지를 복사한다.
  • new folder -> 'assets' 폴더 -> 안에 'images' 폴더 생성 -> 이미지 끌어와서 추가 -> 'pubspec.yaml' 폴더에서 * 지우고 assets변경
assets:
    - assets/images/

-예제 이미지 다운로드
(https://github.com/this-is-spartaa/flutter-recipe-app/tree/main/assets)

4. 폰트 파일 추가

fonts:
    - family: NotoSansKR
      fonts:
        - asset: fonts/NotoSansKR-Thin.ttf
          weight: 100
        - asset: fonts/NotoSansKR-ExtraLight.ttf
          weight: 200
          ...
  • MeterialAppdml theme속성의 추가

5. AppBar 위젯

  • Scaffold 에서 최상단에 배치되는 위젯

  • actions에 위젯 배치
    -Icon위젯: icon을 표시해주는 위젯
    플러터 공식 홈페이지에서 확인 가능
    -Icon 클래스의 요소들을 사용

  • CupertinoIcons: 애플 디자인의 아이콘들이 나열되어 있는 클래스

  • SizedBox 위젯을 이용한 action에 여백주기

6. ListView 위젯으로 세로 스크롤 달기

  • 앱 구현을 했는데 RecipeListItem 3개를 화면에 출력하려니 하단에 빗금표시가 뜨면서 오류표시가 생김!
  • ListView는 가장 일반적으로 사용되는 스크롤 위젯
  • 가로축, 세로축 전부 가능
  • 사용법: ListView의 children 내에 위젯을 배치한다.

    🔽[ 해결방법 ]
    main의 child: Culumn을 ListView로 변경 해준다!

-> 아직 앱 내의 이미지들이 예제와 같지 않아서 조정해주기로 한다.

7. AspectRatio로 이미지 비율 정하기

  • 종횡비로 자식 크기를 조정하는 위젯
  • 정해진 width값에 맞춰서 가로세로 비율을 적용하여 세로의 길이를 결정
 children: [
          // 가로 / 세로 비율
          AspectRatio(aspectRatio: 1 / 2),
],

8. ClipRRect 위젯으로 이미지 모서리에 곡선 주기

  • Clip: 자르다 / R: 둥근의 약자 / Rect: 직사각형
  • 둥근 사각형을 사용하여 자식위젯 이미지의 모서리를 둥글게 자름

9. debug 배너 해제

  • 1번 예제에서 배운 시뮬레이터 우측 상단에 붙어있는 디버그 라벨을 해제해서 보기에 깔끔하게 만들어 보았다.
  • MaterialApp 클래스에서 debugShowCheckedModeBanner속성을 주고 false값을 출력하도록 해서 배너를 없앴다.
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
      debugShowCheckedModeBanner: false,
}

⭕️ 마지막으로 레시피리스트의 텍스트들을 예제 처럼 약간 연한 회색으로 바꿔주는 숙제가 있었다.

  • lib-> recipe_ltem.dart폴더에서 Widget클래스에서 TextStyle에 color:black을 추가한 뒤, 우클릭해서 블랙컬러에 대한 정보들을 보고 45값을 주어서 연한 회색으로 출력이 되게 하였다.
@override
  Widget build(BuildContext context) {
          Text(
            "Have you ever made your own $title? Once you've tried a hommade Coffee, you'll never go back.",
            style: TextStyle(fontSize: 12, color: Colors.black45),
  }

🌟 최종적으로 구현된 앱의 화면

⚽️TIL 251216

🔽[ 트러블슈팅 ]
[ 문제 발생 ]
복합적인 문제로 잘못된 부분들이 있어서 ios시뮬레이터와 연동을 해도 앱이 구현이 되지 않는 문제가 발생했다.

[ 문제 원인 ]
1. ','가 빠진 부분이 있었다.
2. 소문자로 써야 될 부분을 대문자로 씀
3. Icon을 받아줄 옵션이 빠져서 에러가 생겼다.

[ 해결방안 ]
1. 하단 problems에 있는 에러 원인을 보고 함수 뒤에 ','가 빠진 부분은 추가해서 수정했다.

  1. 대문자와 소문자는 역할이 다르기 때문에 꼭 구분해서 사용하여야 한다.
    대문자는 클래스 또는 타입일 때 사용하고, 소문자는 변수, 함수, 파라미터를 사용할 때 쓴다.
    위젯인지 옵션인지 구분이 안되었기 때문에 오류가 난 것.
    대문자 시작= 위젯, 아이콘, 색상
    소문자 시작= 설정값, 함수
    ex) appBar: AppBar(), 를 AppBar: AppBar() 라고 잘못 입력해서 오류가 발생하였다.

  1. AppBar()는 위치인자라 Icon을 직접 출력할 수 없어서 옵션을 하나 만들어서 그 안에 Icon을 넣어야 한다.
    AppBar에서 자주 쓰는 옵션 3가지- actions:[] 오른쪽 / leading:[] 왼쪽/ title:[] 가운데 을 주로 사용함
    본 강의에서는 actions:[]를 사용하였다.


4. + 사소한 실수
음식 사진의 파일명을 'assets/images/coffee.jpg'라고 써야하는데
아래 예시 처럼 image라고 폴더명에서 s를 빠트려서 이미지가 정상적으로 출력이 되지 않았었다.
파일명 철자를 틀리는 실수도 주의하여야 한다!

 RecipeListItem('assets/image/coffee.jpg', 'coffee'),
            RecipeListItem('assets/image/burger.jpg', 'burger'),
            RecipeListItem('assets/image/pizza.jpg', 'pizza'),

[ 구현해보고 싶은 것 ]

  • 위젯을 혼자서 구현이 가능하다면 그 위젯을 클릭했을 때 안의 페이지로 넘어가는 기능도 구현을 해보고 싶다.
  • 뒤로가기 등 강의 예제 3번을 보면서 관련한 개념과 기능들을 익히고자 한다.

TIP❗️

전체적인 큰 구조가 무엇인지 먼저 이해해보고,

어떤 구조로 짜여지는지 그려본 뒤 감을 잡자!

github
readme 정리도 꼭 해봐야 겠다.

profile
주혜림
앱 개발을 공부중입니다.
이전 포스트

Flutter VOD강의 기초개념과 예제_1번 / TIL

다음 포스트

Flutter VOD 강의_예제 4번 / TIL

0개의 댓글