Flutter Study Weekly Memoirs Week 10

뚱냥이·2024년 1월 22일
4

Flutter Study

목록 보기
10/21
post-thumbnail

10주차 주간회고록

기간: 2024.1.10 (수) ~ 2024.1.21 (일)


🤟 핵심 3줄 요약

  • 10주 챌린지 끝났다! 다들 고생 많으셨어요!
  • 마지막 2주는 애니메이션 챌린지👾
  • 어렵지만 재미있다.

✨ 이번주 목표 ✨

  • 졸작 잘 만들어 보기.
  • 열심히 만들기..
  • 강의 듣기

🎁 칭찬하고 싶은 점, 좋았던 점

  • 퇴사 안 한 것.
  • 일찍 잘 일어나고 아침 잘 챙겨 먹는 점.
  • 열심히 코어타임 참여한 점.
  • 규칙적인 생활 유지하는 점.
  • 졸업한 점!🎓
  • 애니메이션 과제는 다 제출한 점!

💧 고치거나 버려야 할 점, 아쉬웠던 점

  • 퇴사 안 한 것.
  • 운동 안 한 것.
  • 책 안 읽은 것.
  • 밤 늦게 커피를 마신 점.

💻 일일 스프린트 작성

1월 10일 수요일

  • 애니메이션 과제하기

1월 11일 목요일

  • 과제 제출하기
  • 복습하기

1월 12일 금요일

  • 애니메이션 강의 듣기
  • 과제하기
  • 마라 만나기!
  • 케이크 사기
  • 장보기(우유 반띵🥛)

1월 13일 토요일

  • 대림역 베이킹!
  • 맛도리 샤오룽바오
  • 과제하기..

1월 14일 일요일

  • 미용실
  • 과제 제출하기
  • 빵 나누기
  • 책 읽기

1월 15일 월요일

  • 애니메이션 강의 듣기
  • 애니메이션 과제 시작..

1월 16일 화요일

  • 과제 제출하기
  • 복습하기

1월 17일 수요일

  • 애니메이션 졸작 시작하기

1월 18일 목요일

  • 졸작하기

1월 19일 금요일

  • 졸작..
  • 어디 안 나가기

1월 20일 토요일

  • 졸작..
  • 침팬치들 만나기

1월 21일 일요일

  • 약속
  • 졸작 제출하기!
  • 주간회고록 작성하기

🧑‍💻 이번주에 배운 내용

복습(기억하고 싶은 점)

애니메이션은 너무 어렵습니다.. 약간 다른 뇌를 사용하는 기분..

카드 애니메이션 만들기 과제부터(약 10주부터) 아예 과제를 모르는 상태라 강의 들으면서 했는데도 많이 어려웠습니다.

카드 과제는 카드 뒤집는 애니메이션 이 영상을 참고하면서 만들었습니다.
썸네일만 보면 정말 들어가기 조금 그렇지만,,, 좋은 영상이니 함 보세요.


졸업작품

NCT 앨범 소개를 만들자!
NCT라는 그룹 안에 NCT127, NCT dream, NCT U 그리고 Way V라는 그룹으로 나눠져서 활동하는데, 그 많은 활동들 중에서 제가 좋아하는 앨범들을 골라서 앨범 소개를 만들었습니다. (사실 모든 앨범 다 좋아합니다. 진짜임.)

저의 이번 애니메이션 졸업 작품입니다.
아쉬운 점은 아래 버튼을 맨 아래에 고정시키고 싶었는데 못 했습니다. 까비
그리고 다시 보니까 앨범이 너무 큰 것 같아요ㅠ 부담스러울지도?

import 'package:flutter/material.dart';

class FavoriteButton extends StatefulWidget {
  const FavoriteButton({
    double? iconSize,
    Color? iconColor,
    Color? iconDisabledColor,
    bool? isFavorite,
    required Function valueChanged,
    Key? key,
  })  : _iconSize = iconSize ?? 65.0,
        _iconColor = iconColor ?? const Color(0xffFC427B),
        _iconDisabledColor = iconDisabledColor ?? Colors.black45,
        _isFavorite = isFavorite ?? false,
        _valueChanged = valueChanged,
        super(key: key);

