Flutter如何结合FutureBuilder与Card构造器实现点击分享功能

原有代码问题 #

• 语法错误：GridView子项的Container构造函数内直接写return语句，不符合Dart语法规范
• 组件嵌套错误：GridView列表项内冗余嵌套Scaffold（页面级根组件），会引发布局、路由层级冲突
• 逻辑不合理：提前在组件构建阶段执行动态链接生成方法，不符合「点击卡片才生成链接触发分享」的需求
• 状态缺失：Future执行过程中未处理加载、错误状态，快照无数据时组件返回null会引发界面报错
• 组件废弃：原代码使用的FlatButton已在新版本Flutter中废弃，需替换为新的按钮组件

推荐实现方案（点击触发异步生成） #

该方案在用户点击卡片时才生成动态链接，减少不必要的性能消耗，实现逻辑更简洁：

child: Container(
  margin: const EdgeInsets.only(top: 120.0),
  child: GridView(
    physics: const BouncingScrollPhysics(),
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
    children: events.map((title) {
      return GestureDetector(
        onDoubleTap: () {
          Fluttertoast.showToast(msg: "msg");
        },
        // 点击卡片触发分享流程
        onTap: () async {
          // 展示加载提示
          Fluttertoast.showToast(msg: "正在生成分享链接...");
          // 异步等待动态链接生成
          final Uri shareUri = await createDynamicLink();
          // 唤起系统分享面板
          FlutterShare.share(
            title: '分享$title',
            text: '快来查看$title相关功能',
            linkUrl: shareUri.toString(),
            chooserTitle: '选择分享渠道'
          );
        },
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/bg.png"),
              fit: BoxFit.cover
            ),
          ),
          child: Card(
            margin: const EdgeInsets.all(14.0),
            // 卡片内容可根据需求自定义
            child: Center(
              child: Text(
                title,
                style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
              ),
            ),
          ),
        ),
      );
    }).toList(),
  ),
)

备选方案（卡片内嵌分享按钮+预加载链接） #

如果需要在卡片内固定展示分享按钮、进入页面就预生成链接，可使用修正后的FutureBuilder实现，注意补全所有状态处理：

child: Container(
  margin: const EdgeInsets.only(top: 120.0),
  child: GridView(
    physics: const BouncingScrollPhysics(),
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
    children: events.map((title) {
      return Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/bg.png"),
            fit: BoxFit.cover
          ),
        ),
        child: Card(
          margin: const EdgeInsets.all(14.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(title, style: const TextStyle(fontSize: 18)),
              const SizedBox(height: 16),
              // 固定尺寸分享按钮区域
              SizedBox(
                height: 50,
                width: 100,
                child: FutureBuilder<Uri>(
                  future: createDynamicLink(),
                  builder: (context, snapshot) {
                    // 加载中状态
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return const Center(child: CircularProgressIndicator(strokeWidth: 2));
                    }
                    // 加载错误状态
                    if (snapshot.hasError) {
                      return const Center(child: Text("链接生成失败", style: TextStyle(fontSize: 12)));
                    }
                    // 加载完成状态
                    if (snapshot.hasData) {
                      final Uri shareUri = snapshot.data!;
                      return TextButton(
                        style: TextButton.styleFrom(backgroundColor: Colors.amber),
                        onPressed: () => FlutterShare.share(
                          title: '分享$title',
                          text: '快来查看$title相关功能',
                          linkUrl: shareUri.toString(),
                          chooserTitle: '选择分享渠道'
                        ),
                        child: const Text('分享', style: TextStyle(color: Colors.black)),
                      );
                    }
                    return const SizedBox.shrink();
                  }
                ),
              )
            ],
          ),
        ),
      );
    }).toList(),
  ),
)

注意事项 #

• 若使用FutureBuilder方案，不要直接在build方法内初始化future参数，否则每次组件重建都会重新执行动态链接生成逻辑，造成资源浪费。建议在State的initState生命周期中提前生成链接存入变量，再传给FutureBuilder。
• 列表项内不要嵌套Scaffold组件，Scaffold为页面级根容器，仅用于每个路由页面的顶层嵌套。
• 新版本Flutter中FlatButton已被废弃，建议替换为TextButton/ElevatedButton组件。

内容的提问来源于stack exchange，提问作者simsim