Как использовать градиенты во Flutter с BoxDecoration и GradientAppBar

Введение

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

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

Предпосылки

Для выполнения этого урока вам понадобятся:

Чтобы загрузить и установить Flutter.
Чтобы скачать и установить Visual Studio Code.
Рекомендуется установить плагины для вашего редактора кода:
- Подключаемые модули 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, которому можно задать цвета, а также begin и end Выравнивание.
Скомпилируйте свой код и запустите его в эмуляторе:
Это создает линейный градиент, который начинается в верхней части экрана с синим цветом и постепенно переходит в красный цвет в нижней части экрана.
Шаг 3 — Использование остановок с LinearGradient
Также возможно иметь дополнительные цвета и более точно контролировать, где на экране должен вступать в силу переход цвета.
Снова откройте 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. Однако можно использовать пакет GradientAppBar для добавления цветовых градиентов в AppBar.
Откройте 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';
```
Наконец, вы можете заменить 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, посетите нашу тематическую страницу Flutter с упражнениями и проектами по программированию.

Как использовать градиенты во Flutter с BoxDecoration и GradientAppBar

Введение

Предпосылки

Шаг 1 — Настройка проекта

Шаг 2 — Использование LinearGradient

Шаг 3 — Использование остановок с LinearGradient

Шаг 4 — Использование GradientAppBar

Заключение