DONGURAN

이미지를 입힌 버튼이 필요했다.

대표적인 구글, 네이버, 카카오 간편 로그인이다.

하지만, 플러터에서는 버튼에 이미지를 입히는 것을 제공하지 않고 있다. (그만한 이유가 있었을까?)

꼭 간편로그인 뿐만 아니라 투명 배경의 이미지를 버튼식으로 만들어서 클릭해야 하는 일이 있다.

물론 GestrueDetector, InkWell를 입혀서 표현해주어도 되지만,

Image위젯을 감싼다하더라고 이미지를 클릭한 모션을 제공해주지 않는다.

라이브러리 프로젝트 생성

무엇을 만들 것인지 정한다 (Project type:)

이렇게 만들면 '끝'이지만,

내가 만들 라이브러리(패키지)를 테스트 해보면서 만들어야 완성도가 높아질 것이다.

그런 점을 위해서 플러터에서 'example'영역을 제공해준다.

명령어에 다음과 같이 입력한다.

flutter create example .

위의 명령어는 모든 플랫폼에 적용가능한 example을 생성해준다.

만약에 특정 OS만 테스트가 가능한 example을 만들고 싶은 경우 다음과 같이 명령한다.

(ex. 안드로이드, iOS, 웹)

flutter create --platforms android,ios,web -a kotlin -i swift example .

라이브러리 example영역 참조 방법

현재 내가 만든 라이브러리를 example영역에서 참조하고 있지 않기 때문에,

참조를 해주어 테스트를 해볼 수 있다.

현재 제작하는 라이브러리 이름은 'picture_button'이다.

다음과 같이 작성한다.

dependencies:
  flutter:
    sdk: flutter
  
  [library_name]:
    path: ../

Pub.dev사이트 업로드

업로드 하기전 검증 명령어

flutter pub publish --dry-run

업로드 명령어

flutter pub publish

이후 'y'를 입력하여 승인 한다.

+ 추가로 패키지를 올리기전 코드들을 자동으로 정리해주는 명령어를 사용하면 좋다.

dart format ./

PageView를 사용하거나 DefaultTabController를 사용하여 화면을 표시해주는 경우에,

위젯 자체가 다른 화면으로 바뀌는 순간에 'dispose'가 되어 사라지게 된다.

총 A, B, C화면이 있을 때 A→B →C로 넘어갔다가 다시 A←B ←C로 페이지를 스크롤 했을때,

각 리스트들이 유지되었으면 좋겠을 때, 다음과 같이 설정해준다.

State<T>를 상속한 클래스에 AutomaticKeepAliveClientMixin을 추가한다.

해당 mixin은 StatefulWidget에서 사용이 가능하다.

class _ExamplePageListState extends State<ExamplePageList> with AutomaticKeepAliveClientMixin {

그럼, _ExamplePageListState에 빨간줄이 그어질 것이다.

반드시 재정의가 필요한 함수가 있기 때문이다.

wantKeepAlive라는 함수이며, 'true'로 설정해주어야 위젯이 재선언이 되지 않는다.

(반대로, 'false'로 선언하면 이전과 같이 위젯이 reload된다.)

@override
bool get wantKeepAlive => true;

해당 위젯을 선언한 부모 위젯이 dispose되지 않는 이상 계속해서 유지된다.

감사합니다🥫

플러터에서는 아주 간편하게 'Navigator'인스턴스를 사용하여 스크린, 페이지를 자유롭게 이동할 수 있다.

심지어 return값까지 받을 수 있다.

하지만 페이지를 이동할 때 단순히 보여줄 때도 있지만,

자연스럽게 애니메이션 효과를 넣어서 이동한다면 사용자 입장에서 더욱 부드러운 경험을 갖게 된다.

지금부터 작성하는 것은 아마 앞으로 나도 자주 현재 페이지를 방문할 것 같다.

애니메이션을 표현하는 대표적인 단어

- Fade : 흐리게(opacity)

- Scale : 크기

- Translate : x, y축으로 이동

- Tween : 직선

- Spring : 완곡하게

위의 정도가 있다고 알고 사용하면 된다.

애니메이션 효과를 주는 것은 Flutter팀에서 제공하는 라이브러리 또는 PageRouteBuilder위젯을 사용하여 표현할 수 있다.

1. 플러터 팀에서 제공하는 페이지 애니메이션 라이브러리

이름 : animations

링크 : https://pub.dev/packages/flutter_staggered_animations

add

flutter pub add flutter_staggered_animations

import

import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

위 라이브러리는 정말 친절하게도 본인이 만든 리스트나 페이지에 애니메이션을 주고 싶은 경우

해당 위젯을 감싸주기만 하면된다.

내가 ListView.builder를 사용해서 리스트를 만들고, 내부에 아이템을 추가한 경우이다

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: ListView.builder(
      itemCount: datas.length,
      itemBuilder: (context, index) {
        return Text("item[$index]");
      }
    )
  );
}

위의 위젯에 라이브러리를 사용하고 싶은 경우 다음과 같이

AnimationLimiter, AnimationConfiguration.staggeredList, SlideAnimation(+FadeInAnimation)위젯으로 감싸주면 된다.

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: AnimationLimiter(
      child: LiseView.builder(
        itemCount: datas.length,
        itemBuilder: (context, index) {
          return AnimationConfiguration.staggeredList(
            position: index,
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: Text("item[index]")
              )
            )
          );
        }
      )
    )
  );
}

2. PageRouteBuilder를 사용한 애니메이션

PageRouteBuilder는 Navigator함수 내부에서 사용한다.

아래의 코드는 다른 스크린 위젯을 띄어주는데

우측에서 좌측으로 이동되면서 점점 FadeIn흐릿하면서 선명해지는 동작이다.

  await Navigator.push(context,
    PageRouteBuilder(
     pageBuilder: (context, animation, secondaryAnimation) {
        return SecondaryScreen(data: data);
      },
     transitionsBuilder: (context, animation, secondaryAnimation, child) {
       const begin = Offset(1.0, 0.0);
       const end = Offset.zero;
       const curve = Curves.easeInOut;

       var slideTween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
       var fadeTween = Tween<double>(begin: 0.0, end: 1.0).chain(CurveTween(curve: curve));

       var slideAnimation = animation.drive(slideTween);
       var fadeAnimation = animation.drive(fadeTween);

       return SlideTransition(
         position: slideAnimation,
         child: FadeTransition(
           opacity: fadeAnimation,
           child: child,
         ),
       );
     },
      transitionDuration: const Duration(milliseconds: 450),
  ));

pageBuilder함수 파라메터에는 다음 보여줄 위젯을 설정해준다.

애니메이션을 넣어줄 곳은 transitionBuilder함수파라메터에서 설정해준다.

(예시 이미지는 추후 업로드 하도록 하겠습니다.)

감사합니다🍖