Как использовать градиенты во 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 с упражнениями и проектами по программированию.