CODEMIING BLOG

https://medium.com/flutter-community/flutter-custom-clipper-28c6d380fdd6

https://docs.flutter.dev/codelabs/explicit-animations

https://www.youtube.com/watch?v=nL7cSBp5rGE 

버튼도 좋고, 레이아웃도 좋고 이 다음은 input이 아닐까 싶었으나,

예상치 못한 복병은 언제나 존재하기 마련.

순서대로 쌓는 것은 비슷하다고 생각했던 Column, Row, Stack 이었으나

Stack에는 Alignment를 조정하는 파라미터가 없었다.

이때문에 따로 찾아본 결과를 기록해둔다.

Stack의 child를 Align 위젯으로 감싸서 처리하는 방식이다. 

https://zionh.tistory.com/71

그런데 작업을 하다보니, Positioned 를 이용해 위치를 조정해주는 방식도 같은 방식이라는 사실도 함께 알게되었다.

SwiftUI에서는 주로 세부정보를 꼬리표를 달아서 처리했다면, 여기서는 상위 위젯으로 감싸주는 방식을 많이 사용하는 것 같다.

자세한 내용은 아래 링크를 참조.

https://develop-designer.tistory.com/44

Button 정보를 찾던 중 발견한 새로운 Layout 종류들

https://yun-seyeong.tistory.com/6?category=849799 

이번에는 드디어 'Button'을 만들어 볼 차례다.

먼저 Flutter 의 'Buttton'에 대해 간단하게 이해할 수 있을만한 포스팅을 찾았다.

https://learncom1234.tistory.com/24

버튼의 종류를 크게 TextButton, ElevatedButton, OutlinedButton으로 나누어 정리해준 블로그이다.

ios 시뮬레이터로 문제없이 첫번째 인트로 화면이 잘 구현되어서 기쁜 상태로

안드로이드에서도 똑같이 잘 돌아가는지 확인하려고 디바이스를 변경해보았지만, 무슨일인지 에러가 났다.

에러 코드가 저장공간 문제였기 때문에 처음에는 저장공간 문제인 줄 알았다.

실제로 저장공간 문제인 경우도 있는 것 같은데 그럴 때는 아래와 같이 저장공간을 확장하면 해결되는 문제일 것이다.

https://ooz.co.kr/472

하지만 이 에러는 Flutter의 고질적인 설치 문제이기도 한 모양이다.

그럴 때는 아래 링크를 참조해보시고

https://rateye.tistory.com/1414

내용을 읽어보니 이전 어플리케이션 제거가 되지 않는 경우 문제가 발생한다는 듯 해서

괜히 어렵고 귀찮게 명령어 치지 않고 애뮬레이터 UI에서 기존 앱 설치제거 했더니

잘 된다.

기존에 만든 앱 내부에 애니메이션이 꽤 여기저기 적용되어 있어서, 이 부분들을 Flutter로 가져올 수 있을지가 의문이었는데

다행히 애니메이션 지원 라이브러리도 꽤 준비되어 있는 모양이었다.

우리 앱은 시작부터 출렁거리는 애니메이션 배경으로 시작하고, Fade in out이 자주 등장하기 때문에

이르지만 바로 애니메이션 작업에 필요한 정보들을 서칭하기 시작했다.

아, 먼저 그 전에 Splash 화면 구현에 필요한 내용부터 확인했는데 initState에서 Timer를 사용하면 쉽게 해결할 수 있었다.

자세한 내용은 아래 포스팅을 확인. 이전에 다른 내용으로도 도움 받은 적이 있는 코딩하는 범이님의 블로그이다.

https://velog.io/@chb1828/%EC%B2%AB-%EB%A1%9C%EB%94%A9%ED%99%94%EB%A9%B4-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0Splash-%ED%99%94%EB%A9%B4

Splash 화면 구성을 하기 전에, 로컬 이미지 사용을 위해 먼저 Asset 등록을 해야할 필요가 있는데 이와 관련해서는 아래 링크를 확인.

파일을 한 개 한 개 등록하는 방법도 있지만 귀찮기 때문에 폴더 위치를 등록하는 것을 추천한다.

하지만 등록을 해도 코드에서는 풀경로를 입력해야한다. (도대체 왜일까)

https://dev-yakuza.posstree.com/ko/flutter/widget/image/

어쨌든 회사 Bi를 띄운 뒤 메인 화면으로 넘어가는 데까지는 별 문제가 없었으나,

아직 Fade in, Fade out 에니메이션 효과가 필요하다.

플러터 애니메이션에는 두 종류가 있는데 아래와 같다.

- Implicit Animation (암시적 애니메이션)

- Explicit Animation (명시적 애니메이션)

암시적 애니메이션은 굳이 명시하지 않아도 자동으로 애니메이션 처리를 해주는 것이고

명시적 애니메이션은 어떤 식으로 동작할지에 대해서 하나씩 Customizing 해서 처리하는 방식이다.

