Flutter 不只是写 App —— 用代码打造一个“会说话”的桌面宠物

Flutter 不只是写 App —— 用代码打造一个“会说话”的桌面宠物**

当我们谈论 Flutter，大多数人想到的是“跨平台 App 开发”、“Material Design”或“高性能 UI”。但今天，我们不走寻常路 —— 我要用Flutter 构建一个运行在桌面端的“会说话的小狐狸”宠物应用，它能随机弹出气泡对话、眨眼卖萌，还能随着鼠标靠近做出反应。

这不是又一篇“计数器教程”，而是一次对 Flutter 能力边界的探索：

谁说 Flutter 只能做传统界面？它也能成为创意表达的画布。

🌟 项目亮点

• 使用 Flutter 构建无边框透明窗口桌面应用
• 实现动画角色 + 气泡对话
• 利用dart:math和Timer做行为逻辑
• 支持鼠标互动（接近时转头）
• 完全自定义绘制与布局

这不仅是一个玩具，更是展示 Flutter 在非传统 UI 场景下的创造力。

✅ 环境准备

确保你已安装：

flutter desktopenable-dwindows,macos,linux

创建项目并启用桌面支持后，我们直接进入核心编码。

🦊 第一步：设计我们的小狐狸

我们将使用一张 PNG 图片作为小狐狸形象（你可以替换成任何你喜欢的角色）。假设图片名为fox.png，放在assets/images/fox.png。

pubspec.yaml 配置资源

flutter:assets:-assets/images/fox.png

💬 第二步：写一个浮动对话气泡

我们来做一个从头顶飘出的对话框，带圆角和箭头。

// widgets/speech_bubble.dartimport'package:flutter/material.dart';classSpeechBubbleextendsStatelessWidget{finalStringmessage;finalDurationduration;constSpeechBubble({super.key,requiredthis.message,this.duration=constDuration(seconds:3)});@overrideWidgetbuild(BuildContextcontext){returnAnimatedOpacity(opacity:1.0,duration:constDuration(milliseconds:300),child:Container(padding:constEdgeInsets.symmetric(horizontal:12,vertical:8),decoration:BoxDecoration(color:Colors.black.withOpacity(0.7),borderRadius:BorderRadius.circular(16),boxShadow:[BoxShadow(color:Colors.black.withOpacity(0.3),blurRadius:6,)],),child:Text(message,style:constTextStyle(color:Colors.white,fontSize:14),),),);}}

🖼️ 第三步：主界面 —— 透明无边框 + 角色显示

我们要让窗口没有标题栏，并且背景透明。

修改 main.dart

// main.dartimport'package:flutter/material.dart';import'package:window_manager/window_manager.dart';voidmain()async{WidgetsFlutterBinding.ensureInitialized();awaitwindowManager.ensureInitialized();// 设置窗口配置（仅桌面有效）WindowOptionswindowOptions=constWindowOptions(size:Size(200,200),center:true,skipTaskbar:true,// 不显示在任务栏transparent:true,// 透明背景frameless:true,// 无边框);windowManager.waitUntilReadyToShow(windowOptions,()async{awaitwindowManager.show();awaitwindowManager.focus();});runApp(constPetApp());}

⚠️ 注意：需要添加依赖window_manager: ^0.4.0来控制原生窗口行为。

🧠 第四步：小狐狸大脑 —— 行为逻辑

我们现在写一个状态类，让它每隔几秒“说点什么”。

