Создание градиентов в Flutter
Development | Комментировать запись
Цветовой градиент – это такой тип заливки, которая принимает начальный и конечный цвет и создает плавную цветовую растяжку, автоматически определяя промежуточные точки. Если верить теории цвета, градиенты могут сделать приложение визуально более интересным.
В этой статье мы научим вас использовать пакеты LinearGradient и gradient_app_bar от BoxDecoration для создания градиентов в приложении Flutter.
Требования
Для выполнения этого урока нужно:
- Скачать и установить Flutter.
- Загрузить и установить Android Studio или 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
Tags: Flutter