Flutter 悬浮球

Flutter 悬浮球

这是悬浮球代码

import 'package:flutter/material.dart';
import 'package:day_dream/business/main/views/subpage/subsubpage/main_recommend_city.dart';
//import 'package:day_dream/business/main/views/MapScreen.dart';
class Drag extends StatefulWidget {
  @override
  _DragState createState() => new _DragState();
}

class _DragState extends State<Drag> with SingleTickerProviderStateMixin {
  double _top = 100.0; //距顶部的偏移
  double _left = 0.0;//距左边的偏移

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          top: _top,
          left: _left,
          child: GestureDetector(
            child:
            ClipOval(

          child:  Image(
                image: AssetImage("images/appicon.png"),
                width: 50.0
            )),// CircleAvatar(child: Text("此时")),
            //手指按下时会触发此回调
            onPanDown: (DragDownDetails e) {
              //打印手指按下的位置(相对于屏幕)
              print("用户手指按下：${e.globalPosition}");
//              Navigator.push( context,
//                      MaterialPageRoute(builder: (context) {
//                        return MainRecommendCity() ;
//                      }));
            },
            onTap: (){
              Navigator.push( context,
                  MaterialPageRoute(builder: (context) {
                    return MainRecommendCity();// MapScreen() ;
                  }));

            },
            //手指滑动时会触发此回调
            onPanUpdate: (DragUpdateDetails e) {
              //用户手指滑动时，更新偏移，重新构建
              setState(() {
                _left += e.delta.dx;
                _top += e.delta.dy;
              });
            },
            onPanEnd: (DragEndDetails e){
              //打印滑动结束时在x、y轴上的速度
              print(e.velocity);
            },
          ),
        )
      ],
    );
  }
}

使用悬浮球的页面

放在 Stack（）里面