Flutter案例-拖拽变色，附源码

最新推荐文章于 2024-07-16 21:34:16 发布

半斤水泥

最新推荐文章于 2024-07-16 21:34:16 发布

阅读量733

点赞数

本文链接：https://blog.csdn.net/hhyihquk1/article/details/89606543

版权

这篇博客展示了如何在Flutter中创建一个拖拽变色的效果。作者将界面分为拖拽区域（两个小方块）和被染色区域（大方块），并使用StatefulWidget来处理位置和颜色变化。通过详细讲解文件目录和关键代码，读者可以跟随教程实现相同功能。同时，文章提供了技术胖的视频参考链接作为辅助学习资源。

摘要由CSDN通过智能技术生成

效果图：拖拽上方两个区域到下方区域内，下方区域颜色变为拖拽区域颜色

分析结构：

分成两个区域，一个是被拖拽区域(上方两个小方块)，一个是被染色区域（中间的大方块）--->分成两个部分，因为两个区域一个位置发生变化，一个颜色发生变化，所以定义两个空间均为statefulwidget；

文件目录：

开搞：

1、新建拖拽区域小部件，注释及步骤见下方源码

import 'package:flutter/material.dart';

class DraggableWidget extends StatefulWidget{
//创建小部件的时候需要定义位置和颜色
  final Offset offset;
  final Color widgetColor;
  const DraggableWidget({Key key,
    this.offset,
    this.widgetColor
  }):super(key:key);
  @override
  _DraggableWidget createState() {
    // TODO: implement createState
    return _DraggableWidget();
  }
}
c