Flutter可移动组件插件flutter_moveable的使用

Flutter可移动组件插件flutter_moveable的使用

描述

flutter_moveable 是一个用于一对一视频或音频通话、消息头像等场景的对象可移动小部件。

示例图片

Message Head Style:

One to One Calling Style:

特性

• 任意位置放置系统
• 水平停靠放置系统
• 垂直停靠放置系统
• 任何中心侧边放置系统
• 任何角落放置系统
• 最近邻放置系统
• 底部和顶部中心放置系统
• 底部和顶部任意角落放置系统
• 顶部和底部任意侧边放置系统
• 顶部和底部任意角落放置系统
• 左侧和右侧任意侧边放置系统
• 左侧和右侧任意角落放置系统
• 右侧和左侧任意侧边放置系统
• 右侧和左侧任意角落放置系统

使用方法

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 flutter_moveable 插件：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_moveable/flutter_moveable.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 隐藏调试横幅
      home: Scaffold(
        backgroundColor: Colors.black, // 背景颜色为黑色
        extendBody: true, // 扩展body到屏幕边缘
        extendBodyBehindAppBar: true, // 扩展body到appBar后面
        appBar: AppBar(
          elevation: 0, // 不显示阴影
          toolbarHeight: 0, // 高度为0
          backgroundColor: Colors.transparent, // 背景透明
          systemOverlayStyle: const SystemUiOverlayStyle(
            statusBarColor: Colors.transparent, // 状态栏透明
          ),
        ),
        body: Moveable( // 可移动组件
          alignment: Alignment.topRight, // 初始对齐方式：右上角
          type: MovingType.cornerSide, // 移动类型：角落侧边
          movedAnimationTime: 200, // 移动后的动画时间
          movingAnimationTime: 50, // 移动中的动画时间
          object: MoveableObject.rational(
            maxWidth: 60, // 最大宽度
            ratio: 1, // 宽高比
            margin: const EdgeInsets.only(top: 40), // 上边距
            builder: (dragging, child) { // 构建函数
              return Center(
                child: AnimatedContainer(
                  width: dragging ? 50 : 60, // 根据拖动状态设置宽度
                  clipBehavior: Clip.antiAlias, // 抗锯齿剪裁
                  decoration: const BoxDecoration(shape: BoxShape.circle), // 圆形装饰
                  duration: const Duration(milliseconds: 200), // 动画持续时间
                  child: child,
                ),
              );
            },
            child: Image.asset(
              "assets/images/img_avatar.png", // 头像图片路径
              fit: BoxFit.cover, // 图片填充方式
            ),
          ),
          child: const SizedBox(
            width: double.infinity, // 占满整个宽度
            height: double.infinity, // 占满整个高度
          ),
        ),
      ),
    );
  }
}

另一个示例代码如下：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_moveable/flutter_moveable.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 隐藏调试横幅
      home: Scaffold(
        backgroundColor: Colors.black, // 背景颜色为黑色
        extendBody: true, // 扩展body到屏幕边缘
        extendBodyBehindAppBar: true, // 扩展body到appBar后面
        appBar: AppBar(
          elevation: 0, // 不显示阴影
          toolbarHeight: 0, // 高度为0
          backgroundColor: Colors.transparent, // 背景透明
          systemOverlayStyle: const SystemUiOverlayStyle(
            statusBarColor: Colors.transparent, // 状态栏透明
          ),
        ),
        body: Moveable( // 可移动组件
          alignment: Alignment.topRight, // 初始对齐方式：右上角
          type: MovingType.cornerSide, // 移动类型：角落侧边
          movedAnimationTime: 200, // 移动后的动画时间
          movingAnimationTime: 50, // 移动中的动画时间
          object: MoveableObject.rational(
            maxWidth: 120, // 最大宽度
            ratio: 1 / 1.5, // 宽高比
            margin: const EdgeInsets.only(
              top: 40,
              bottom: 16,
              left: 16,
              right: 16,
            ), // 四周边距
            builder: (dragging, child) { // 构建函数
              return Center(
                child: AnimatedContainer(
                  width: dragging ? 100 : 120, // 根据拖动状态设置宽度
                  clipBehavior: Clip.antiAlias, // 抗锯齿剪裁
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16), // 圆角矩形装饰
                  ),
                  duration: const Duration(milliseconds: 200), // 动画持续时间
                  child: child,
                ),
              );
            },
            child: Image.asset(
              "assets/images/img_avatar.png", // 头像图片路径
              fit: BoxFit.cover, // 图片填充方式
            ),
          ),
          child: const SizedBox(
            width: double.infinity, // 占满整个宽度
            height: double.infinity, // 占满整个高度
          ),
        ),
      ),
    );
  }
}