Как растянуть эту lott ie анимацию на весь экран - Flutter - PullRequest
Новая
       40

Как растянуть эту lott ie анимацию на весь экран - Flutter

0 голосов
/ 17 июня 2020

It doesnt fill the complete screen В настоящее время я работаю над созданием градиентной фоновой анимации в моем приложении ... Я делаю это с помощью lott ie анимации! Я попытался поместить его в контейнер, и мне это удалось. Однако есть одна проблема: я не могу сделать контейнер больше определенного количества, несмотря на то, что я изменил высоту на что-то большее, чем 2000 ... Я действительно не знаю, что делать, чтобы убедиться, что в поле нет пробелов screen и что этот градиент заполняет экран на всех устройствах. Вот код. Я также добавил скриншот того, как это выглядит, чтобы вы поняли, что происходит. 

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'),
        ),
      ),
    ));
  }
}

Я новичок в разработке флаттера, поэтому, пожалуйста, простите меня, если это очень глупая ошибка! Большое спасибо, и я очень ценю вашу помощь!

Ответы [ 2 ]

2 голосов
/ 17 июня 2020

Прежде всего, я хотел бы поблагодарить вас всех за вашу помощь. Особая благодарность Нехалу за то, что он сообщил мне о свойстве соответствия, которое, как оказалось, является особенностью анимации объекта lott ie! Большое спасибо, это правильный код: 

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),
      ),
    ));
  }
}
1 голос
/ 17 июня 2020

Используйте расширенный виджет и не используйте отступы. Вам не нужно указывать высоту или ширину контейнера и использовать свойство background в оформлении контейнера 

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,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Также вы можете создать собственный градиент во флаттере вместо использования фоновой фотографии.

...