Choe's In coding...

토이프로젝트를 시작한지 벌써 몇주가 지났다.

생각만큼 진도가 나가진않아 답답할 뿐이다.

물어볼 사람도 없고 구글링에 한계가 있는거 같다.

마음맞는 사람을 만나 같이 팀을 꾸려서 완성시키고싶다.

지금까지 구현한 앱의 동작이다.

구현할게 산더미인데

우선적으로 내 머릴 제일 아프게하는것은

future/await이다.

해당 기능에 대해 대략적은 로직은 이해갔지만

막상 내 코드에 적용시키면 안된다....ㅜㅜ

구글링에 한계가 있다....

우선 다른것 부터 구현 중이긴 하다.

다른 프로젝트에서 테스트하던 코드를

토이 프로젝트로 가져왔더니 사진처럼 애러가 났다...

원래는 흰배경이고 텍스트도 정상적으로 나왔는데 당황스럽다.

혹시나 위젯 크기를 잘못 주어서 그런지 여럿 시도했지만 고쳐지지않아..

구글에 yellow underline 이라고 검색하니 역시나 없는게 없다.

위젯들을 Material로 감싸줘야한다....

윗 코드에서 아랫 코드와 같이 컨테이너 위젯을 감싸줬다.

그랬더니.

정상적으로 나온다...

대만족,,

며칠 나를 괴롭힌 상태관리 관련 문제가 해결됐다..

역시나 해결하고나니 왜 이걸 생각못했나 생각이들기도 하고

기초가 아직 부족하단 생각이 많이 들었다..

이제 다음 코드를 구현중 경험한 오류를 한가지 공유하려한다.

역시나 구글이 최고다 없는게 없다.

• Expanded()
• Flexible()
• Positioned()
  

문제는 보통 위 3가지에서 발생된다.

Expanded()와 Flexible() 는 Row(), Colum(), flex() 로 한번 감싸주면되고

Positioned()는 Stack()으로 한번 감싸면 된다.

내 코드에선 해당 오류를 해결하지 않아도 잘 작동되어서 무시하고 있었는데.

해결하니 속시원하니 콘솔창이 깨끗해졌다.

프로젝트를 시작하니

뭔가 재미가 많이 붙었다.

어떤식으로 구현할지 고민해보게 되고..

구현을 하면 많은 문제점들을 직면하고 또 해결하고..

시간은 많이 들지만 그래도 재미있다.

코드 하나하나 모두 이해하며 짜면 좋은데

아직은 그냥 이렇게 하는건가보다 하고 클론코딩?

더 나아가 내 프로젝트에 맞게 약간 응용하는 정도이다.

지난번 Splash 화면을 구현한뒤

BottomNavigationBar와 Theme.Mode, Get.bottomSheet

그리고 카운터를 구현했다.

카운터의 경우 아직 완벽하지는 않다. 좀 더 보완하여 올리도록 할것이다.

앱 동작을 보자

Get이 정말 좋은게 간단하게 다크모드와 라이트모드를 스위치할 수 있다.

Get.isDarkMode = 현재 다크모드인가?

True => ThemeMode.light  // 참이면 라이트모드로 변경

False => ThemeMode.dark // 거짓이면 다크모드로 변경

참 간단하다...

BottomNavigationBar도 간단하게 구현이 가능하다.

구성 페이지들을 Index로 만들어준뒤 BottomNavigationBar 내에서 지정해주기만 하면된다.

해당 소스는 비공개이다.. 유튜브나 구글에 찾아보면 쉽게 구현가능할것이다.

Get.bottomSheet 또한 쉽다..

근데 이 부분을 온보딩페이지로 구성할지 해당 시트로 구성할지 고민이지만....

ontap 안에 넣어주기만하면된다.

이처럼 별거 아닌 기능만 구현했는데 벌써 완성이 된거같은 김칫국을 마시지만

한편으로는 막막한 생각이 든다....

맥북 에어 m2가 왔다.....

첫 MAC OS인 만큼 적응이 너무 어렵다...

받자마자 뭐부터 만져야 할지도 몰랐다..

편하게 바꾸기보단 OS 그 자체를 느껴보고자

순정 상태로 사용해보려고 한다.

