Как стать автором
Поиск
Написать публикацию
Обновить
17.92

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, чтобы быть подкованным со всех сторон.

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

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

Теги:
Всего голосов 6: ↑4 и ↓2+2
Комментарии2

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. Приходите читать.

Теги:
Всего голосов 5: ↑5 и ↓0+5
Комментарии1

Начиная с 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 позволяет сделать код более выразительным и декларативным, а также приятным для чтения.

Всего голосов 12: ↑12 и ↓0+12
Комментарии3