매너미 - MannersMe 앱 수정 작업일지 #3

매너미 - MannersMe 앱 개발 수정 작업일지 #1  https://gomsfactory.tistory.com/2872

매너미 - MannersMe 앱 수정 작업일지 #1

매너미 - MannersMe 앱 개발 수정 작업일지 #2 https://gomsfactory.tistory.com/2873

매너미 - MannersMe 앱 수정 작업일지 #2

이 글을 읽으시는 분들 모두 추앙합니다.

이번 시간에는 사운드버튼 클릭 시, equalizer lottie animation 작업입니다.

1.main.dart 수정 > Provider 추가
 1)AS-IS > 기존에 Provider는 SoundTimeProvider 1개만 존재

runApp(
  ChangeNotifierProvider(
    create: (context) => SoundTimeProvider(), // 전역으로 사용할 Provider 추가
    child: MyApp(),
  ),
);

 2)TO-BE > 다중 MultiProvider로 추가

runApp(
  MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (context) => SoundTimeProvider()),
      ChangeNotifierProvider(create: (context) => LottieViewModel(LottieModel())),
    ],
    child: MyApp(),
  ),
);

2. main_screen.dart > lottie controller 및 view model init

  class _MainScreenState extends State<MainScreen>  with TickerProviderStateMixin {
    ......
  	late LottieViewModel lottieViewModel01;
  	late LottieViewModel lottieViewModel02;
  	late LottieViewModel lottieViewModel03;

  	late final AnimationController _lottieController;

	@override
	void initState() {
  	  _lottieController = AnimationController(vsync: this);

      LottieModel lottieModel0 = LottieModel();
      LottieModel lottieModel1 = LottieModel();
      LottieModel lottieModel2 = LottieModel();

      lottieModel0.setLottieNum(0);
      lottieModel1.setLottieNum(1);
      lottieModel2.setLottieNum(2);

      lottieModel0.setLottiePath('assets/lotties/equalizer.json');
      lottieModel1.setLottiePath('assets/lotties/equalizer.json');
      lottieModel2.setLottiePath('assets/lotties/equalizer.json');

      lottieModel0.setShowLottie(false);
      lottieModel1.setShowLottie(false);
      lottieModel2.setShowLottie(false);

      lottieViewModel01 = LottieViewModel(lottieModel0);
      lottieViewModel02 = LottieViewModel(lottieModel1);
      lottieViewModel03 = LottieViewModel(lottieModel2);

      super.initState();
    }

 

3.LottieModel.dart

import 'package:flutter/cupertino.dart';

class LottieModel  {

  LottieModel();

  int _lottieNum = 0;
  int _lottieSelectedNum = 0;
  String _lottiePath = "assets/lotties/equalizer.json";
  bool _showLottie = false;

  int get lottieNum => _lottieNum;
  int get lottieSelectedNum => _lottieSelectedNum;
  String get lottiePath => _lottiePath;
  bool get showLottie => _showLottie;

  void setLottieNum(int num){
    debugPrint('Lottie num : $num');
    _lottieNum = num;
  }

  void setLottieSelectedNum(int num){
    debugPrint('Selected num : $lottieNum > $num');
    _lottieSelectedNum = num;
  }

  void setLottiePath(String path){
    _lottiePath = path;
  }

  void setShowLottie(bool isShow){
    debugPrint('Lottie isShow : $lottieNum > $isShow');
    _showLottie = isShow;
  }

}

4.LottieViewModel.dart

import 'package:flutter/foundation.dart';
import 'package:mannersme/lottie/model/LottieModel.dart';

class LottieViewModel extends ChangeNotifier{
  final LottieModel lottieModel;
  LottieViewModel(this.lottieModel);

  bool get _showLottie => lottieModel.showLottie;
  int get _selectedLottieNum => lottieModel.lottieSelectedNum;

  bool get show{
    return lottieModel.showLottie;
  }

  void showLottie(bool isShow){
    lottieModel.setShowLottie(isShow);
    notifyListeners();
  }
  void setSelectedLottieNum(int num){
    lottieModel.setLottieSelectedNum(num);
    notifyListeners();
  }
}

MVVM모델을 이용해서 구현을 했습니다.
선택된 Lottie에 대해서 show여부를 확인하는 것입니다.

5. main_screen.dart에서 LottieViewModel를 이용하여 LottieView show, hide 처리 

LottieViewModel curLottieViewModel = lottieViewModel01;
if(soundButtonNum == 1) {
  curLottieViewModel = lottieViewModel01;
}else if(soundButtonNum == 2){
  curLottieViewModel = lottieViewModel02;
}else if(soundButtonNum == 3){
  curLottieViewModel = lottieViewModel03;
}
int lottieNum = curLottieViewModel.lottieModel.lottieNum;

curLottieViewModel.setSelectedLottieNum(lottieNum);
curLottieViewModel.showLottie(true);

1이 선택되었을 때, 2,3에 대한 처리도 필요합니다. 그건 숙제(?)로 남겨둡니다.

6.LottieView.dart > 실제 lottie 보여주기

class LottieView extends StatefulWidget  {
  const LottieView({Key? key, required this.mLottieViewModel}) : super(key:key);

  final LottieViewModel mLottieViewModel;

  @override
  State<LottieView> createState() => _LottieViewState();
}
class _LottieViewState extends State<LottieView> {

  @override
  void initState() {
    super.initState();
  }
  
  Widget build(BuildContext context){
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Consumer<LottieViewModel>(
          builder: (context, lottieViewModel, _) {
            return Visibility(
              visible: widget.mLottieViewModel.show,
              child: Lottie.asset(
                lottieViewModel.lottieModel.lottiePath,
                width: 60,
                height: 60,
              ),
            );
          },
        ),
      ],
    );
  }
}

visible: widget.mLottieViewModel.show에 의해서 show, hide 처리가 됩니다.

좀 더 나은 방법이 있을 거지만, 일단 이렇게 구현했습니다. 

다들 좋은 하루 되세요~