import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tracking Sample',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark().copyWith(
        primaryColor: Color(0xFF0D2336),
        scaffoldBackgroundColor: Color(0xFF12314A),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Getting the drag position'),
      ),
      body: const TrackingSample(),
    );
  }
}

class TrackingSample extends StatefulWidget {
  const TrackingSample({Key key}) : super(key: key);

  @override
  _TrackingSampleState createState() => _TrackingSampleState();
}

class _TrackingSampleState extends State<TrackingSample> {
  // デバッグ用
  String _position = 'Try the drag.';

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // アニメーション表示用Widget
        Center(
          child: SizedBox(
            height: 120,
            width: 120,
            // 後ほどアニメーションに置き換える
            child: Placeholder(),
          ),
        ),
        // デバッグ用
        Center(child: Text(_position)),
        // ドラッグ位置取得用Widget
        GestureDetector(
          onPanDown: (detail) {
            // 初回画面タップ時に一度だけ呼び出される
            // トラッキングに使用
            setState(
              () => _position = 'onPanDown: ${detail.localPosition}',
            );
          },
          onPanUpdate: (detail) {
            // ドラッグ位置が変化するたびに呼び出される
            // トラッキングに使用
            setState(
              () => _position = 'onPanUpdate: ${detail.localPosition}',
            );
          },
          onPanEnd: (detail) {
            // ドラッグ終了時に呼び出される
            // トラッキングを終了し、アニメーションの初期化に使用
            setState(
              () => _position = 'onPanEnd',
            );
          },
          child: Container(
            color: Colors.transparent,
          ),
        ),
      ],
    );
  }
}