flutter_slidable 사용방법

김민진·2021년 4월 5일
0

flutter_개발내용

목록 보기
4/11

flutter_slidable 을 사용하게 되면

화면을 옆으로 밀었을때 의 기능? 슬라이더 기능을 사용할 수 있게 된다.
왼쪽 오른쪽 각각 옵션을 부여할 수 있어 보인다.

사용버전은
flutter 1.22.5 사용중이고
flutter_slidable: ^0.5.4 버전의 패키지를 사용중이다!

  SlidableController slidableController;
  Animation<double> _rotationAnimation;
  Color _fabColor = Colors.blue;

  void handleSlideAnimationChanged(Animation<double> slideAnimation) {
    setState(() {
      _rotationAnimation = slideAnimation;
    });
  }

  void handleSlideIsOpenChanged(bool isOpen) {
    setState(() {
      _fabColor = isOpen ? Colors.green : Colors.blue;
    });
  }
  
  @override
  void initState(){
  ...
  slidableController = SlidableController(
      onSlideAnimationChanged: handleSlideAnimationChanged,
      onSlideIsOpenChanged: handleSlideIsOpenChanged,
    );
    ...
  }

위의 코드를 붙여준다!
아마 슬라이딩을 구분하기 위한 기초 설정 같아보인다..

 return Slidable(
     key: Key(item.id),
     controller: slidableController,
     direction: direction,
     dismissal: SlidableDismissal(
       child: SlidableDrawerDismissal(),
       onDismissed: (actionType) {
         _showSnackBar(
             context,
             actionType == SlideActionType.primary
                 ? 'Dismiss Archive'
                 : 'Dimiss Delete');
         setState(() {
//            alarmModelList.removeAt(index);
           print("지워짐");
         });
       },
     ),
     actionPane: SlidableBehindActionPane(),
     actionExtentRatio: 0.20,
     child: VerticalListItem(alarmModelList[index], index),
     secondaryActions: <Widget>[
       IconSlideAction(
         caption: '수정하기',
         color: Colors.grey.shade200,
         icon: Icons.edit,
         onTap: () => editAlarm(alarmModelList[index]),
         closeOnTap: false,
       ),
       IconSlideAction(
         caption: '삭제하기',
         color: Colors.red,
         icon: Icons.delete,
         onTap: () => deleteAlarm(alarmModelList[index]),
       ),
     ],
   );
 }

사용방법은 위와 같이 사용했는데

actions 는 왼쪽 슬라이딩 했을때 나올만한 위젯? 아이콘? 등을 넣어주면 되고
secondaryActions에 에는 오른쪽으로 슬라이딩 했을때 나올만한 위젯이나 아이콘등을 넣어주면 되더라..
child 에는 표시될 내용을 넣어주면 되더라!

이렇게 글 작성하면 안될 거 같은데.. 사실 까먹었다 ㅜㅜ
그래도 나는 보면 기억나니까 뭐...

profile
dart,c#,java 개발자! 잡다하게 해서 문제될게 없다!

0개의 댓글