// screens/pet_screen.dartimport'dart:async';import'dart:math';import'package:flutter/material.dart';import'../widgets/speech_bubble.dart';classPetScreenextendsStatefulWidget{constPetScreen({super.key});@overrideState<PetScreen>createState()=>_PetScreenState();}class_PetScreenStateextendsState<PetScreen>withSingleTickerProviderStateMixin{lateAnimationController_blinkController;double mouseX=0,mouseY=0;bool isLookingAtMouse=false;String?currentMessage;Timer?_messageTimer;finalList<String>messages=['今天天气真好~','你瞅啥？','摸摸头会变强哦','我饿了，有吃的吗？','别靠太近！害羞了啦','呼噜呼噜…睡着了',];@overridevoidinitState(){super.initState();// 眨眼动画（眼睛开合）_blinkController=AnimationController(vsync:this,duration:constDuration(milliseconds:150),);// 定时说话_startRandomMessaging();// 监听鼠标移动（通过全局事件）windowManager.addListener(_onMouseMove);}void_startRandomMessaging(){Timer.periodic(Duration(seconds:Random().nextInt(8)+5),(timer){if(!mounted)return;_showMessage(messages[Random().nextInt(messages.length)]);});}void_showMessage(Stringmsg){setState((){currentMessage=msg;});// 3秒后消失_messageTimer?.cancel();_messageTimer=Timer(constDuration(seconds:3),(){if(!mounted)return;setState((){currentMessage=null;});});// 触发眨眼_blinkController.forward().then((_)=>_blinkController.reverse());}void_onMouseMove(PointerEventevent){finalwindowSize=windowManager.getSize();finalwindowPos=windowManager.getPosition();// 计算窗口中心finalcenterX=windowPos.x+windowSize.width/2;finalcenterY=windowPos.y+windowSize.height/2;// 判断鼠标是否靠近（距离小于 200px）finaldx=event.screenX-centerX;finaldy=event.screenY-centerY;finaldistance=sqrt(dx*dx+dy*dy);if(distance<200&&!isLookingAtMouse){setState((){isLookingAtMouse=true;});}elseif(distance>=200&&isLookingAtMouse){setState((){isLookingAtMouse=false;});}}@overridevoiddispose(){_blinkController.dispose();_messageTimer?.cancel();windowManager.removeListener(_onMouseMove);super.dispose();}@overrideWidgetbuild(BuildContextcontext){returnScaffold(backgroundColor:Colors.transparent,body:Stack(children:[// 小狐狸本体（可缩放+倾斜看向鼠标）Positioned.fill(child:Transform.scale(scale:1.3,child:Transform.rotate(angle:isLookingAtMouse?-0.2:0,child:Image.asset('assets/images/fox.png',fit:BoxFit.contain),),),),// 眼睛区域（用于模拟眨眼）Positioned(top:60,left:80,right:80,child:Row(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:[_buildEye(),_buildEye(),],),),// 对话气泡（顶部显示）if(currentMessage!=null)Align(alignment:Alignment.topCenter,child:Padding(padding:constEdgeInsets.only(top:16),child:SpeechBubble(message:currentMessage!),),),],),);}Widget_buildEye(){returnAnimatedBuilder(animation:_blinkController,builder:(context,child){finalheight=lerpDouble(20,5,_blinkController.value)!;returnContainer(width:18,height:height,decoration:BoxDecoration(color:Colors.black,borderRadius:BorderRadius.vertical(top:Radius.elliptical(9,height/2),bottom:Radius.elliptical(9,height/2),),),);},);}}

🎉 最终效果说明

运行flutter run -d macos或 Windows 后，你会看到：

• 一个半透明窗口中站着一只小狐狸
• 每隔几秒冒出一句随机对话（持续 3 秒）
• 眨眼动画自然流畅
• 当你把鼠标靠近时，它会“害羞地”歪头看你
• 不占用任务栏，像真正的桌面宠物一样安静陪伴

🔧 技术深挖：Flutter 的隐藏能力

这些能力表明：Flutter 不仅适合做 App，也可以用来开发工具类、创意类甚至游戏化桌面程序。

🚀 扩展想法（你可以继续做的）

• 加入语音合成：“说”出来而不是只显示文字
• 添加拖拽功能：允许用户移动宠物
• 多角色切换：按快捷键换猫、狗、熊猫
• “心情系统”：根据时间或用户活动改变行为
• 打包成独立.exe或.app分享给朋友

结语：Flutter 是画笔，不是模板

大多数文章教你“怎么做登录页”、“怎么调接口”，但我们忘了：

技术的本质是创造。

这个“会说话的小狐狸”或许没用，但它有趣、有温度、有生命力 —— 正如 Flutter 给开发者带来的自由感。

下次当你打开编辑器，请记住：

Flutter 不是用来复制别人 App 的工具，
而是你心中奇思妙想落地的桥梁。

📦 依赖清单（pubspec.yaml）

dependencies:flutter:sdk:flutterwindow_manager:^0.4.0

GitHub 示例资源建议包含：

• fox.png（透明背景 PNG）
• 完整项目结构截图
• 编译后的桌面版演示视频（GIF）

“有用的工具千篇一律，有趣的灵魂万里挑一。”
—— 愿你的代码，永远带着一点顽皮。

现在，去让你的应用学会微笑吧 😸欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。