자세한 내용은 아래 링크를 참조.

https://beomseok95.tistory.com/320

이번 Splash 로고에 필요한 작업은 Fade in과 Fade out이 4초 안에 모두 자연스럽게 연결되는 것이다.

애니메이션 repeat 같은 작업은 explicit을 사용해야한다고 하지만,

단 한번의 Fade in out 정도는 암시적 애니메이션으로도 가능하지 않을까 싶어 찾아보았더니 역시 가능했다.

먼저 AnimatedContainer 클래스를 통해 Container에 implicit animation을 이용하는 방법을 확인하고 시도해보았지만

https://mobikul.com/implicit-animation-in-flutter/

어째서인지 Opacity에 대해서 만큼은 animation 적용이 되지 않았다.

이때문에 Opacity Animation 에 대해서만 별도로 검색했더니

버튼 액션을 통한 Fade in, Fade out 처리에 대한 정보를 공식 사이트에서 확인할 수 있었다.

https://docs.flutter.dev/cookbook/animation/opacity-animation

Opacity를 통한 Fade in, Fade out 처리는 아무래도 AnimatedContainer 가 아닌 AnimatedOpacity를 통해서만 가능한 모양이었다.

Container단위에 implicit Animation 적용이 버튼 액션을 통해서 처리가 가능하다면,

우리는 Splash 화면 구현하기를 통해서 Timer 클래스를 활용하는 방법을 이미 확인했기 때문에

같은 프로세스를 버튼이 아닌 Timer로 이동시키기만 하면

자동으로 Fade in, Fade out 처리한 뒤 다음 페이지로 이동하는 일 역시 가능할 것이다.

해보니 역시 잘 된다.

Timer 를 움직임 순서대로 2, 6, 8초 duration으로 배치했다.

다음은 로그인 페이지에 들어가는 물이 출렁이는 배경을 만들어야 한다.

또, 플러터를 위해 아주 필수적이고 중요한 부분이 있다.

그것은 바로 Material App과 Scaffold인데

이것이 도대체 무엇인고 하니

얘네가 결국 플러터 앱 구조의 최상단에 위치한 조립용 조각들이다.

https://velog.io/@hjhj6389/%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

플러터 앱은 최종적으로 Material App의 형태가 되고

플러터 앱의 각 페이지를 만들기 위해서 주로 사용하는 골자로 Scaffold가 제공된다.

Flutter에서, 결국 앱이란 건 이런 형태가 되게 되어 있지 하고 표준 규격의 뼈대를 사용하도록 준 것이다.

하지만 개인적으로 안드로이드의 디자인이 정말 구리다고 생각하고 또 실제로 ios 에서 플러터 이식을 진행해야하기 때문에

Scaffold의 대안 혹은 AppBar 를 사용하지 않는 변형이 가능한지 확인해본 결과, 아래와 같은 포스팅을 찾을 수 있었다.

https://deque.tistory.com/134

다행히 안드로이드형 구조인 기본 Scaffold 대신 IOS 형 구조인 CupertinoPageScaffold 를 사용할 수도 있었다.

그리고 이 경우 앱의 최종 형태 역시 Material App이 아닌 CupertinoApp이 된다.

그리고 import 로 사용하는 위젯 library 역시 material 이 아닌 cupertino를 사용해야한다.

또, Cupertino 위젯 관련한 모음도 공식 홈페이지에서 찾을 수 있었다.

https://flutter-ko.dev/docs/development/ui/widgets/cupertino

물론 Scaffold를 사용하지 않고도 직접 디자인적 요소들을 처리하는 방향으로도 앱을 작성할 수는 있는 듯 하다.

무조건 Scaffold를 사용해야 한다고 생각하지 않고, 원하는 UI 구성을 만들기 위해서 다양한 시도를 해볼 필요가 있겠다.

Scaffold는 그저 보다 쉽게 앱을 만들기 위해 제공되는 도구일 뿐인 것이다.

조금 더 진행하기 전에 또다시 막막한 부분이 생겼다. '화면 전환'

SwiftUI에서는 화면전환이 별달리 없이 그저 새로운 화면을 ZStack으로 위에 덮어 씌워버리는 독특한 방식을 택했는데

플러터가 똑같은 방식이 가능할 리는 없을테고, 안드로이드랑 비슷한 방식을 채택했나? 라고 생각하며 구글 검색창에 조금 타닥거려보니

금세 Navigator를 이용한 화면전환에 대한 포스팅이 화면에 주루룩 떴다.

그 중에 Stack 자료구조에 대해 이미지까지 인용하여 잘 정리해주신 코딩하는 범이님의 포스팅을 가져왔다.

https://velog.io/@cpcp127/Flutter-%ED%99%94%EB%A9%B4-%EC%9D%B4%EB%8F%99

자료구조를 공부한 사람에게는 너무나도 편하고 익숙할 단어, push 와 pop이 그 주인공이었다.

