(мова майбутнього)
Я розумію, що мова flutter все ще занадто молода в порівнянні з Xamarin або React Native і може викликати недовіру як у розробників, так і у клієнтів. У цій статті я постараюся переконати вас у зворотному на прикладі простої анімації. Флаттер складається з трьох компонентів: Flutter engine, Foundation library (Dart), Design-specific widgets. Flutter engine-написаний на C ++, забезпечує підтримку низькорівневого рендеринга, використовує для цього графічну бібліотеку skia. Skia має кілька основних внутрішніх компонентів: растеризацію програматора на базі процесора, виведення PDF-файлів і прискорення графічного процесора OpenGL. Також доступні OpenGL ES2, OpenVG, SVG і Adobe SWF (Flash).
Flutter-це, мабуть, лише одна гібридна мова розробки додатків, за допомогою якої ви можете створювати складні анімації, які можуть працювати безперервно зі швидкістю 60 кадрів в секунду. У цій статті ми створимо точковий спінер з циклічною анімацією. Щоб створити віджет, який можна легко анімувати, почніть зі створення класу, який розширює клас StatefulWidget і перевизначає метод createState(). Цей метод повинен повертати екземпляр State.
Для анімації наш віджет повинен не тільки розширювати стан класу, але і використовувати SingleTikerProviderStateMixin. Тікер постійно видає зворотний виклик, відомий як Тікі. Оскільки тіки генеруються постійно з рівними інтервалами часу, ви можете використовувати їх для налаштування відображення кожного кадру анімації.
Анімація tween - це одна з найпростіших анімацій, яку ви можете створити за допомогою Flutter. При створенні все, що нам потрібно зробити, це надати два різних значення: початкове і кінцеве значення. Потім фреймворк автоматично генерує набір проміжних значень, починаючи з початкового значення, плавно збільшуючи його до кінцевого значення. Для створення та управління анімацією нам потрібні Об'єкти Animation і AnimationController. Додайте їх як змінні до вашого state: AnimationController controller; Animation
Ви можете використовувати властивість duration, щоб задати тривалість анімації. Наступний код створює анімаційний контролер тривалістю в дві секунди. Щоб зав'язати об'єкт Tween з об'єктом AnimationController, необхідно викликати метод animate (), в якому ми викликаємо CurvedAnimation і встановлюємо інтервал для анімації. Крім того, встановіть радіус для спинеру і задайте контролеру, щоб він постійно повторював анімацію controller.repeat(); На цьому етапі анімація готова. Потім створіть елементи для спінеру. Створити конструктор класу з двома значеннями: колір і радіус.
У методі збірки задайте розміри контейнера і значення для кожної точки в спіннері за допомогою методу Transform, який створює віджет, що перетворює його нащадок за допомогою обертання навколо центру. Також встановіть радіус і колір. Потім оберніть його в метод RotationTransition, який створює перехідне обертання.
Ви можете запустити свій додаток, щоб побачити анімацію.
Отже, ми побачили, як легко створити красиву анімацію за допомогою мови програмування Flutter. Його анімаційні можливості величезні, починаючи з простих переходів між екранами і закінчуючи повноцінними іграми. Для ствоерення ігрових анімацій можна додати сторонню бібліотеку flame https://pub.dartlang.org/packages/flame. Тепер наш додаток складається тільки з одного файлу main.dart, і ніякої архітектури в ньому немає,
оскільки ця мова є новим для більшості користувачів, то написання більш складного додатка з можливістю їх подальшої підтримки відразу ж стане питанням архітектури, і тут я пораджу вам вивчити блоковий патерн - він був спеціально створений розробниками Google для мови Flutter. https://medium.com/flutterpub/architecting-your-flutter-project-bd04e144a8f1 або https://www.didierboelens.com/2018/08/reactive-programming---streams---bloc
Принцип реактивного програмування також допоможе вам полегшити розробку. https://pub.dartlang.org/packages/rxdart https://docs.flutter.io/flutter/dart-async/Stream-class.html
Перш ніж сісти і написати код, я рекомендую вам вивчити всі ці статті, і ви побачите, що мова програмування Flutter-це мова майбутнього!