大家好,

最近我开始学习移动应用开发，并正在开发一个B2B SaaS应用。这个应用将在桌面、Android和iOS上运行。

我的当前技术栈是Flutter/Dart。这个应用已经相当成熟：项目管理、材料/导入逻辑、用户/公司处理、文档工作流和多个业务特定屏幕已经实现。

我遇到的主要问题是UI。

我有一个Figma设计，采用了现代的“软玻璃”风格：细微的渐变、柔和的阴影、玻璃样卡片、暗/亮模式、打磨的移动卡片和悬浮动作按钮。Figma设计最初非常像web/Tailwind，具有以下值：半透明锌背景、环、CSS阴影、内置阴影、渐变、悬停/按下状态等。

我尝试将这个设计转移到Flutter，但很难。结果在Android模拟器上经常不正确：

  • 渐变变得太过激烈或看起来像斜的“三角块”
  • 阴影变成黑暗的块
  • UI有时看起来太扁平了，减少渐变后
  • 在某些尝试中，暗和亮模式值被混淆了
  • CSS样式的环/内置阴影似乎不太容易在Flutter中清晰地翻译
  • Android模拟器的渲染使我难以判断设计是否实际上是错误的还是只是渲染得不同

即使经过多次迭代，Flutter结果仍然不够接近Figma Soft Glass UI。

在这种情况下，是否值得继续使用Flutter来实现这种UI，还是应该考虑切换到React/React Native/Tauri或其他栈？

我的要求是：

  • 如果可能的话，一份代码
  • 桌面+Android+iOS
  • 美观的现代UI
  • B2B/生产力应用，而不是游戏
  • 我目前正在单独工作
  • 我只 recently 开始学习应用开发
  • 我想避免重写所有内容，除非有很强的理由

我理解React/Tailwind可能更容易复制这个特定的Figma/Web样式UI，但Flutter似乎吸引人，因为跨平台支持，尤其是桌面+移动从一份代码。

我的问题：

  1. Flutter仍然适合用于桌面、Android和iOS上实现高级Soft Glass UI吗？
  2. 这些视觉问题主要是由于试图将web/Tailwind CSS效果太过字面地翻译到Flutter吗？
  3. 测试在一个真正的Android设备上是否会比在Android Studio模拟器上测试对梯度/阴影有很大不同？
  4. React Native或React + Tauri是否更适合此类UI和平台目标？
  5. 如果我继续使用Flutter，实现设计的最佳方法是什么？
  6. 自定义设计令牌？
  7. 自定义卡片组件？
  8. 避免CSS样式的玻璃形态？
  9. 使用更少的渐变/阴影？
  10. 不同的渲染设置？
  11. 当您认为切换栈比继续优化Flutter UI更合适时，什么时候会推荐？

我非常希望从有Flutter、React Native、Tauri或跨平台商业应用经验的人那里获得实用的建议。

我不试图开始一个“Flutter vs React”辩论。我主要试图避免在项目早期做一个坏的技术决策。

谢谢！