Flutter 설치를 끝내고 Ios 애뮬을 돌리는데 너무 심장이 떨렸다...

이렇게 빠르다니....

맥북은 천천히 익히도록 하고 밀린 Flutter 부터 학습해보자

이번에는 토이프로젝트를 조금씩 완성해보려고한다.

무엇을 할지 모른다면 역시 생각나는 작은것 부터 처리하는게 좋은거같다.

Splash 화면이다. 앱을 처음에 실행하면 나오는 로딩 페이지라고 생각하면 된다.

앱 로고가 아직 없기에 아이폰에 있는 내 이모지를 활용했다.

일단 첫번째로 기본 프로젝트를 만들어주자

https://pub.dev/packages/flutter_native_splash

위 페이지의 라이브러리를 이용하오니 설치 해주자.

pub get을 해주고

프로젝트 root 디렉토리에 flutter_native_splash.yaml 파일을 만들어주자

안에 들어갈 코드는 위 페이지에 나와있다.

코드중 내가 수정한 부분은 단 두줄이다.

백그라운드 컬러 및 로고 이미지 경로

기기의 모드(다크/라이트)에 따라 불러오는 로고를 다르게 설정할 수 있다. 이건 나중에 하도록 하겠다.

다음은 main.dart를 수정해보자

import 'package:flutter_native_splash/flutter_native_splash.dart';

를 import 해준뒤

메인 함수에 두줄을 추가한다.

해당 코드를 아래 위젯에 추가해준다.

해당 splash가 3초간 지속되고 첫 페이지로 들어가게 된다.

이로써 Splash 이미지는 구현 완료이다.

참 간단하지만 뭔가 있어보이는? 그런 라이브러리인거같다.

다음으로는 get을 이용해 하단 네비게이터바를 구현하여 다중 페이지를 구현하도록할것이다.

이전 시간과 비슷하게 ListView.builder를 만들어보자...

이번에는 라이브러리 LikeButton을 사용할것이다.

https://pub.dev/packages/like_button

새로운 프로젝트에 해당 라이브러리를 설치해주자

또 이번에도 이미지를 사용하오니

아래 링크에서 Image 파일을 다운로드 받아 assets 해주자(유튜브 코딩세프님의 자료)

https://github.com/icodingchef/list_page_lecture

우선 첫화면으로 뿌려줄 홈을 STF위젯으로 만들어준다.

Animal 클래스를 하나 만들고 생성자 또한 만들어주자. 이름, 위치, 이미지경로 를 갖고있다.

다음 이제 String타입의 이름, 위치, 이미지경로 리스트를 생성해준다.

 static List<String> animalName = [
    'Bear',
    'Camel',
    'Deer',
    'Fox',
    'Kangaroo',
    'Koala',
    'Lion',
    'Tiger'
  ];

  static List<String> animalLocation = [
    'forest and mountain',
    'dessert',
    'forest',
    'snow mountain',
    'Australia',
    'Australia',
    'Africa',
    'Korea'
  ];

  static List<String> animalImagePath = [
    'assets/bear.png',
    'assets/camel.png',
    'assets/deer.png',
    'assets/fox.png',
    'assets/kangaroo.png',
    'assets/koala.png',
    'assets/lion.png',
    'assets/tiger.png'
  ];

Animal 생성자에 리스트 값들을 넣어주기 위해 List.generate 해준다. animalName의 길이만큼 인덱스를 넘긴다.

body 부분이다. ListView.builder - Card - ListTile onTap은 뒷 부분에서 구현하도록 한다. leading은 맨 왼쪽에 오는 이미지부분이며 title은 animalName subtitle은 animallocation 을 의미한다.

Navigator을 이용해 해당 페이지로 넘어가게 하자.

위와같이 기본 틀 코드를 작성해준뒤 이제 메인페이지에서 데이터를 받아보자

왼쪽과 같이 인자값을 받기위해 작성해주면 오른쪽과 같이 받은 데이터를 뿌려줄수있다.

이제 LikeButton을 구현해보자.

맨 위에 import를 시켜준뒤

작성해주면 기본값이 false, 0으로 설정되어 회색과 0으로 표기되고 눌러주면 true로 되며 1로 카운트 된다.