【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part104 Interaction model widgets

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part104 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part103 Interaction model widgets

引き続き、Interaction model widgetsについて学びます。

Interaction model widgets

Dismissibleウィジェット

directionプロパティ

diretionプロパティはスワイプの方向を設定できるようです。

DismissDirection.verticalにすると上下スワイプでDismissibleウィジェットが動作するようになります。

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

void main() {
  // runApp(new MaterialApp(home: new MyApp()));
  runApp(new MaterialApp(home: new SamplePage()));
}

class SamplePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SamplePageState();
  }
}

class _SamplePageState extends State<SamplePage> {
  List<String> _items = ['いち', 'に', 'さん'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('テスト中!')),
        body: ListView.builder(
          itemCount: _items.length,
          itemBuilder: (context, index) {
            return Dismissible(
              key: UniqueKey(),
              direction: DismissDirection.vertical,
              // 右スワイプして下に現れるウィジェット・・・下に?
              background: Container(
                color: Colors.amber,
                child: const Text('上から下にスワイプ'),
              ),
              // 左スワイプして下に現れるウィジェット・・・下・・・。
              secondaryBackground: Container(
                color: Colors.blue.shade400,
                child: const Text('下から上にスワイプ'),
              ),
              // スワイプして削除されたら呼び出される関数を定義します。
              onDismissed: (DismissDirection direction) {
                setState(() {
                  _items.removeAt(index);
                });
              },
              confirmDismiss: (DismissDirection direction) async {
                return deleteOK();
              },
              child: ListTile(title: Text('${_items[index]}')),
            );
          },
        ),
      ),
    );
  }

  /// 削除確認メソッド
  Future<bool> deleteOK() async {
    bool result = false;
    await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("確認"),
          content: Text("削除します。よろしいですか?"),
          actions: [
            ElevatedButton(
                onPressed: () async {
                  Navigator.of(context).pop(true);
                  result = true;
                },
                child: const Text("削除")),
            ElevatedButton(
              onPressed: () => Navigator.of(context).pop(false),
              child: const Text("キャンセル"),
            ),
          ],
        );
      },
    );

    return result;
  }
}

 

最後に

左右のスワイプだけじゃなく上下のスワイプにも対応しているのですね。
驚きました。
だからスワイプ動作のプロパティ名がbackgroundsecondaryBackgroundなんですね😯

今日はここまで!