如何在Flutter Column组件中嵌入Rive动画？

我正在开发一款Flutter应用，希望在Column组件中添加Rive动画。根据Rive官方文档，动画通常被放置在Scaffold组件内，但我的应用结构要求将动画直接嵌入Column中，目前在文档及搜索中未找到相关具体指导。

Rive官方Scaffold示例代码 #

官方提供的使用Scaffold的示例代码如下：

void main() {
  runApp(MaterialApp(home: SimpleAnimation()));
}

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: RiveAnimation.network(
          'https://cdn.rive.app/animations/vehicles.riv',
        ),
      ),
    );
  }
}

若要从资源包中播放动画，请使用：

RiveAnimation.asset('assets/truck.riv');

我的现有代码 #

以下是我的应用代码参考：

class WeSentYouAnEmail extends StatefulWidget {
  const WeSentYouAnEmail({Key? key}) : super(key: key);

  @override
  State<WeSentYouAnEmail> createState() => _WeSentYouAnEmailState();
}

class _WeSentYouAnEmailState extends State<WeSentYouAnEmail> {
  @override
  Widget build(BuildContext context) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: TextSelectionTheme(
          data: TextSelectionTheme.of(context).copyWith(
            selectionColor: Color(0xffD7D7D7),
            cursorColor: Color(0xff3B3B3B),
            selectionHandleColor: Color(0xffD7D7D7),
          ),
          child: Center(
            child: Padding(
              padding: const EdgeInsets.all(32.0),
              child: Container(
                height: double.maxFinite,
                width: 600,
                decoration: BoxDecoration(
                   color: Color(0xffF6F6F6),
                  borderRadius: BorderRadius.all(
                    Radius.circular(0.0),
                  ),
                ),
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            RichText(
                              text: TextSpan(
                                style: GoogleFonts.questrial(),
                                children: [
                                  WidgetSpan(
                                    child: Icon(FontAwesomeIcons.checkDouble,
                                        size: 40,
                                        color: Color(0xffD7D7D7)),
                                  ),
                                ],
                              ),
                            ),
                            RichText(
                              text: TextSpan(
                                style: GoogleFonts.questrial(),
                                children: [
                                  WidgetSpan(
                                    child: GestureDetector(
                                      onTap: () {
                                        showDialog(
                                            context: context,
                                            barrierColor: Colors.transparent,
                                            builder: (ctx) => HomePagePomodoroTimer());
                                      },
                                      child: Icon(FontAwesomeIcons.squareXmark,
                                        size: 40,
                                        color: Color(0xff3B3B3B),),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Container(
                            decoration: BoxDecoration(
                              color: Color(0xffF4CFDD),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.fromLTRB(96.0, 30, 96.0, 30),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Column(
                                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: [
                                      Text(
                                        "We send you an Email",
                                        style: TextStyle(
                                          fontSize: 20,
                                          fontStyle: FontStyle.normal,
                                          fontWeight: FontWeight.normal,
                                          color: Color(0xff3B3B3B),
                                        ),
                                      ),
                                    ],
                                  ),
                                  const SizedBox(height: 120,),
                                  const SizedBox(height: 90,),
                                  Divider(color: Color(0xff3B3B3B)),
                                  const SizedBox(height: 15,),
                                  const Center(
                                    child: Text(
                                      "Please, check your Email inbox",
                                      style: TextStyle(
                                        fontSize: 20,
                                        fontStyle: FontStyle.normal,
                                        fontWeight: FontWeight.normal,
                                        color: Color(0xff3B3B3B),
                                      ),
                                    ),
                                  ),
                                  const SizedBox(height: 15,),
                                ],
                              ),
                            ),
                          ),
                          Container(
                            decoration: BoxDecoration(
                              color: Color(0xffF4CFDD),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.fromLTRB(600.0, 30, 600.0, 200.0),
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

解决方案 #

RiveAnimation本质就是普通的Flutter Widget，完全可以直接作为Column的子组件嵌入，官方示例用Scaffold只是常见的全屏布局场景，并非强制要求。具体操作如下：

1. 直接嵌入RiveAnimation到Column：找到你想放置动画的位置（比如在"We send you an Email"文本下方），替换掉原来的占位SizedBox，直接添加RiveAnimation组件。
2. 指定动画尺寸：由于Column是流式布局，建议给RiveAnimation设置明确的宽高，避免布局异常，可通过SizedBox包裹或直接设置组件的width/height参数。
3. 选择动画源：根据需求使用RiveAnimation.network（网络资源）或RiveAnimation.asset（本地资源，需提前在pubspec.yaml中配置资源路径）。

修改后的代码片段示例 #

将你代码中两个占位的SizedBox替换为Rive动画：

// 替换原来的const SizedBox(height: 120,)和const SizedBox(height: 90,)
SizedBox(
  width: 200,
  height: 200,
  child: RiveAnimation.network(
    'https://cdn.rive.app/animations/email.riv', // 可替换为你需要的邮件相关动画链接
    fit: BoxFit.contain,
  ),
),

额外注意事项 #

• 如果使用本地Rive资源，需在pubspec.yaml中添加资源配置：

  assets:
    - assets/your_animation.riv
  

• 若需要控制动画的播放、暂停、切换等状态，可以使用RiveAnimationController来实现更复杂的交互逻辑。

内容的提问来源于stack exchange，提问作者pomoworko.com