Flutter. Много
2.76K subscribers
332 photos
23 videos
257 links
Заказать мобильную разработку: https://amiga.agency/?utm_source=tg
Заказать рекламу в канале @amiga_agency_bot

Новости Flutter-разработки, дайджесты мероприятий, личный опыт.
Download Telegram
Hola, Amigos! На связи Михаил Чернецов, Flutter dev в Amiga. Продолжаем нашу серию постов о библиотеке auto_route. И во второй части поговорим о вложенной навигации, анимациях и многомодульности.

Вложенная навигация (Nested Navigation) используется для роутов с несколькими вложенными вкладками.в

AutoRoute содержит поле children, в который можно передать список AutoRoute.
И при помощи виджета AutoRouter организовать автоматическую навигацию между вложенными страницами.

AutoRoute(
page: BottomNavRoute.page,
children: [
AutoRoute(page: HomeRoute.page),
AutoRoute(page: ListRoute.page),
...
],
);


  @override
Widget build(BuildContext context) {
return Scaffold(
body: AutoRouter(),
bottomNavigationBar: BottomNavigationBar(
/// Navigate here
),
);
}
}


Анимация при навигации
Используем transitionBuilder и создаём собственный вариант перехода для анимации роута.

CustomRoute(
page: ZoomInScreen,
transitionsBuilder:
(BuildContext context, Animation<double> animation, _, Widget child) {
return ScaleTransition(scale: animation, child: child);
},
)


Многомодульность
При вводе бойлерплейт генерируется модуль для всех роутов модуля.

@AutoRouterConfig.module()
class MyPackageModule extends $MyPackageModule {}


При добавлении модуля, AppRouter получает доступ ко всей информации о роутах MyPackageModule. Однако, как и при обычной генерации, все роуты необходимо прописать в класс AppRouter.

@AutoRouterConfig([
MyPackageModule,

])
class AppRouter extends $AppRouter {
@override
List<AutoRoute> get routes => [
AutoRoute(page: HomeRoute.page),

];
}


В следующий раз расскажем про RouteGuard и их применение. Всем хорошего кода!

Делитесь в чате своим опытом работы с библиотекой.
5🔥4👍3
Hola, Amigos! На связи Михаил Чернецов, Flutter dev в Amiga. Как и обещали, сегодня расскажем про Route Guard. Он позволяет манипулировать навигацией в самом приложении и переводить пользователя на необходимый экран.


class AuthGuard extends AutoRouteGuard {

@override
void onNavigation(NavigationResolver resolver, StackRouter router) {
final authenticated = myService().authenticated;
if (authenticated) {
resolver.next(true);
}
else {
resolver.redirect(const AuthRoute());
}
}
}


Единственная проблема — это необходимость использовать или глобальные переменные или каждый раз инициализировать сервисы для проверки каких-то данных.

Для этого RouteGuard, можно пометить аннотацией @injectable из одноименной библиотеки, и можно туда передать уже существующий синглтон.


@injectable
class AuthGuard extends AutoRouteGuard {
final MySingleton singleton;

AuthGuard({required this.singleton});

@override
void onNavigation(NavigationResolver resolver, StackRouter router) {
final authenticated = singleton.isAuth;
…..,
}
}


Добавление же AuthGuard в роут тоже достаточно просто:


AutoRoute(
page: HomeRoute.page,
guards: [
AuthGuard(),
],
),


Или в случае использования injectable/getIt:

GetIt.instance<AuthGuard>().


Route wrapper позволяет оборачивает роут. Используя аннотацию AutoRouteWrapper.


@RoutePage()
class ProductsScreen extends StatelessWidget implements AutoRouteWrapper {

@override
Widget wrappedRoute(BuildContext context) {
return Provider(create: (ctx) => ProductsBloc(), child: this);
}
...
}


Самое интересное то, что дочерний Route не только будет иметь доступ к блоку, но и может быть обернут, например, в Scaffold с AppBar.

