Блог

Главная - Вопросы по программированию - Контейнер плавного перехода цвета дротиком

Контейнер плавного перехода цвета дротиком

#flutter #dart #colors #transition

#трепетать #дротик #Цвет #переходный период #трепетание #переход

Вопрос:

Как я могу создать, скажем, контейнер с затененным цветом, как на прилагаемом рисунке?

Я не просто использую изображение, потому что было бы намного сложнее внести в него небольшие изменения, а цвет должен иногда занимать всю ширину экрана, и, возможно, я собираюсь его анимировать.

https://i.stack.imgur.com/2QzXC.jpg

Комментарии:

1. Отвечает ли это на ваш вопрос? owenhalliday.co.uk/flutter-gradient

Ответ №1:

 class Gradiant extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: new BoxDecoration(
          gradient: new LinearGradient(
              colors: [Colors.blue[800], Colors.purple, Colors.red],
              begin: Alignment.bottomCenter,
              end: Alignment.topCenter,
              stops: [0.2, 0.6, 1]),
        ),
      ),
    );
  }
}

Ответ №2:

Вы можете использовать gradient свойство BoxDecoration , чтобы получить то, что вы хотите.

Я добавил демо:

 class StackOver extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              // use your preferred colors 
              Colors.red[900],
              Colors.blue[900],
            ],
            // start at the top
            begin: Alignment.topCenter,
           // end at the bottom
            end: Alignment.bottomCenter,
          ),
        ),
      ),
    );
  }
}

Результат:

Результат