Hola, Amigos! На связи Михаил Чернецов, Flutter dev в Amiga. Продолжаем нашу серию постов о библиотеке auto_route. И во второй части поговорим о вложенной навигации, анимациях и многомодульности.
Вложенная навигация (Nested Navigation) используется для роутов с несколькими вложенными вкладками.в
AutoRoute содержит поле
И при помощи виджета AutoRouter организовать автоматическую навигацию между вложенными страницами.
Анимация при навигации
Используем transitionBuilder и создаём собственный вариант перехода для анимации роута.
Многомодульность
При вводе бойлерплейт генерируется модуль для всех роутов модуля.
При добавлении модуля, AppRouter получает доступ ко всей информации о роутах
В следующий раз расскажем про
Делитесь в чате своим опытом работы с библиотекой.
Вложенная навигация (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. Он позволяет манипулировать навигацией в самом приложении и переводить пользователя на необходимый экран.
Единственная проблема — это необходимость использовать или глобальные переменные или каждый раз инициализировать сервисы для проверки каких-то данных.
Для этого
Добавление же
Или в случае использования injectable/getIt:
Route wrapper позволяет оборачивает роут. Используя аннотацию
Самое интересное то, что дочерний Route не только будет иметь доступ к блоку, но и может быть обернут, например, в Scaffold с AppBar.
На этом наша серия постов о библиотеке auto_route подошла к концу. Делитесь в комментариях, было ли полезно?
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 подошла к концу. Делитесь в комментариях, было ли полезно?
🔥5❤1👏1
Hola, Amigos! Лето богато на события, поэтому мы снова с анонсом. 29-30 августа приглашаем вас на BOOST — это крупнейшая конференция для руководителей студий и агентств 🅰️
Соберется 1000 IT-специалистов из разных направлений: менеджмент, разработка, дизайн, креатив, продажи, PR и маркетинг.
Мы уже готовим свои доклады, о которых расскажем чуть позже, а пока знакомьтесь с программой по ссылке.
Успейте купить билет по самой выгодной стоимости, ведь цена будет расти!
И ловите наш промокодAMIGA10 , который дарит скидку 10% 🙂
До встречи на BOOST!
Соберется 1000 IT-специалистов из разных направлений: менеджмент, разработка, дизайн, креатив, продажи, PR и маркетинг.
Мы уже готовим свои доклады, о которых расскажем чуть позже, а пока знакомьтесь с программой по ссылке.
Успейте купить билет по самой выгодной стоимости, ведь цена будет расти!
И ловите наш промокод
До встречи на BOOST!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5❤2🥰2
Hola, Amigos! На связи Павел Гершевич, Flutter Team Lead в Amiga. Недавно в чате вы спрашивали, в чем разница между go_router и auto_route. Рассказываем!
Сходства
Обе этих библиотеки работают на Navigator 2.0, что дает нам больший контроль над навигацией в наших приложениях. Также часть функционала в них совпадает.
Количество кода
В auto_route мы пишем намного меньше кода, так как используется кодогенерация. Но некоторые не любят ее, поэтому используют GoRouter. Также auto_route позволяет нам напрямую передавать нужные аргументы прямо в Route, не используя дополнительный код.
Разберем на примере вот такого экрана:
Для auto_route у нас будет:
А для go_router:
В следующей части поговорим о количестве багов, вложенной навигации и Route Guards.
А пока на этом всё, пишите в чате, было ли полезно?
Сходства
Обе этих библиотеки работают на 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. Так как у нас есть возможность создать дополнительный роутер внутри нашего экрана и переходить внутри него.
Да, go_router поддерживает такое, но настройка будет в разы сложнее.
Route Guards
Настройка guards в go_router делается при настройке самого роутера, а перенаправление — при помощи функции redirect.
В auto_route мы можем создавать именно отдельные Route Guards и присваивать их путям в наших настройках.
Было полезно? Если у вас еще остались вопросы, то пишите в чат.
Количество багов и костылей
На личном опыте можем сказать, что с 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 для увеличения скорости написания тестов.
Переходите по ссылке. По ходу материала вам будут встречаться мои комментарии.
Приятного чтения! Будем рады вашей обратной связи в чате.
Сегодня первый выпуск, в котором познакомимся с Unit-тестированием, Widget-тестированием, Golden-тестами и интеграционным тестированием (оригинал).
В статье приведено много примеров и часто встречаемых ошибок, с которыми сталкиваются специалисты, когда пишут тесты. Показано, как писать код, чтобы сделать тестирование проще, и как использовать AI-инструменты, такие как ChatGPT или GitHub Copilot для увеличения скорости написания тестов.
Переходите по ссылке. По ходу материала вам будут встречаться мои комментарии.
Приятного чтения! Будем рады вашей обратной связи в чате.
🔥8❤2👏2👍1
Hola, Amigos! На связи Павел Гершевич, Flutter Team Lead в Amiga. Продолжаем раскрывать тему тестирования в Flutter и сегодня поговорим о модульном (Unit) тестировании.
В данной статье описан простой Unit-тест и использование функций expect и Matcher. Скорее переходите на Habr, чтобы узнать подробности!⬅️
Еще несколько выпусков будут посвящены Unit-тестам, разберем более сложные случаи с использованием продвинутых техник: Mock, Fake и Stub.
Ставьте реакцию, если ждете продолжения!🙂
В данной статье описан простой 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. Пишите комментарии и ставьте реакции, если тема вам интересна!⚙️
В предыдущих статьях мы научились писать модульные тесты для статичных функций, верхнеуровневых функций и расширений. На этот раз напишем Unit-тесты
Читайте по ссылке на Habr. Пишите комментарии и ставьте реакции, если тема вам интересна!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍4❤2
Hola, Amigos! На связи команда агентства продуктовой разработки Amiga. Делимся лучшими практиками работы с BLoC.
Немного терминологии для тех, кто только начинает погружаться в кроссплатформенную разработку.
Что такое BLoC?
BLoC (компонент бизнес-логики) — это класс, отделяющий бизнес-логику приложения от пользовательского интерфейса. Такой компонент содержит код, который можно повторно использовать в любом модуле, платформе или приложении.
Почему это важно?
Отделение UI от бизнес-логики для Flutter жизненно необходимо. Карабкаться вверх-вниз по дереву виджетов в поисках нужной логики — не самая приятная задача. Особенно, если верстка и так содержит много кода и разбросана по разным файлам.
Использование 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👍12❤6
Дайджест июля
Hola, Amigos! Собрали в одну подборку все полезные посты и статьи июля, которые вы могли пропустить или не знать о них, если вы присоединились к нам совсем недавно. Выбирайте интересную тему и переходите по ссылкам.
🟡 Обзор пакета audio_waveforms
🟡 Трилогия о библиотеке auto_route: 1 часть, 2 часть, 3 часть
🟡 Отличия go_router и auto_route 1 часть, 2 часть
🟡 Методы тестирования в Flutter
🟡 Модульное (Unit) тестирование
🟡 Unit тесты для методов класса
🟡 Лучшие практики работы с BLoC
🟡 И ещё кое-что… Приглашаем на крупнейшую конференцию BOOST для руководителей студий и агентств. Дарим скидку 10% на билет по промокоду AMIGA10!
Всем хорошего кода и последнего месяца лета!⚙️
Hola, Amigos! Собрали в одну подборку все полезные посты и статьи июля, которые вы могли пропустить или не знать о них, если вы присоединились к нам совсем недавно. Выбирайте интересную тему и переходите по ссылкам.
Всем хорошего кода и последнего месяца лета!
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, только уже не на английском, а на вьетнамском языке. Пожелайте нам удачи!
Мы уже рассмотрели:
В новой статье еще больше усложнен класс LoginViewModel при помощи создания переменной _cache для кеширования результата, полученного от SharedPreferences. Продолжение читайте по ссылке.
Fun fact:
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤3😁2🔥1
Hola, Amigos! Мы с вами подобрались уже к 5 части гайда о тестировании в Flutter. И в ней разберемся, как использовать библиотеку Mocktail для техник mocking и stubbing в Unit-тестах.
Перевод по ссылке на Habr⬅️
Все предыдущие части можно найти тут. А в следующей статье познакомимся с новой техникой — Faking.
Пишите в чате, узнали ли вы для себя что-то новое из гайда? Делитесь впечатлениями!⚙️
Перевод по ссылке на Habr
Все предыдущие части можно найти тут. А в следующей статье познакомимся с новой техникой — Faking.
Пишите в чате, узнали ли вы для себя что-то новое из гайда? Делитесь впечатлениями!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤3👏3