Create a movable stack widget function using flutter

Create a movable stack widget function using flutter

This post focuses on a super secret Flutter project I designed for desktop and web that uses a canvas and draggable node interface. This tutorial will show how I use stacks to accomplish draggable functionality with widgets.

As shown below.

Draggable widget example shake

We will dynamically add items to the stack and to distinguish them, I will use the RandomColor typer. So we have to add that package.

random_color:

We can then create the HomeView that contains our stack

class HomeView extends StatefulWidget {
  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  List<Widget> movableItems = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
          children: movableItems,
        ));
  }
}

The functionality is very simple. We will have a MoveableStackItem stateful widget. It keeps track of its own position and color. The color is set on initialization and the position is updated via GestureDetector .

class _MoveableStackItemState extends State<MoveableStackItem> {
  double xPosition = 0;
  double yPosition = 0;
  Color color;

  @override
  void initState() {
    color = RandomColor().randomColor();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: yPosition,
      left: xPosition,
      child: GestureDetector(
        onPanUpdate: (tapInfo) {
          setState(() {
            xPosition += tapInfo.delta.dx;
            yPosition += tapInfo.delta.dy;
          });
        },
        child:Container(
          width: 150,
          height: 150,
          color: color,
        ),
      ),
    );
  }
}

The last thing to do is to add a new MoveableStackItem view. We will do this via a floating action button in HomeView.

 return Scaffold(
  floatingActionButton:FloatingActionButton(
    onPressed: () {
      setState(() {
        movableItems.add(MoveableStackItem());
      });
    },
  ),
  body: Stack(
    children: movableItems,
  ));

That's it. Now you have a movable Stack on your view.

This is the end of this article about creating a movable stack widget in flutter. For more related flutter stack widget content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Over 1 million StackOverflow Flutter 20 questions (recommended)

<<:  In-depth explanation of Mysql deadlock viewing and deadlock removal

>>:  Detailed explanation of mysql deadlock checking and deadlock removal examples

Recommend

JavaScript recursion detailed

Table of contents 1. What is recursion? 2. Solve ...

XHTML three document type declarations

XHTML defines three document type declarations. T...

MySQL 8.0.23 installation and configuration method graphic tutorial under win10

This article shares the installation and configur...

Step by step guide to build a calendar component with React

Table of contents Business Background Using Techn...

Detailed explanation of mysql user variables and set statement examples

Table of contents 1 Introduction to user variable...

How to package the uniapp project as a desktop application

Installing Electron cnpm install electron -g Inst...

Detailed explanation of the implementation of nginx process lock

Table of contents 1. The role of nginx process lo...

What are the rules for context in JavaScript functions?

Table of contents 1. Rule 1: Object.Method() 1.1 ...

Reasons and solutions for MySQL failing to create foreign keys

When associating two tables, a foreign key could ...

Detailed steps for installing MinIO on Docker

Table of contents 1. Check whether the docker env...

IIS 7.5 uses URL Rewrite module to achieve web page redirection

We all know that Apache can easily set rewrites f...