Как улучшить ваше приложение Flutter с помощью градиентного дизайна

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

Градиенты - это красивые элементы дизайна, которые переживают возрождение в мире дизайна. Крупные компании, в том числе Hulu и Spotify, часто используют такой дизайн в своих продуктах. В этой статье вы узнаете, как добавлять и настраивать эти градиентные конструкции в ваше приложение Flutter.

Линейные градиенты

Согласно своему названию, этот градиент проходит по простому линейному участку. На этом участке происходит плавный переход цвета. Пример ниже:

Как видите, цвет меняется линейно слева направо. Линейные градиенты можно изменить, чтобы этот цветовой переход происходил в другом направлении. В следующем примере демонстрируется линейный градиент, который выравнивается от bottomLeft до topRight:

Вот как закодировать линейный градиент во Flutter:

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [Colors.purple, Colors.blue])
  ),
)

Если вы не укажете свойство «begin» или «end» в конструкторе, значение по умолчанию будет от centerLeft до centerRight, как в первом примере в этом разделе.

Вот полный код примера приложения с простым линейным градиентом:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
              child: Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [Colors.purple, Colors.blue])))),
    ));
  }
}

Есть несколько способов настроить градиент. Начнем с добавления еще двух цветов и изменения направления градиента:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
              child: Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.bottomLeft,
                          end: Alignment.topRight,
                          colors: [Colors.red, Colors.yellow, Colors.blue, Colors.purple])))),
        ));
  }
}

Вышеупомянутый линейный градиент следует равномерному распределению; добавляя остановки в наш код, мы можем настроить распределение каждого цвета в градиенте. Каждое значение в массиве конечных значений определяет, насколько преобладает каждый цвет в градиенте. Вот код того же линейного градиента с некоторыми конечными значениями:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
              child: Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.bottomLeft,
                          end: Alignment.topRight,
                          // Add one stop for each color 
                          // Values should increase from 0.0 to 1.0
                          stops: [0.1, 0.5, 0.8, 0.9],
                          colors: [Colors.red, Colors.yellow, Colors.blue, Colors.purple])))),
        ));
  }
}

Соответствующий линейный градиент:

Радиальные градиенты

Эти типы градиентов меняют цвет в зависимости от местоположения пикселя от центральной точки, отсюда и название «радиальный».

Вот как закодировать базовый радиальный градиент во Flutter:

Container(
  decoration: BoxDecoration(
      gradient: RadialGradient(
        colors: [Colors.yellow, Colors.deepPurple],
    ),
  ),
),

Вот полный код примера приложения с простым радиальным градиентом:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
              child: Container(
                decoration: BoxDecoration(
                  gradient: RadialGradient(
                    colors: [Colors.yellow, Colors.deepPurple],
                  ),
                ),
              ),
          ),
        ));
  }
}

Подобно линейным градиентам, радиальные градиенты также можно настроить множеством методов:

Цвета и стопы

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

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                 colors: [Colors.yellow, Colors.red, Colors.purple],
                 // Add one stop for each color 
                 // Values should increase from 0.0 to 1.0
                 stops: [0.1, 0.5, 0.75]
                ),
              ),
            ),
          ),
        ));
  }
}

Центр

В приведенных выше примерах центральная точка радиального градиента находилась в середине экрана. Если вы хотите изменить центр градиента, вы должны указать свойство center в конструкторе Radial Gradient. Помните, что если вы не определяете это свойство, по умолчанию градиент помещается в центр экрана.

center: Alignment(0.x, 0.y)

Вот полезное изображение, объясняющее выравнивание во Flutter:

Вот пример радиального градиента с отрегулированным центром:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                 colors: [Colors.yellow, Colors.red, Colors.purple],
                 center: Alignment(1.0, 1.0),
                ),
              ),
            ),
          ),
        ));
  }
}

Если вы посмотрите на график, выравнивание центра радиального градиента означает, что его нужно сместить в правый нижний угол.

Мы также можем настроить фокус градиента в пределах радиуса, определив другое свойство в конструкторе RadialGradient:

focal: Alignment(0.x, 0.y),

Вот полный код примера приложения с радиальным градиентом, у которого есть настроенная точка фокусировки:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  colors: [Colors.yellow, Colors.red,Colors.purple],
                  center: Alignment(0.6, -0.3),
                  focal: Alignment(0.3, -0.1),
                ),
              ),
            ),
          ),
        ));
  }
}

Чтобы настроить радиус фокальной точки в середине радиального градиента, нам нужно определить свойство focalRadius в конструкторе RadialGradient:

decoration: BoxDecoration(
      gradient: RadialGradient(
        colors: [Colors.yellow, Colors.red,Colors.purple],
        ...
        focalRadius: 1.0,
   ),
 ),

Вот код предыдущего радиального градиента с измененным фокусным радиусом:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  colors: [Colors.yellow, Colors.red,Colors.purple],
                  center: Alignment(0.6, -0.3),
                  focal: Alignment(0.3, -0.1),
                  focalRadius: 1.0,
                ),
              ),
            ),
          ),
        ));
  }
}

Градиенты развертки:

Это тип градиента, который «обтекает» фокусную точку, образуя цветовой градиент. Вот пример:

Вот код для градиента развертки выше:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: SweepGradient(
                  colors: [Colors.yellow,Colors.green, Colors.blue],
                ),
              ),
            ),
          ),
        ));
  }
}

Как видите, мы уже добавили несколько цветов в градиент развертки. Как и в примерах, которые мы видели, мы также можем настроить этот градиент, добавив остановки:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: SweepGradient(
                  colors: [Colors.yellow, Colors.green,Colors.blue],
                  stops: [0.1, 0.6, 0.9],
                ),
              ),
            ),
          ),
        ));
  }
}

Мы можем настроить градиенты развертки так, как мы не видели в других градиентах, - путем определения начального и конечного углов, определяющих его границы.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Gradient Demo'),
          ),
          body: Center(
            child: Container(
              decoration: BoxDecoration(
                gradient: SweepGradient(
                  colors: [Colors.yellow, Colors.green,Colors.blue],
                  stops: [0.1, 0.6, 0.9],
                  startAngle: 0.9,
                  endAngle: 1.2,
                ),
              ),
            ),
          ),
        ));
  }
}

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

Бонус

Все градиенты и настройки, которые мы обсуждали, также могут быть применены к AppBar с помощью свойства flexibleSpace конструктора AppBar. Вот пример:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Gradient Demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Gradient App Bar'),
            flexibleSpace: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.red, Colors.orange],
                ),
              ),
            ),
          )
        ));
  }
}

Этот трюк не ограничивается только линейными градиентами; Вы также можете добавлять и настраивать радиальные и сдвиговые градиенты по своему желанию. Однако линейные градиенты, как правило, являются наиболее подходящими при настройке панели приложения.

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

Весь код, использованный в этой статье (и других статьях), можно найти в моем репозитории GitHub.

Если вы нашли эту статью полезной, нажмите кнопку 👏 и хлопните в ладоши! Подпишитесь на меня, чтобы увидеть больше статей о Flutter и оставить отзывы или комментарии ниже!