На этом наша серия постов о библиотеке auto_route подошла к концу. Делитесь в комментариях, было ли полезно?
🔥51👏1
Hola, Amigos! Лето богато на события, поэтому мы снова с анонсом. 29-30 августа приглашаем вас на BOOST — это крупнейшая конференция для руководителей студий и агентств 🅰️

Соберется 1000 IT-специалистов из разных направлений: менеджмент, разработка, дизайн, креатив, продажи, PR и маркетинг.

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

Успейте купить билет по самой выгодной стоимости, ведь цена будет расти!

И ловите наш промокод AMIGA10, который дарит скидку 10% 🙂

До встречи на BOOST!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥52🥰2
Hola, Amigos! На связи Павел Гершевич, Flutter Team Lead в Amiga. Недавно в чате вы спрашивали, в чем разница между go_router и auto_route. Рассказываем!

Сходства

Обе этих библиотеки работают на Navigator 2.0, что дает нам больший контроль над навигацией в наших приложениях. Также часть функционала в них совпадает.

Количество кода

В auto_route мы пишем намного меньше кода, так как используется кодогенерация. Но некоторые не любят ее, поэтому используют GoRouter. Также auto_route позволяет нам напрямую передавать нужные аргументы прямо в Route, не используя дополнительный код.

Разберем на примере вот такого экрана:


class HomePage extends StatelessWidget {
final String appName;
const HomePage({required this.appName, super.key});

}


Для auto_route у нас будет:


AutoRoute(page: HomeRoute.page);

context.router.push(HomeRoute(appName: ‘My App Name’));


А для go_router:


GoRoute(
path: ‘/home’,
builder: (context, state) {
final appName = state.queryParams[‘appName’];
return HomePage(appName: appName);
}
);

GoRouter.of(context).push(‘/home?appName=”My App Name”’);


В следующей части поговорим о количестве багов, вложенной навигации и Route Guards.

А пока на этом всё, пишите в чате, было ли полезно?
13👍5🔥2
Hola, Amigos! На связи Павел Гершевич, Flutter Team Lead в Amiga. Продолжаем рассказывать, в чем разница между go_router и auto_route.

Количество багов и костылей

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

Вложенная навигация

В auto_route вложенная навигация устроена намного удобнее, чем в go_router. Так как у нас есть возможность создать дополнительный роутер внутри нашего экрана и переходить внутри него.


Scaffold(

body: AutoRoute(),

);


Да, go_router поддерживает такое, но настройка будет в разы сложнее.

Route Guards

Настройка guards в go_router делается при настройке самого роутера, а перенаправление — при помощи функции redirect.

В auto_route мы можем создавать именно отдельные Route Guards и присваивать их путям в наших настройках.

Было полезно? Если у вас еще остались вопросы, то пишите в чат.
7👍5🔥4
Hola, Amigos! На связи Павел Гершевич, Flutter Team Lead в Amiga. Приготовили для вас серию статей переводов о тестировании в Flutter.

Сегодня первый выпуск, в котором познакомимся с Unit-тестированием, Widget-тестированием, Golden-тестами и интеграционным тестированием (оригинал).

В статье приведено много примеров и часто встречаемых ошибок, с которыми сталкиваются специалисты, когда пишут тесты. Показано, как писать код, чтобы сделать тестирование проще, и как использовать AI-инструменты, такие как ChatGPT или GitHub Copilot для увеличения скорости написания тестов.

Переходите по ссылке. По ходу материала вам будут встречаться мои комментарии.

Приятного чтения! Будем рады вашей обратной связи в чате.
🔥82👏2👍1
Hola, Amigos! На связи Павел Гершевич, Flutter Team Lead в Amiga. Продолжаем раскрывать тему тестирования в Flutter и сегодня поговорим о модульном (Unit) тестировании.

В данной статье описан простой Unit-тест и использование функций expect и Matcher. Скорее переходите на Habr, чтобы узнать подробности! ⬅️

Еще несколько выпусков будут посвящены Unit-тестам, разберем более сложные случаи с использованием продвинутых техник: Mock, Fake и Stub.