  final double _iconSize;
  final Color _iconColor;
  final bool _isFavorite;
  final Function _valueChanged;
  final Color? _iconDisabledColor;

  
  State createState() => _FavoriteButtonState();
}

class _FavoriteButtonState extends State<FavoriteButton>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _colorAnimation;
  late Animation<double> _sizeAnimation;

  late CurvedAnimation _curve;

  double _maxIconSize = 0.0;
  double _minIconSize = 0.0;

  final int _animationTime = 400;

  bool _isFavorite = false;
  bool _isAnimationCompleted = false;

  
  void initState() {
    super.initState();

    _isFavorite = widget._isFavorite;
    _maxIconSize = (widget._iconSize < 20.0)
        ? 20.0
        : (widget._iconSize > 100.0)
            ? 100.0
            : widget._iconSize;
    final double sizeDifference = _maxIconSize * 0.30;
    _minIconSize = _maxIconSize - sizeDifference;

    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: _animationTime),
    );

    _curve = CurvedAnimation(curve: Curves.slowMiddle, parent: _controller);
    Animation<Color?> selectedColorAnimation = ColorTween(
      begin: widget._iconColor,
      end: widget._iconDisabledColor,
    ).animate(_curve);

    Animation<Color?> deSelectedColorAnimation = ColorTween(
      begin: widget._iconDisabledColor,
      end: widget._iconColor,
    ).animate(_curve);

    _colorAnimation = (_isFavorite == true)
        ? selectedColorAnimation
        : deSelectedColorAnimation;
    _sizeAnimation = TweenSequence(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
          tween: Tween<double>(
            begin: _minIconSize,
            end: _maxIconSize,
          ),
          weight: 50,
        ),
        TweenSequenceItem<double>(
          tween: Tween<double>(
            begin: _maxIconSize,
            end: _minIconSize,
          ),
          weight: 50,
        ),
      ],
    ).animate(_curve);

    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _isAnimationCompleted = true;
        _isFavorite = !_isFavorite;
        widget._valueChanged(_isFavorite);
      } else if (status == AnimationStatus.dismissed) {
        _isAnimationCompleted = false;
        _isFavorite = !_isFavorite;
        widget._valueChanged(_isFavorite);
      }
    });
  }

  
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, _) {
        return InkResponse(
          onTap: () {
            setState(() {
              if (_isAnimationCompleted == true) {
                _controller.reverse();
              } else {
                _controller.forward();
              }
            });
          },
          child: Icon(
            (Icons.favorite),
            color: _colorAnimation.value,
            size: _sizeAnimation.value,
          ),
        );
      },
    );
  }
}

favorite_button.dart 파일을 따로 파서 만들고

FavoriteButton(
              //isFavorite: true,
              valueChanged: (isFavorite) {
                print('Is Favorite : $isFavorite');
              },
            ),

이렇게 호출했습니다.
하트는 귀여우니까 많이 봐주세요.
다른 건 코드 공개하기 부끄러우니까 나중에 깃헙에 업데이트 하면 다시 올리겠습니다.


그 외에 다른 것들

사실 저 졸업 작품을 제출하기 전에 이것저것 더 만들어 봤습니다.


이건.. 버튼 부분을 고정시키고ㅋㅋㅋㅋㅋㅋ 다른 창들만 움직이게 만들어서..
그래도 이것도 나름 만족스럽습니다. 근데 졸작이 더 잘 만든 것 같아요.


이건 뭔가.. 산만하기만 하고 졸업 조건에 맞지 않아서 기각했습니다.
그리고 앨범 꺼낼 때에는 괜찮은데 뒤로가기가 아쉽습니다. 나중에 수정해야지.


느낀점

역시,, 덕질의 힘은 많이 무섭습니다.
게으른 저도 내 새끼 예뻐 보이고 싶어서 이것저것 만들게 하다니..


💁 기억에 남는 것

10주간 (사실 20주지..) 공부하면서 느낀 것은,, 생각보다 많이 지친다는 점입니다. 그럼에도 같이 공부해 준 스터디원 분들, 잘 챙겨주신 보라 님과 TA 분들 덕분에 이번에는 포기하지 않고 무사히 졸업할 수 있었습니다.
그것뿐만 아니라, 주변에서도 늘 신경 써주고 제 주간회고록 벨로그에도 댓글 달아주고 챙겨준 지인들 덕분에 즐겁게 마무리 할 수 있어서 정말 영광입니다.
다들 감사합니다!

  • 10주 지친다!
  • 강의 듣기 싫어잉
  • 애니메이션 진짜 머리 아픈데 만들면 뿌듯하다.
  • 근데 못 만들겠다.
  • 집 주변에 누가 있는 건 든든하다..
  • 다들 고생 많았어요 🥳🥳
  • 응원해 주셔서 감사합니다.

아 나 이번에는 졸업했다!

profile
부자가 되고 싶어요.

21개의 댓글

comment-user-thumbnail
2024년 1월 22일

화려한 애니메이션과제 너무좋다 여러가지로 시도해본거 베리굿굿
졸업햇다는 마지막 문장 육성으로 들리는거 같네ㅋㅋㅋㅋㅋㅋ
기선이 10주챌 고생했다!!!!!!!!!!!

1개의 답글
comment-user-thumbnail
2024년 1월 22일

10주사이 성장한 모습이 보기 좋습니다 그런데 칭찬할점과 아쉬운점이 10주간 똑같은거 보니 기본기의 충실하겠다는 마음가짐이 돋보이는것 같네요 ㅎㅎ

1개의 답글
comment-user-thumbnail
2024년 1월 22일

와 애니메이션 기깔나네요!! 짱 힙해요!! 10주동안 고생하셨습니당👍👍👍

1개의 답글
comment-user-thumbnail
2024년 1월 22일

드뎌 완주!!! 10주동안 고생했어요 저렇게 멋진 작품을 만들어냈다니 자랑스럽습니다

1개의 답글
comment-user-thumbnail
2024년 1월 23일

졸업을 축하합니다. 10주간 열심히 하셨습니다.
졸작도 좋지만 습작#1이 촤라락 넘어가는 느낌이 좋네요. 수준 높은 덕질 쌉가능~*

1개의 답글
comment-user-thumbnail
2024년 1월 23일

일단 10주 동안 포기하지 않고 스터디 참여했다는 것에 큰 박수를 드립니다.
이런 의지와 열정이라면 충분히 멋진 개발자가 되시겠네요 ㅎㅎ 꼭 포기하지 않고
완주하시기 바랍니다. 그래도 건강은 잘 챙깁시다 화이팅~!

1개의 답글
comment-user-thumbnail
2024년 1월 23일

고생했따!! :-)

1개의 답글
comment-user-thumbnail
2024년 1월 23일

와 졸업작품의 전에 제작한 것들은 봤었는데, 졸업작품은 오늘 처음 보네요.
너무 이뻐요!!! 정말 잘 만드셨다! 기선님이 뿌듯해 하는 느낌이 여기까지 와욬ㅋㅋ
신나게 놀고나서도 집가서 강의듣고 과제구현 하셨던 내용들 쭉 보니깐 너무 멋진 것 같아요.
10주간 정말 고생하셨어요!

1개의 답글
comment-user-thumbnail
2024년 1월 24일

당신의 완주를 축하드리며,, 삼수할 줄 알았는데 재수로 끝내는 모습 너무 멋집니다. 직장과 병행하면서까지 완주한 모습에 감탄하며 자극받고 갑니다 : ) bb

이제 리액트 해야지?

1개의 답글
comment-user-thumbnail
2024년 1월 24일

따봉뚱냥아 축하해~

1개의 답글
comment-user-thumbnail
2024년 1월 28일

와 기선님 드디어 졸업하셨군요! 축하드립니다 🥳 졸작도 너무 예뻐요. 저도 첨에 BTS 코코아톡 만들었던 기억이 스멀스멀 나네요. 고생했어요 증말루! 앞으로도 홧팅홧팅!! 늘 응원해요🩷

답글 달기