[플러터/flutter] 이미지로 움직이는 로딩 인디케이터 만들기 / flutter AnimatedSwitcher 사용하기

 

움직이는 .gif 이미지말고 정적인 .jpg 이미지로 움직이는 로딩 인디케이터를 만들어야했습니다! 

한참을 이것저것 찾아봤었는데요. 

 

플러터의

AnimatedSwitcher

를 이용하면 쉽게 만드실 수 있어요. 더 좋은 방법이 있다면 알려주세요 ㅠ 저도 알고 싶습니다. 

 

👉🏻 공식 flutter - AnimatedSwitcher 페이지 가기

https://api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html

AnimatedSwitcher class - widgets library - Dart API

 

 

✅ indicator 코드 

class _ImageIndicatorState extends State<ImageIndicator>{
  //이미지를 여러개 쓰기때문에 카운트가 필요합니다. 
  int _count = 0;
  
  
  //로딩 인디케이터에 들어갈 이미지 배열이 필요합니다. 
  var imgList = ["img1","img2","img3"];
  
  
  //타이머도 필요합니다. javascript 의  setTimeout, setInterval 와 비슷한 개념입니다. 
  //dart:async 패키지에 포함되어있습니다.
  Timer? timer;

  @override
  void initState() {
  //0.5초마다 카운트를 업시켜주는 겁니다. 마지막 이미지가 되면 카운트를 0으로 바꿔주고요
    Timer.periodic(const Duration(milliseconds: 500), (Timer t){
      final isLast = _count == imgList.length - 1;
      setState(() => _count = isLast ? 0 : _count + 1);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        AnimatedSwitcher(duration: Duration(milliseconds: 50),
        transitionBuilder: (Widget child, Animation<double> animation){
          return FadeTransition(child: child, opacity: animation);
        },
        child: Container(
          child: SizedBox(
              width: 50.0,
              height: 50.0,
              child: Image.network(imgList[_count])),
          key: ValueKey<int>(_count),
        ),
        ),
      ],
    );
  }
}

 

함수가 어떻게 돌아가는지는 위에 적어두었습니다. 

아래 Container는 이미지 사이즈를 잡아주는거고요. 카운트를 여기에 대입해서 변하는 카운트에 따라서 이미지가 변하게 해줍니다. 

AnimatedSwitcher를 사용해서 사진을 정해주고 FadeTransition 과 같이 어떻게 transition할 것인지 정해주고 그 안에 파라미터로 적용될 child와 애니메이션을 넣어주면 됩니다. 쉽죠잉?......

FadeTransition말고 Scale도 있고 다양해요!

 

 

^^.....