如何将这个lottie动画展开填满整个屏幕 - Flutter

Question

我目前正在我的应用程序中制作渐变背景动画...我是在 lottie 动画的帮助下完成的！我试图将它封装在一个容器中并成功地做到了。但是有一个问题，尽管我将高度更改为大于 2000 的东西，但我无法使容器大于一定数量......我真的不知道该怎么做才能确保容器中没有空格屏幕并且此渐变填充所有设备的屏幕。这是代码。我还在屏幕截图中添加了它的外观，以便您了解发生了什么。

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class WelcomeScreen extends StatefulWidget {
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(0),
        child: Container(
          height: 1000,
          width: 1000,
          child: Lottie.asset('assets/gradient-background.json'),
        ),
      ),
    ));
  }
}

我是 flutter 开发的新手，所以如果这是一个非常愚蠢的错误，请原谅我！非常感谢，非常感谢您的帮助！

Answer 1

使用扩展的小部件并且不使用任何填充。你不需要提到容器的高度或宽度，并在容器

的装饰中使用背景属性

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class WelcomeScreen extends StatefulWidget {
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Expanded(
          child: Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/gradient-background.json'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

您还可以在 flutter 中制作自定义渐变，而不是使用背景照片。

Answer 2

首先感谢大家的帮助。特别感谢 Nehal，因为他让我意识到拟合属性结果证明是 lottie 资产动画的一个特征！非常感谢，这是正确的代码：

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class WelcomeScreen extends StatefulWidget {
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child:
            Lottie.asset('assets/gradient-background.json', fit: BoxFit.cover),
      ),
    ));
  }
}

Answer 3

我可以使用 OverflowBox 解决这个问题。

SizedBox(
   height: 120,
   child: OverflowBox(
     minHeight: 170,
     maxHeight: 170,
     child: Lottie.asset(
       'assets/file.json',
       repeat: false, 
     ),
  ),
)

如何将这个lottie动画展开填满整个屏幕 - Flutter

How to expand this lottie animation to fill the whole screen - Flutter

animation

flutter

lottie