만약에 자료구조에 대해 몰랐다고 해도 위 링크에 적힌 이미지를 보면 금세 이해할 수 있을 것이다.

Stack 자료구조는 마치 좁고 기다란 통에 물건을 차곡차곡 넣어놓았다가 하나씩 빼어 쓰는 모양을 하고 있는데

아래쪽에는 출구가 없고 입구가 출구 역할을 함께 하고 있기 때문에 무언가 꺼내려면 가장 마지막에 넣은 물건을 먼저 꺼내야만 한다.

Navigator가 Stack구조로 이루어져 있다는 것은

1번 방에서 2번방으로, 2번방에서 3번방으로 이동했다면 3

번방에서 1번방으로 가기 위해서는 반드시 2번방을 지나가야한다는 것과도 같다.

앱의 전체적인 트리구조가 잘 짜여 있는 만큼 프로젝트가 확장되었을 때의 피로도도 줄어들 것이 예상된다.

여기서 살짝 피곤해졌는데, 그 이유는 기존의 트리구조를 보다 효과적인 구조로 개편할 필요성이 느껴지기 때문이다.

SwiftUI가 얼마나 편한 언어였는지 새삼 생각하게 된다.

어느 정도 기본 소양을 갖추고, 이제는 슬슬 정말로 실제 코드 작업을 해볼까 하고 손을 걷어붙이고나니 아직 해결해야할 문제가 많았다.

먼저, 레이아웃 내부의 위젯 정렬에 관해서는 정리가 좀 필요할 것 같은데 이 부분은 다시 코드팩토리님의 인프런 무료 강의를 통해 공부할 수 있었다.

정렬 관련 강의

- MainAxisAlignment 완전정복

- CrossAxisAlignment 완전정복

- MainAxisSize 완전정복

- Expanded 위젯과 Flexible 위젯

https://www.inflearn.com/course/%ED%94%8C%EB%9F%AC%ED%84%B0-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8?inst=8e073d05 

실제 실습이 함께하는 단계에 오니 플러터의 핫 리로드 기능의 쿨함이 빛을 발한다.

저장만 해도 코드가 반영되는 시스템이라니, 감동적이지 않은가.

Flutter 로 UI를 작성함에 있어, 지난 글에서 material이라던가 각종 레이아웃을 미리 설정하고 그 규격에 맞게 움직인다는 점에서 ios보다는 안드로이드 진영과 좀더 비슷한 것 같다는 말을 한 적이 있었는데 오늘은 그 말을 조금 정정해야할지도 모르겠다. 내가 사용한 건 swiftUI라서 스토리보드 방식과는 다른 편리함이 있었는데 그것은 거의 모든 UI작성에서 딱 세 종류의 레이아웃(?)을 기본으로 작업하게 된다는 점이었다. 

SwiftUI의 Stack들

- VStack (세로로 쌓기)

- HStack (가로로 쌓기)

- ZStack (입체로 쌓기)

전체적으로 '쌓아나가는' UI 작성 기법을 사용함으로 전에없이 간결하고 편리한 기분을 느꼈었는데,

이와 비슷하게 Flutter 에서도 가로로, 세로로, 입체로 쌓아나가는 형식의 레이아웃이 존재했다.

(물론 안드로이드에도 리니어 레이아웃이 존재하지만 편의성 측면에서 swiftui나 flutter가 훨씬 좋은 것 같다)

Flutter의 Stack 방식 레이아웃

- Column (세로로 쌓기)

- Row (가로로 쌓기)

- Stack (입체로 쌓기)

SwiftUI 때와 똑같이 괄호만 열고 사용하면 되는 문법적 간결함이 있긴 하지만 대신 정렬 방식은 반드시 선택해줘야하는데,

이 때문에 정렬에 대한 공부가 반드시 필요했다.

각 정렬 방식에 대한 자세한 내용은 코드팩토리님의 강의를 참고해보자.

Flutter의 정렬

- MainAxisAlignment : 시작 위치와 사이 간격 등을 정한다 (start, end, center, spaceBetween, spaceEvenly, spaceAround)

- CrossAxisAlignment : 반대축 정렬 (현재 소속된 레이아웃과 반대의 축에서 정렬한다. 예를들면 Row일 경우 세로 정렬)

                                        (start, end, center, stretch)

- MainAxisSize : 주축의 크기 (min, max)

- Expanded 위젯과 Flexible 위젯 : Column과 Row에서만 사용 가능 

   1) Expanded : 남은 사이즈를 모두 차지

   2) Flexible : 비율 지정. Expanded 혹은 Flexible 내부의 파라미터 flex 로 조정 가능

* 화면의 전체 사이즈 구하는 방법 : MediaQuesry.of(context).size + .width / .height

+ 번외 : 핫 리로드 관련 포스팅

https://yojkim.medium.com/flutter%EC%97%90%EC%84%9C%EC%9D%98-hot-reload%EB%9E%80-8fb2ecdc757f