Help us understand the problem. What is going on with this article?

[Flutter]画像をドラッグすることでカウンターを動かす

はじめに

Draggable widgetを使って画像をドラッグできるようにし、さらに指定の領域と重なったときに関数を実行する方法を示します。

今回は初期で作られるカウンターアプリを改変して、ピーターパン症候群のおじさんがリュウグウノツカイと重なるとカウンターが1増えるアプリを作りました。
画面収録 2020-05-18 2.06.46.mov.gif

実装

①ピーターパン症候群のおじさんの画像をDraggableで囲む
②リュウグウノツカイの画像をDraggableTargetで囲む
③重なったときにカウンターを動かす関数をonWillAccept内に記載する

// ①
Draggable(
  child: Image.network(
    // 移動させる画像
    'https://3.bp.blogspot.com/-QxAapI2H1Pk/VhSAsJpLPhI/AAAAAAAAzG0/80qjXfZlomk/s800/peterpan_syndrome.png',
    width: 200,
    height: 200,
  ),
  feedback: Image.network(
    // ドラッグ中の画像
    'https://3.bp.blogspot.com/-QxAapI2H1Pk/VhSAsJpLPhI/AAAAAAAAzG0/80qjXfZlomk/s800/peterpan_syndrome.png',
    width: 220,
    height: 220,
  ),
  childWhenDragging: Opacity(
    // 移動させた元の場所に表示する画像
    opacity: 0.0, // 完全に透明にする
    child: Image.network(
      'https://3.bp.blogspot.com/-QxAapI2H1Pk/VhSAsJpLPhI/AAAAAAAAzG0/80qjXfZlomk/s800/peterpan_syndrome.png',
      width: 200,
      height: 200,
    ),
  ),
  data: 'data',
),
// ②
DragTarget(
  // ドラッグ先の領域
  builder: (context, accepted, rejected) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: _willAccepted ? Colors.orange : Colors.transparent,
          width: _willAccepted ? 1 : 1,
        ),
      ),
      width: 600,
      height: 300,
      child: Center(
        child: Image.network(
'https://4.bp.blogspot.com/-6Sr0RZ5rlAQ/UYh8w3M6Z_I/AAAAAAAARRY/_c7ewyEIZYY/s400/shinkai_ryugunotsukai.png'),
      ),
    );
  },
  // ③
  onWillAccept: (data) {
    // 領域と重複したときの処理
    _incrementCounter();
    _willAccepted = true;
    return true;
  },
  onLeave: (data) {
    // 領域から離れたときの処理
    _willAccepted = false;
  },
),

ドロップしたときの処理など、まだまだ他にもできることはあります。ぜひ下記を参考にしてみてください。
公式ドキュメント
【Flutter】ドラッグ&ドロップの実装

参考

https://api.flutter.dev/flutter/widgets/Draggable-class.html
https://qiita.com/umechanhika/items/2f572f7b58f0316b4faf

fujit33
brainpad
ブレインパッドは、2004年の創業以来、データによるビジネス創造と経営改善に向き合ってきたデータ活用・分析企業です。
http://www.brainpad.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした