Hola, Amigos! На связи Владимир Зевеке, Flutter dev в Amiga. Сегодня поговорим о пакете audio_waveforms. Этот пакет добавляет возможность записывать аудиофайлы и воспроизводить их в отдельном виджете, с красивым визуальным шлейфом звуков. Он особенно полезен для разработки чатов.

Установка и настройка

Для установки нам нужно подключить пакет и следуя инструкции из pub.dev добавить разрешение на использование микрофона для необходимых платформ.

Инициализация

Создаем поля для виджетов записи и воспроизведения аудио:

late final RecorderController recorderController;
late final PlayerController playerController

Инициализируем контроллеры:

@override
void initState() {
  recorderController = RecorderController()
    ..androidEncoder = AndroidEncoder.aac
    ..androidOutputFormat = AndroidOutputFormat.mpeg4
    ..iosEncoder = IosEncoder.kAudioFormatMPEG4AAC
    ..sampleRate = 16000;

  playerController = PlayerController();
  super.initState();
}

Не забываем освобождать ресурсы:

@override
void dispose() {
  recorderController.dispose();
  playerController.dispose();
  super.dispose();
}

Запись и воспроизведение

Для записи нужно проверить дал ли пользователь разрешение на использование микрофона:

final bool hasPermission = await recorderController.checkPermission();

Если оно у нас есть, то мы можем запустить запись, вызвав:

await recorderController.record();

Или остановить запись при помощи:

String pathAudio = await recorderController.stop() ?? '';
await playerController.preparePlayer(path: pathAudio);

Для проигрывания используем метод:

await playerController.startPlayer(finishMode: FinishMode.pause);

Для завершения вызываем:

await playerController.pausePlayer();

Для вывода на экран понадобятся виджеты AudioWaveforms и AudioFileWaveforms. Они легко настраиваются с помощью полей waveStyle и playerWaveStyle, которые предлагают множество опций для кастомизации.

AudioWaveforms(
size: const Size(double.infinity, 50.0),
recorderController: recorderController,
),

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

Использовали ли вы пакет audio_waveforms в своих проектах? Расскажите о своем опыте в чате.

Hola, Amigos! На связи Михаил Чернецов, Flutter dev в Amiga. Сегодня расскажу про пакет auto_route, который создает роуты для приложения с помощью кодогенерации.

Он поддерживает deeplinks, с помощью которых можно открыть приложение на необходимой странице: например ссылка в письме, ведущая на сделанный пользователем заказ. А также Route Guard, который создатели библиотеки сравнивают с интерсептором для навигации, но о нем чуть позже.

Для создание конфигурации роутера необходимо создать класс роутера:

@AutoRouterConfig()
class AppRouter extends $AppRouter {

 @override
 List<AutoRoute> get routes => [
    AutoRoute(page: HomeRoute.page),
 ];
}

Для получения HomeRoute, необходимо пометить аннотацией RoutePage HomeScreen. Причем в стандартной настройке Screen и Page в названии страницы заменяются на Route.

@RoutePage()
class HomeScreen extends StatefulWidget {}

В роуты также можно передавать параметры, при этом сохраняются стандартные значения и учитывается наличие поля required.

context.router.push(BookRoute(bookId: id));

Для того, что бы им можно было пользоваться, необходимо добавить роутер в приложение:

final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context){
    return MaterialApp.router(
      routerConfig: _appRouter.config(),
    );
  }

Далее с помощью extension над context можем получать router, имеющий такое же api как у navigator и так же использует навигацию через стек.

– maybePop — по возможности убирает последний роут из стека.
– push — добавляет в стек новый роут.
– replace — заменяет текущий роут на другой. При этом не меняет стек роутов.
– remove — убирает определенный роут из стека.
– navigate — если роут в стеке, убирает роуты до того, как попадется необходимый или добавляет роут в стек.

Большая часть остальных методов является просто комбинацией из этих 5-ти. Всем хорошего кода!

Делитесь в чате своим опытом работы с библиотекой.

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 и их применение. Всем хорошего кода!

Делитесь в чате своим опытом работы с библиотекой.

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 подошла к концу. Делитесь в комментариях, было ли полезно?

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.

А пока на этом всё, пишите в чате, было ли полезно?

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 и присваивать их путям в наших настройках.

Было полезно? Если у вас еще остались вопросы, то пишите в чат.

Hola, Amigos! На связи Павел Гершевич, Flutter Team Lead в Amiga. Приготовили для вас серию статей переводов о тестировании в Flutter.

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

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

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

Приятного чтения! Будем рады вашей обратной связи в чате.