Создание градиентов в Flutter

Development | Amber | Комментировать запись

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

В этой статье мы научим вас использовать пакеты LinearGradient и gradient_app_bar от BoxDecoration для создания градиентов в приложении Flutter.

Требования

Для выполнения этого урока нужно:

• Скачать и установить Flutter.
• Загрузить и установить Android Studio или Visual Studio Code.
• Рекомендуется также установить плагины для вашего редактора кода:
  • Flutter и Dart для Android Studio.
  • Flutter для Visual Studio Code.

Это руководство было проверено на версиях Flutter v1.22.2, Android SDK v30.0.2 и Android Studio v4.1.

1: Создание тестового проекта

Подготовив среду Flutter, вы можете запустить следующую команду, чтобы создать новое приложение:

flutter create flutter_gradient_example

Перейдите в каталог нового проекта:

cd flutter_gradient_example

Команда flutter create создаст демонстрационное приложение, которое будет отображать количество нажатий кнопки.

2: Использование LinearGradient

Откройте файл main.dart в редакторе кода и отредактируйте его, чтобы добавить BoxDecoration:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Gradient Example'),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: [
                Colors.blue,
                Colors.red,
              ],
            )
          ),
          child: Center(
            child: Text(
              'Hello Gradient!',
              style: TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Мы добавили decoration и BoxDecoration к виджету Container. Это позволяет нам определить LinearGradient, которому можно присвоить цвета, а также настроить выравнивание при помощи параметра Alignment и значений begin и end.

Скомпилируйте свой код и запустите его в эмуляторе.

Вы увидите линейный градиент: синий цвет в верхней части экрана постепенно переходит в красный цвет в нижней части экрана.

3: Управление градиентом с помощью stops

Также в градиенте можно использовать дополнительные цвета и более точно контролировать переход цветов.

Вернемся в файл main.dart в редакторе кода и добавим в него раздел stops:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Gradient Example'),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              stops: [
                0.1,
                0.4,
                0.6,
                0.9,
              ],
              colors: [
                Colors.yellow,
                Colors.red,
                Colors.indigo,
                Colors.teal,
              ],
            )
          ),
          child: Center(
            child: Text(
              'Hello Gradient!',
              style: TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Скомпилируйте свой код и запустите его в эмуляторе.

Вы получите линейный градиент, который начинается в верхней точке экрана 0,0 желтым цветом, затем он переходит в красный цвет, опускаясь вниз на 0,4, далее в цвет индиго на 0,6 вниз по экрану; на 1,0 по мере продвижения вниз по экрану он становится бирюзовым.

4: Использование GradientAppBar

BoxDecoration нельзя применить к AppBar. Для добавления цветовых градиентов в AppBar можно использовать пакет GradientAppBar.

Откройте файл pubspec.yaml в редакторе кода и добавьте gradient_app_bar:

dependencies:
  flutter:
    sdk: flutter
  gradient_app_bar: ^0.1.3

Вернитесь в файл main.dart и импортируйте gradient_app_bar:

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

Теперь в файле main.dart можно заменить AppBar на GradientAppBar и последующие цвета:

appBar: GradientAppBar(
  title: Text('Flutter Gradient Example'),
  gradient: LinearGradient(
    colors: [
      Colors.cyan,
      Colors.indigo,
    ],
  ),
),

В этом примере мы используем LinearGradient с голубым и индиго.

Примечание: В более ранней версии GradientAppBar использовались параметры backgroundColorStart и backgroundColorEnd, которые устарели с версии 0.1.0.

Скомпилируйте свой код и запустите его в эмуляторе.

Обратите внимание на панель в верхней части экрана: вы увидите линейный градиент, который начинается в левой части экрана с голубого цвета и постепенно переходит в цвет индиго в правой части экрана.

Заключение

В этой статье вы научились использовать пакеты LinearGradient и GradientAppBar для настройки градиентов в приложении Flutter.

Читайте также: Как создать свое первое приложение Flutter