flutter_draggable_example.dart

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/foundation.dart';
import 'package:build_context/build_context.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  SystemChrome.setEnabledSystemUIOverlays([
    SystemUiOverlay.bottom
  ]);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  Map<Question, bool> _game = {};

  final Random num1 = Random();
  final Random num2 = Random();
  final Random signal = Random();

  static const _maxBox = 4;

  void _newGame() {
    _game.clear();

    var a = 0;
    var signalType;
    while (_game.length != _maxBox) {
      final v1 = num1.nextInt(30);
      final v2 = num2.nextInt(11);
      final s = signal.nextInt(4);

      if (s == 0) {
        signalType = '+';
        a = v1 + v2;
      } else if (s == 1) {
        signalType = '-';
        a = v1 < v2 ? v2 - v1 : v1 - v2;
      } else if (s == 2) {
        signalType = '*';
        a = v1 * v2;
      } else if (s == 3) {
        signalType = '/';
        a = (v1 < v2 ? v2 / v1 : v1 / v2).toInt();
      }

      final q = Question(
        first: v1,
        second: v2,
        answer: a,
        signal: signalType
      );
      if (!_game.containsKey(q)) {
        setState(() => _game[q] = false);
      }
    }
  }

  void _onAnsweredQuestion() {
    final correctedAnswers =
        _game.values.where((isCorrect) => isCorrect).length;
    if (correctedAnswers == _maxBox) {
      _newGame();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    final areaHeight = (context.mediaQuerySize.height / 2) - 48;

    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
              color: Color(0xff19cce9),
              height: areaHeight,
              width: context.mediaQuerySize.width,
              alignment: Alignment.center,
              child: Wrap(
                alignment: WrapAlignment.center,
                children: _game.keys.map((baseQuestion) {
                  return DragTarget<int>(
                    onWillAccept: (answer) {
                      return answer == baseQuestion.answer;
                    },
                    onAccept: (answer) {
                      setState(() => _game[baseQuestion] = true);
                      _onAnsweredQuestion();
                    },
                    builder: (context, data, _data) {
                      return _AnswerWidget(
                        showQuestion: _game[baseQuestion],
                        answer: baseQuestion.answer.toString(),
                        question: baseQuestion.questionFormat,
                      );
                    },
                  );
                }).toList(),
              ),
            ),
          ),
          Expanded(
            child: Container(
              height: areaHeight,
              color: Color(0xff282828),
              width: context.mediaQuerySize.width,
              alignment: Alignment.center,
              child: Wrap(
                alignment: WrapAlignment.center,
                children: _game.keys.map((question) {
                  var wasAnswered = _game[question];
                  if (wasAnswered) {
                    return _QuestionWidget();
                  }
                  return Draggable<int>(
                    data: question.answer,
                    feedback: Transform.rotate(
                      angle: -0.1,
                        child: _QuestionWidget(data: question, isChild: true,)),
                    child: _QuestionWidget(data: question, isChild: true),
                    childWhenDragging: _QuestionWidget(),
                  );
                }).toList(),
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.refresh),
        onPressed: _newGame,
    ),
    );
  }
}

class _AnswerWidget extends StatelessWidget {
  _AnswerWidget({this.answer, this.question, this.showQuestion});

  final String answer;
  final String question;
  final bool showQuestion;

  @override
  Widget build(BuildContext context) {
    final height = (context.mediaQuerySize.height / 2) / 2.6;

    return Container(
      width: 180,
      height: height,
      margin: const EdgeInsets.all(4),
      decoration: BoxDecoration(
          color: showQuestion ? Color(0xff3f2c85) : Color(0xff16788e),
          borderRadius: BorderRadius.circular(8),
      ),
      child: Center(
        child: Text( showQuestion ? question : answer,
          textAlign: TextAlign.center,
          style: TextStyle(
              fontSize: 34,
              color: showQuestion ? Colors.white : Colors.black12,
              fontWeight: FontWeight.bold
          ),
        ),
      ),
    );
  }
}

class _QuestionWidget extends StatelessWidget {
  _QuestionWidget({
    this.data,
    this.isChild = false
  });

  final Question data;
  final bool isChild;

  String _getText() {
    return data == null ? '' : "${data.first} ${data.signal} ${data.second}";
  }

  @override
  Widget build(BuildContext context) {
    final height = (context.mediaQuerySize.height / 2) / 2.6;
    return Container(
      width: 180,
      height: height,
      margin: const EdgeInsets.all(4),
      decoration: BoxDecoration(
          color: Color( isChild ? 0xff3f2c85 : 0xff1e1e1e),
          borderRadius: BorderRadius.circular(8),
          border: Border.all(
            color: Colors.white24
          )
      ),
      child: Center(
        child: Material(
          color: Colors.transparent,
          child: Text(_getText(),
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 32,
              color: Colors.white,
              fontWeight: FontWeight.bold
            ),
          ),
        ),
      ),
    );
  }
}


class Question {
  Question({
    @required this.first,
    @required this.second,
    @required this.signal,
    @required this.answer,
  }) : assert (first != null),
        assert(second != null),
        assert(answer != null),
        assert(signal != null);

  final int first;
  final int second;
  final int answer;
  final String signal;

  bool get isSum => signal == '+';
  bool get isMult => signal == '*';
  bool get isDiv => signal == '/';
  bool get isSub => signal == '-';

  Question isCorrect(bool isCorrect) {
    return Question(
      first: first,
      second: second,
      answer: answer,
      signal: signal,
    );
  }

  String get questionFormat => "$first $signal $second";

  @override
  int get hashCode =>
      first.hashCode ^
      second.hashCode ^
      signal.hashCode ^
      answer.hashCode;

  @override
  bool operator ==(o) {
    return identical(this, o) ||
        o is Question &&
            o.first == first &&
            o.second == second &&
            o.answer == answer &&
            o.signal == signal;
  }
}