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
- Dart Flutter Cross Platform Chat Application Tutorial
- Building a Multi-Page Application with Dart's Flutter Mobile Framework
- Making Http requests and Using Json in Dart's Flutter Framework
- Building Dynamic Lists with Streams in Dart's Flutter Framework
- Using GridView, Tabs, and Steppers in Dart's Flutter Framework
- Using Global Keys to get State and Validate Input in Dart's Flutter Framework
- The Basics of Animation with Dart's Flutter Framework
- Advanced Physics Based Animations in Dart's Flutter Framework
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @rufans, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
Thank you for moderating my content as always.
Why Dart Flutter? I mean I have never heard of it until now and I just Wikipedia searched it. It reminded me of when I was learning to code and the fun that I used to have. Now I am coding less and less as I strayed away from the coding world and more into the Graphical Engines and 3D Modelling and Integration. You are lucky to be exploring those frameworks :P
Keep us posted, I will want to know more!
And from what I heard Utopian are a very dynamic group, but also SteemSTEM has good people :D
I am not surprised you haven't heard of flutter until now; its a relatively new technology and the dart programming language was burred after its release for various reasons, mainly because people didn't like the idea of it replacing JavaScript (which actually wasn't the original goal).
Well, there are various reasons why some one would choose flutter, the main draw being that you make a mobile app that uses one single code base (for both iOS and Android). The performance of Flutter is also very good and on par with native solutions. I personally like it because of the abstractions and the general method of doing things; decoupling the data layer from the UI and logic and using immutable widgets for everything etc.
Utopian has a ton of people (it is based on the open source community) and the SteemStem group is fairly nice as well; they've got some really intelligent people who write for them (scientists and mathematicians).
Anyhow, glad you enjoyed the content.
excellent publication I liked your content a lot and I follow you
Thank you, I am glad you enjoyed it.
Awesome! I'm looking for videos like this now that I'm in the process of learning flutter. Subscribed to your channel
I am glad you found value in this video. Flutter is a great piece of technology and I hope to see more companies and individuals start to use it in production.
Yes indeed, flutter seems to have several advantages over competitors, but React Native currently dominates in this area and Facebook did a bold move of building their own app and the Instagram app in React Native. I hope to see Google doing the same to demonstrate and encourage other to adopt it.
Hey @tensor I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x