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

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

前回

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

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

Interaction model widgets

Dismissibleウィジェット

background, secondaryBackgroundプロパティ

backgroundプロパティは右スワイプして下に現れるウィジェット。secondaryBackgroundプロパティは左スワイプして下に現れるウィジェットになります。

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(),
              // 右スワイプして下に現れるウィジェット・・・下に?
              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;
  }
}

右スワイプ時と左スワイプ時で異なるウィジェットを使えます。

最後に

secondaryBackgroundを指定しない場合は左右どちらのスワイプでもbackgroundのウィジェットになります。
今日はここまで!