【Flutter】 인기 패키지 사용법 ~ flutter_slidable 편 ~

머리

2020년 들어가고 나서 Flutter의 공부를 처음으로 왔습니다.
앞으로 여러가지 패키지를 더 공부해 나가고 싶기 때문에, 인기있는 것을 아웃풋으로서 기사로 해 나가고 싶습니다.

이번에는 url_launcher라는 패키지를 소개합니다.

지금까지 올린 기사
- shared_preferences 소개
- url_launcher 소개
- flutter_slidable ← 지금 이것

flutter_slidable

flutter_slidable은 ListTile에 사용되는 Widget입니다.ListTile 옆으로 슬라이드할 수 있습니다.

슬라이드하면 아이콘, 타이틀 문자, 색, 눌렀을 때의 거동을 설정할 수 있습니다.

샘플

간단한 TODO 목록을 만들었습니다.
이번에는 Firestore는 사용하지 않지만 사용한 경우에도 응용할 수 있도록 모델 클래스도 만들었습니다.

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

final toDoList = [
  {"title": "買い物にいく"},
  {"title": "犬の散歩"},
  {"title": "明日の準備"},
  {"title": "家族に電話する"},
];

class SampleSlidable extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => SampleSlidableState();
}

class SampleSlidableState extends State<SampleSlidable> {
  final itemController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('flutter_slidable'),
      ),
      body: ListView(
        children: toDoList.map((data) => _buildItem(context, data)).toList(),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          formForNewItem(context);
        },
      ),
    );
  }

  Widget _buildItem(BuildContext context, Map data) {
    Item toDoItem = Item.fromMap(data);
    //Slidableはここから
    return Slidable(
      actionExtentRatio: 0.2,
      actionPane: SlidableScrollActionPane(),
      // 左側に表示するWidget
      actions: <Widget>[
        IconSlideAction(
          caption: '重要',
          color: Colors.yellow,
          icon: Icons.star,
          onTap: () {},
        ),
        IconSlideAction(
          caption: '共有',
          color: Colors.blue,
          icon: Icons.share,
          onTap: () {},
        ),
      ],
      // 右側に表示するWidget
      secondaryActions: [
        IconSlideAction(
          caption: '削除',
          color: Colors.red,
          icon: Icons.remove,
          onTap: () {
            toDoList.remove(data);
            setState(() {});
          },
        ),
      ],
      // 一つ一つのアイテム
      child: Container(
        padding: EdgeInsets.only(left: 20),
        decoration: BoxDecoration(
            border: Border(bottom: BorderSide(width: 1.0, color: Colors.grey))),
        child: ListTile(
          leading: Icon(Icons.chevron_right),
          title: Text(toDoItem.title),
        ),
      ),
    );
  }

// アイテムを追加するダイアログ
  formForNewItem(BuildContext context) {
    showDialog(
      context: context,
      builder: (_) {
        return SimpleDialog(
          title: Text('新しく追加する'),
          children: [
            Container(
              padding: EdgeInsets.all(20),
              child: TextFormField(
                controller: itemController,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                FlatButton(
                  child: Text('キャンセル'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
                FlatButton(
                  child: Text('OK'),
                  onPressed: () {
                    toDoList.add({"title": itemController.text});
                    Navigator.of(context).pop();
                    itemController.clear();
                    setState(() {});
                  },
                )
              ],
            )
          ],
        );
      },
    );
  }
}

// アイテムクラス
class Item {
  String title;
  bool star;

  Item({this.title, this.star});

  Item.fromMap(Map<String, dynamic> mapData) {
    this.title = mapData["title"];
    this.star = mapData["star"];
  }
}

설명

설명은 Slidable입니다. 다른 코드는 간단하기 때문에 읽고 이해하고 싶습니다. .

actionExtentRatio : 슬라이드시에 표시하는 Widget의 크기 지정

actionPane : 슬라이드 시켰을 때의 애니메이션(4종류이므로 나중에 상세 설명)

actions : 왼쪽에 표시하는 Widget. IconSlideAction 사용

secondaryActions : 오른쪽에 표시하는 Widget. IconSlideAction 사용

최소한 이것을 사용할 수 있으면 괜찮을 것 같다.
actions 및 secondaryActions에 사용 IconSlideAction- caption : 타이틀 문자
- color : Widget의 색
- icon : 아이콘
- onTap : 탭했을 때의 거동

를 설정할 수 있습니다.
이번은 삭제만 탭했을 때의 거동을 제대로 작성했습니다.

IconSlideAction(
  caption: '削除',
  color: Colors.red,
  icon: Icons.remove,
  onTap: () {
    toDoList.remove(data);
    setState(() {});
  },
 ),

이제 삭제할 수 있습니다.

다음은 actionPane에 대해 설명합니다.
공식 문서 쪽이 알기 쉬울지도 모릅니다만, Gif도 실어 둡니다.

SlidableBehindActionPane()

ListTile 뒤에 Widget이 숨겨진 것처럼 나타납니다.
그러나 이것은 ListTile의 문자가 겹쳐서 보이기 때문에 나는 별로 좋아하지 않습니다.
(나의 지식, 기술 부족으로 이렇게 되어 있을지도 모르지만)

SlidableScrollActionPane

ListTile 옆에 Widget이 표시됩니다. 따라서, 단지 슬라이드시키고 있는 것 같은 애니메이션이군요.

SlidableDrawerActionPane

ListTile 옆에서 서랍처럼 표시됩니다.

SlidableStrechActionPane

ListTile 옆에서 위젯이 늘어나도록 표시됩니다.



나는 SlidableScrollActionPane를 가장 좋아합니다.

그리고 이 패키지는 슬라이드시켜 Slidable 를 표시하고 있는 상태로 세로로 스크롤 하면(자), 자동으로 Slidable 를 닫아 주는 것도 편리하고 좋네요~~

떠오르는 용도

ListTile을 사용하는 곳에서 사용할 수 있습니다.

패키지 소스 코드를 읽어 본 소감

Slidable 클래스는 애니메이션이나 많이 사용하고, 아직 순조롭게는 읽을 수 없다
IconSlideAction 클래스는 상당히 간단하고 Flexible 사용하고 있다고 생각했습니다.
그리고, 속성이 다른 무엇이 있는지 알 수 있는 기회가 되었습니다.
iconWidget 라고 말하는 것도 있고,
icon
iconWidget
caption
순서가 표시되었습니다. 텍스트는 caption으로 충분하고 특히 사용할 기회는 별로 없을 것 같다.

패키지의 소스 코드 제대로 본 것은 처음이었습니다만, 대단히 복잡해서 아직 아직 이해할 수 없다.