개발 일상

---

Flutter로 스팀 지갑앱을 개발하고 있습니다.
아래 기능은 구현되었있습니다.

• 스팀 계정 등록 & 잔액 조회
• 스팀/스팀달러 송금
• 스팀 파워업/파워다운

그리고 앞으로 다음 기능을 구현할 예정입니다.

• 스팀파워 임대/철회
• 스팀 계정 히스토리

플러터로 개발 중인 암호화폐 스팀 지갑앱은 오픈소스입니다. 코드에 자신은 없지만 피드백은 언제나 환영입니다.

만약 Github 계정이 있고 마음에 드신다면, Github에 접속해서 ⭐️Star를 눌러주세요.

• https://github.com/anpigon/steemdart_ecc
• https://github.com/anpigon/flutter_steem_wallet_app

버튼 애니매이션 코드 작성하기

---

Add Account 화면에서 계정을 Import할때 버튼이 심심해서
버튼에 애니매이션을 넣어보았습니다.

[Import] 버튼을 누르면 줄어들면서 로딩 중이 표시됩니다.

애니매이션을 재생하기 위해서 AnimationController를 작성합니다.

AnimationController animationController = AnimationController(
      duration: Duration(milliseconds: 1500),
      vsync: this,
    );

버튼이 작아지면서 원이 되어야 합니다. 그래서 CurvedAnimation위젯과 함께 Tween를 사용합니다. 버튼 너비(width)가 300에서 시작해서 50으로 점점 줄어들 것입니다.

Animation<double> buttonSqueezeAnimation = Tween<double>(begin: 300, end: 50).animate(
      CurvedAnimation(
        parent: animationController,
        curve: Interval(0.0, 0.250),
      ),
    );
    

그다음 AnimatedBuilder 빌더를 사용하여 버튼에 애니매이션을 적용합니다.

AnimatedBuilder(
  animation: animationController,
  builder: (_, __) => SizedBox(
    width: buttonSqueezeAnimation.value,
    height: 50,
    child: ElevatedButton(
      onPressed: loading() ? () {} : submit,
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius:
              BorderRadius.circular(loading() ? 30 : 5),
        ),
      ),
      child: loading()
          ? const SizedBox(
              height: 20.0,
              width: 20.0,
              child: CircularProgressIndicator(
                strokeWidth: 2,
                valueColor:
                    AlwaysStoppedAnimation<Color>(Colors.white),
              ),
            )
          : const Text('Import'),
    ),
  ),
)

아래 블로그를 참고하여 버튼 애니매이션을 구현하였습니다.

• https://blog.geekyants.com/flutter-login-animation-ab3e6ed4bd19