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

import 'dart:math';

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 _MyDragAndDropState();
  }
}

class _MyDragAndDropState extends State<SamplePage> {
  var isSuccessful = false;

  final _random = Random();

  final _colors = [
    Colors.green,
    Colors.yellow,
    Colors.blue,
  ];

  @override
  Widget build(BuildContext context) {
    var _color = _colors[_random.nextInt(3)];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('テスト中！')),
        body: Center(
            child: Column(
          children: <Widget>[
            Draggable<Color>(
              // この値がDragTargetに渡されます。
              data: _color,
              // ドラッグ前のウィジェットを指定します。
              // colorsプロパティは削除されたようです・・・。
              child: FlutterLogo(
                size: 100.0,
                textColor: _color,
              ),
              // ドラッグ中に移動するウィジェットを指定します。
              feedback: FlutterLogo(
                size: 150.0,
                textColor: _color,
              ),
              // ドロップできなかった場合の処理を指定します。
              onDraggableCanceled: (Velocity velocity, Offset offset) {
                setState(() {
                  isSuccessful = false;
                });
              },
            ),
            const SizedBox(
              height: 10,
            ),
            DragTarget(
              // DragTargetのウィジェットを指定します。
              builder: (
                context,
                List<Color?> candidateData, // Colorには?を付けないといけないようになったようです。
                rejectedData,
              ) {
                return Center(
                  child: isSuccessful
                      ? Container(
                          color: Colors.black,
                          height: 100.0,
                          width: 100.0,
                          child: Center(
                            child: FlutterLogo(
                              size: 100.0,
                              textColor: Colors.green,
                            ),
                          ),
                        )
                      : Container(
                          height: 100.0,
                          width: 100.0,
                          color: Colors.black,
                        ),
                );
              },
              // 受け取り可能か判断します。
              onWillAccept: (Color? data) {
                // ここもColorに?が必要です。
                return data == Colors.green;
              },
              // 受け取りに成功した時の処理です。
              onAccept: (Color? data) {
                setState(() {
                  isSuccessful = true;
                });
              },
              // DraggableがDragTarget上に乗ってから外れた場合
              onLeave: print,
            ),
          ],
        )),
      ),
    );
  }
}