[Flutter] flutter_slidable 플러그인 사용하기

iOS 개발이 익숙한 나에게는 매터리얼 디자인이 정말... 무척이나 예쁘지 않고 사용감이 떨어지는 것 같다.

iOS만 써서 그런거 같기는 하지만.. ㅎㅎ

 

iOS list 구성 중 행을 밀어서 해당 행에 어떤 액션이 주어지는 

SwiftUI 로 치면 .onDelete 

 

 

https://pub.dev/packages/flutter_slidable

flutter_slidable | Flutter Package

 

 

- 설치

flutter pub add flutter_slidable

 

 

 

 

 

구성은 아래와 같다.

 

Slidable (

   child:

)

 

이고 

 

앞부분에 붙는 패널과, 뒷부분에 붙는 패널이 있다. 

startActionPane: 

endActionPane:

 

 

잘 확인하여 사용하면 된다. 

 

 

 

 

아래는 내가 사용한 아주 기본적인 사용법

extentRatio가 패널의 사이즈를 조정 할 수 있다. 

기본값이 0.5인데 액션을 하나만 주려고 하니, 너무 크다. 

액션이 하나라면 0.3이 적당할 듯 하다.

 

 

onPressed에는 context를 받아야 ?? 한다. 

 

Slidable(
    endActionPane: ActionPane(
      extentRatio: 0.3, // 패널의 사이즈를 결정함 
      motion: const DrawerMotion(), // 스와이프 애니메이션..
      children: [
        SlidableAction(
          flex: 1, // 여러 액션이 있을때 차지하는 비율
          onPressed: (BuildContext context) =>
              doNothing(context),
          backgroundColor:
              Color.fromARGB(196, 172, 49, 38),
          foregroundColor: Colors.white,
          icon: Icons.check_rounded,
          label: 'CHECK',
        ),
      ],
    ),
    child: Container(
      child: Text('swipe here!'),
    ),
),

 

 

아,, 참고로 꼭 list에만 국한되어 사용되지 않는다. 

나는 Row() 로 감싼 위젯에 사용하였다. 

Listview처럼 보인다. 

 

응용이 생각보다 괜찮다.. 4000likes 는 다르구만..