Flutter *

Что добавить в CI при настройке GitLab CI/CD на Flutter-проекте?

Вот два примера команд для Static-проверок от нашего Flutter-разработчика Саши:

1. dart-metrics-analyze
   
   Поможет нам проанализировать код, выявить ошибки стиля и проблемы, которые могут повлиять на качество кода и сложность его поддержки.

dart-metrics-analyze:
  stage: static
  interruptible: true
  before_script:
    - flutter pub get
  script:
    - flutter pub run dart_code_metrics:metrics analyze --fatal-style --fatal-performance --no-fatal-warnings --reporter=console lib
  tags:
    - ci

2. dart-metrics-check-unused-files
   
   С помощью этой задачи можно проверить, все ли файлы в коде действительно использованы. Лишние файлы могут усложнять код и увеличивать время его компиляции.

dart-metrics-check-unused-files:
  stage: static
  interruptible: true
  before_script:
    - flutter pub get
  script:
    - flutter pub run dart_code_metrics:metrics check-unused-files --fatal-unused --exclude="{lib/application/core/bloc/void_action_bloc.dart,lib/util/log.dart}" lib
  tags:
    - ci

В обоих примерах используем проверки Dart Analyze. В результате мы получим чистый код, где нет лишних файлов. Еще можно добавить проверки на неиспользуемые переводы, на совместимость сгенерированных файлов локально и в репозитории.

Больше примеров и деталей найдете в нашей подробной инструкции по настройке GitLab CI/CD на Flutter-проекте.

P. S. А еще ждем вас в нашем телегам-канале про Flutter и не только.

Hola Amigos! Меня зовут Саша Чаплыгин, я middle Flutter dev в Amiga. Мы с командой ведем свой телеграм-канал и решили, что пора познакомиться поближе с сообществом, которое у нас собралось. А это больше 1800 человек) Рассказываем о своем пути в профессии и делимся полезными советами! Вот моя история.

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

В качестве образовательных платформ могу посоветовать только youtube и официальную документацию Flutter. На youtube я смотрю: heyflutter.com, Konstantin Kokorin, LazyLoad Dart & Flutter, офиц. канал Flutter, Уроки Flutter.

Телеграм-каналов немного, но некоторые могут быть полезны для изучения разных фишек и подходов. Я подписан, конечно, на наш канал Flutter.Много, а также Dart & Flutter, Oh my Flutter, Flutter for Dev.

Официальная документация максимально прозрачна и понятна. Её нужно изучать на постоянной основе. Я пользуюсь ей очень часто! Также советую прям зубрить ООП, алгоритмы, структуры данных и Figma, чтобы быть подкованным со всех сторон.

Книга Роберта Мартина «Чистая архитектура» помогла мне в свое время понять основные принципы построения правильной архитектуры любого проекта, не только мобильных приложений.

Разработчики, делитесь своими историями становления в комментариях)

Rive для Flutter-приложений: что нужно знать

Привет! Я Никита Грибков, Flutter-разработчик в AGIMA. Сегодня расскажу вам про возможности Rive. Это фреймворк, который использует векторную графику для создания анимации во Flutter-приложениях. Я использовал его, чтобы сделать кнопки для Bottom Bar в своем пет-проекте. 

Элементы для анимации можно создавать в программных продуктах типа SVG или Adobe Illustrator. У меня не было опыта работы с векторной графикой, поэтому я использовал встроенный в Rive UI-интерфейс. Еще в Rive есть раздел Community. Там авторы выкладывают бесплатные анимации.

Вообще в Rive несколько слоев:

• статический слой — это слой, который отображает элемент в неподвижном состоянии;

• анимационный слой — это временная линия, на которой можно задавать ключевые кадры для изменения формы, цвета и размера элементов;

• State Machine — это часть фреймворка Rive, которая позволяет создавать сложные анимации. Он использует конечный автомат (FSM) для определения состояний и переходов между ними.

Чтобы внедрить Rive в приложение, нужно всего 2–3 строки кода. Хотя это может зависеть от сложности анимации. Но на первый взгляд, код здесь компактный и легко поддерживаемый.

Вот что получилось в итоге:

Итог: я доволен, интерфейс получился красивый, сил ушло немного. Если вам интересно узнать больше — дайте знать в комментариях. Может, напишу полноценную статью.

P. S. А еще у моего коллеги Саши Ворожищева есть канал про Flutter. Приходите читать.

Начиная с dart 2.3.0 были представлены новые функции, которые прокачивают возможности добавления новых элементов в коллекцию. Об одной из них и пойдёт речь – spread (распространение).

Как использовать? Поместите ... перед коллекцией внутри литерала коллекции, и элементы будут в неё добавлены. Предположим, у нас есть две корзины: с фруктами и ягодами. Необходимо всё переложить в нашу корзину:

final fruitBasket = ['?', '?', '?', '?'];
final berriesBasket = ['?', '?'];

final myBasket = [...fruitBasket, '?', ...berriesBasket, ...['?']];

Раньше мы бы написали так:

final myOldBasket = []
  ..addAll(fruitBasket)
  ..add('?')
  ..addAll(berriesBasket)
  ..addAll(['?']);

Казалось бы, не так страшно. Но, посмотрите, как старый способ будет выглядеть в flutter:

ProductsPage(
  child: ListView(
    children: [
      Text('Products'),
      Divider(),
    ]
      ..addAll(buildBasketWidget(fruitBasket))
      ..add(ProductWidget('?'))
      ..addAll(buildBasketWidget(berriesBasket))
      ..addAll(buildBasketWidget(['?'])),
  ),
);

List<Widget> buildBasketWidget(List basket) {...}

И с помощью оператора "распространения":

ProductsPage(
  child: ListView(
    children: [
      Text('Products'),
      Divider(),
      ...buildBasketWidget(fruitBasket),
      ProductWidget('?'),
      ...buildBasketWidget(berriesBasket),
      ...buildBasketWidget(['?']),
    ],
  ),
);

Очевидно, что spread позволяет сделать код более выразительным и декларативным, а также приятным для чтения.