Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@fujit33

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

More than 1 year has passed since last update.

はじめに

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

2
Help us understand the problem. What is going on with this article?
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
fujit33
brainpad
ブレインパッドは、2004年の創業以来、データによるビジネス創造と経営改善に向き合ってきたデータ活用・分析企業です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?