202307015 TIL

Today 요약

[✅] 코딩테스트 1문제

[✅] flutter 강의 5개

 

---

배운 점

1) 배열 문자열을 숫자열로 변환

function solution(intStrs, k, s, l) {
    var answer = intStrs.map((i)=>i.slice(s, s+l)).filter(j=> j>k);
    return answer.map(Number);
    
}

• intStrs배열의 각 요소에 s에서 시작하여 길이 l까지 부분 문자열 추출 한다
• 추출한 문자열 중  k보다 큰 값만 필터링 하여 새로운 배열을 생성
• 이때 새 배열을 숫자열로 변환을 해야하는데 나는 map을 한번 더 돌려서 변환했지만 사실 +만 넣어주면 된다는 사실 아래와 같이 변경하면 된다! 

function solution(intStrs, k, s, l) {
    return intStrs.map((i) => +i.slice(s, s + l)).filter((j) => j > k);
}

• s에서 l까지 부분문자열 추출후 > 추출한 부분 문자열을 정수로 변환 > (+ 연산자를 사용하여 문자열을 숫자로 변환)

2) Flutter List.generate

(new) List<String> List.generate(
  int length,
  String Function(int) generator, {
  bool growable = true,
})

 

 

3) Dismissible 스와이프하여 리스트 삭제

final List<String> _notifications = List.generate(20, (index) => "${index}h");
void _onDismissed(String notification) {
	_notifications.remove(notification);
	setState(() {});
}

for (var notification in _notifications)
Dismissible(
	key : Key(notification), 
    onDismissed :(direction) => _onDismissed(notification), 
	child:ListTile(....)
)

4) with SingleTickerProviderStateMixin

• 분명 전에 한번 본 내용인데.. 다시보니 기억이가물가물하다
• Ticker는 모든 애니메이션 프레임에서 콜백함수를 호출하는 시계 같은 것
• ticker를 주는 mixin일 뿐만 아니라 위젯이 위젯트리에 없을 때 리소스를 낭비하고 있지 않게 도와줌

5) AnimationController

late final AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(vsync: this);
  }
  
  
  /////아래와 같이 줄여서 사용도 가능하다
late final AnimationController _animationController = AnimationController(vsync: this);

• 아래와 같이 사용하려면 late를 꼭 붙여줘야 할 것  (initState가 필요 없다)

6) Tween()

Tween({Object? begin, Object? end})

late final Animation<double> _animation =
  Tween(begin: 0.0, end: 1.0).animate(_animationController);

 

Tween class - animation library - Dart API

• 애니메이션과 함께 tween을 사용하려면 tween animate 메서드를 호출하고  수정하려는 animation에 전달한다
• 연속적으로 호출되는 여러 tween에 의해 단일 애니메이션이 구성되도록 체인 방법을 사용해 연결할 수 있다 > animate를 두번 호출하여 각각 단일 tween으로 구성된 두개의 개별 animation 을 생성하는 것과는 다르다

_animation = _controller.drive(
  Tween<Offset>(
    begin: const Offset(100.0, 50.0),
    end: const Offset(200.0, 300.0),
  ),
);

/// 아래와 동일
_animation = Tween<Offset>(
  begin: const Offset(100.0, 50.0),
  end: const Offset(200.0, 300.0),
).animate(_controller);

7)  RotationTransition

const RotationTransition({
  super.key,
  required Animation<double> turns,
  this.alignment = Alignment.center,
  this.filterQuality,
  this.child,
}) : super(listenable: turns);

void _onTitleTap() {
    if (_animationController.isCompleted) {
      _animationController.reverse();
    } else {
      _animationController.forward(); // 애니메이션 플레이할때
    }
}  // 제스쳐 onTap에 넣어준다

RotationTransition(
	turns:_animation,
	child:아이콘..
)

• turns라는 파라미터를 필요로한다
• ScaleTransition : 변환된 위젯의 크기를 애니메이션화하는 위젯
• SizeTransition : 자체 크기와 클립에 애니메이션 효과를 주고 자식을 정렬하는 위젯
• SlideTransition  : 판넬 모달 위치를 애니메이션화

  late final Animation<Offset> _panelAnimation = Tween(
    begin: const Offset(0, -1),
    end: Offset.zero,
  ).animate(_animationController);

RotationTransition class - widgets library - Dart API

8)AnimatedModalbarrier

• slideTransition을 이용하여 모달을 만들었을 때 밖의 overlay 화면을 어둡게 하고 그곳을 클릭할 수 없게 하는 위젯
• SlideTransition 위에 만들어준다

(new) AnimatedModalBarrier AnimatedModalBarrier({
  Key? key,
  required Animation<Color?> color,
  bool dismissible = true,
  String? semanticsLabel,
  bool? barrierSemanticsDismissible,
  void Function()? onDismiss,
  ValueNotifier<EdgeInsets>? clipDetailsNotifier,
  String? semanticsOnTapHint,
})

late final Animation<Color?> _barrierAnimation = ColorTween(
    begin: Colors.transparent,
    end: Colors.black38,
).animate(_animationController);

AnimatedModalBarrier(
    color: _barrierAnimation,
    dismissible: true,
    onDismiss: _onTitleTap,
),

• dismissble : slide 밖 클릭시 이벤트