Ставьте реакцию, если ждете продолжения! 🙂
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍6👏2👨‍💻1
Hola, Amigos! На связи Павел Гершевич, Flutter Team Lead в Amiga. Вот и третья часть перевода подъехала⚙️

В предыдущих статьях мы научились писать модульные тесты для статичных функций, верхнеуровневых функций и расширений. На этот раз напишем Unit-тесты для методов класса.

Читайте по ссылке на Habr. Пишите комментарии и ставьте реакции, если тема вам интересна!⚙️
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍42
Hola, Amigos! На связи команда агентства продуктовой разработки Amiga. Делимся лучшими практиками работы с BLoC.

Немного терминологии для тех, кто только начинает погружаться в кроссплатформенную разработку.

Что такое BLoC?

BLoC (компонент бизнес-логики) — это класс, отделяющий бизнес-логику приложения от пользовательского интерфейса. Такой компонент содержит код, который можно повторно использовать в любом модуле, платформе или приложении.

Почему это важно?

Отделение UI от бизнес-логики для Flutter жизненно необходимо. Карабкаться вверх-вниз по дереву виджетов в поисках нужной логики — не самая приятная задача. Особенно, если верстка и так содержит много кода и разбросана по разным файлам.

Использование BLoC помогает:

⚙️ Упрощать тестирование кода.
⚙️ Повышать читаемость и поддерживаемость кода.
⚙️ Переиспользовать бизнес-логику между различными модулями и платформами.

Смотрите карточки, забирайте советы себе на заметку!

И пишите в комментариях, что хотелось бы ещё узнать?
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍126
Дайджест июля

Hola, Amigos! Собрали в одну подборку все полезные посты и статьи июля, которые вы могли пропустить или не знать о них, если вы присоединились к нам совсем недавно. Выбирайте интересную тему и переходите по ссылкам.

🟡 Обзор пакета audio_waveforms

🟡 Трилогия о библиотеке auto_route: 1 часть, 2 часть, 3 часть

🟡 Отличия go_router и auto_route 1 часть, 2 часть

🟡 Методы тестирования в Flutter

🟡 Модульное (Unit) тестирование

🟡 Unit тесты для методов класса

🟡 Лучшие практики работы с BLoC

🟡 И ещё кое-что… Приглашаем на крупнейшую конференцию BOOST для руководителей студий и агентств. Дарим скидку 10% на билет по промокоду AMIGA10!

Всем хорошего кода и последнего месяца лета! ⚙️
Please open Telegram to view this post
VIEW IN TELEGRAM
11👍3👀2
Hola, Amigos! На связи Павел Гершевич, Flutter Team Lead в Amiga. Делимся с вами 4 частью полного гайда по тестированию в Flutter, которая посвящена продвинутому модульному тестированию.

Мы уже рассмотрели:
⚙️ Unit-тестирование, Widget-тестирование, Golden-тесты и интеграционное тестирование

⚙️ Простые модульные (Unit) тесты

⚙️ Использование техник Mocking и Stubbing для тестирования классов

В новой статье еще больше усложнен класс LoginViewModel при помощи создания переменной _cache для кеширования результата, полученного от SharedPreferences. Продолжение читайте по ссылке.

Fun fact: думали, что гайд состоит из 6 статей, а оказалось, что есть еще 3, только уже не на английском, а на вьетнамском языке. Пожелайте нам удачи!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍73😁2🔥1
Hola, Amigos! Мы с вами подобрались уже к 5 части гайда о тестировании в Flutter. И в ней разберемся, как использовать библиотеку Mocktail для техник mocking и stubbing в Unit-тестах.

Перевод по ссылке на Habr ⬅️

Все предыдущие части можно найти тут. А в следующей статье познакомимся с новой техникой — Faking.

Пишите в чате, узнали ли вы для себя что-то новое из гайда? Делитесь впечатлениями!⚙️
Please open Telegram to view this post
VIEW IN TELEGRAM
👍43👏3