Building a Drag and Drop Application with Dart's Flutter Framework

What Will I Learn?

You will learn how to use Draggable Objects in Flutter
You will learn how to make use of DragTarget Objects
You will learn how to transfer state from one Widget to another through movement
You will learn how to make use of the Stack Layout Widget

Requirements

IDEA intellij or Visual Studio Code with the Dart/Flutter Plugins
The Dart SDK and the Flutter SDK
A fair understanding of Mobile development and Imperative or Object Oriented Programming

Difficulty

Intermediate

Description

In this video Tutorial, We look at how we can build out a drag and drop based widget inside of the Flutter Framework. The basic concept is to be able to drag a box from one part of a screen to another and be able to transfer the color state of the box to a fixed widget on the screen called a DragTarget. We also look at how we can position widgets on our screen using the Stack Layout Widget.

First we build out our skeleton application. We then are able to embed multiple boxes into this skeleton, each one with an Offset, a Color and a Label string. The Offset determines where the box is at a given moment with it having an initial state and a state that gets updated based on where the user drags the box. We then create a static UI element that makes use of the DragTarget Class. We can drag our Draggable Boxes onto this DragTarget widget to change it's color to the color of the Draggable Box.

The source code for this project can be found here

Video Tutorial

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors