Splash screen
Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня расскажу, как сделать свой splash screen с помощью пакета flutter_native_splash.
Настроим pubspec.yaml. Добавим основную зависимость
Основные настройки пакета:
– color: цвет бэкграунда сплеша;
– image: изображение по центру сплеша;
– android_12: настройки для 12 версии android.
После их применения выполняем команду «flutter pub get».
Затем команда «flutter pub run flutter_native_splash:create» сгенерирует необходимый код в соответствии с настройками pubspec.yaml.
Собираем приложение и любуемся уникальным экраном-заставки вместо дефолтного splash Flutter!
А вы пользуетесь #пп flutter_native_splash? Делитесь своими историями в чате.
Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня расскажу, как сделать свой splash screen с помощью пакета flutter_native_splash.
Настроим pubspec.yaml. Добавим основную зависимость
flutter_native_splash: ^2.3.10
, плюс в конце файла укажем детальные настройки нашего сплеша.flutter_native_splash:
color: "#000000"
image: "assets/images/splash.png"
android_12:
image: "assets/images/splash.png"
Основные настройки пакета:
– color: цвет бэкграунда сплеша;
– image: изображение по центру сплеша;
– android_12: настройки для 12 версии android.
После их применения выполняем команду «flutter pub get».
Затем команда «flutter pub run flutter_native_splash:create» сгенерирует необходимый код в соответствии с настройками pubspec.yaml.
Собираем приложение и любуемся уникальным экраном-заставки вместо дефолтного splash Flutter!
А вы пользуетесь #пп flutter_native_splash? Делитесь своими историями в чате.
❤6👍6🔥3👏2💯1💘1
Кастомные иконки запуска приложения
Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня покажу, как сделать уникальную иконку запуска приложения⚙️
Нам понадобится пакет flutter_launcher_icons, добавляем его в проект:
Как вы уже заметили, иконку можно отдельно настроить для Web, Windows и MacOS. Рассмотрим ещё другие настройки пакета:
– min_sdk_android (определяет минимальную поддерживаемую версию SDK);
– generate (нужно ли переопределять иконку для данной платформы);
– image_path (путь до изображения, которое будет иконкой);
– image_path_android (путь до изображения, специфичного для платформы android, которое будет иконкой, только для Android);
– image_path_ios (путь до изображения, специфичного для платформы ios, которое будет иконкой, только для iOS);
– adaptive_icon_background (цвет или картинка, которая станет фоном для иконки, только для Android);
– adaptive_icon_foreground (цвет или картинка, которая станет передним планом иконки, только для Android);
– remove_alpha_ios (удаляет альфа-канал для значков iOS);
– background_color (цвет заднего фона иконки, только для Web);
– theme_color (обновляет theme_color в web/manifest.json, только для Web);
– icon_size (определяет размер значка, только для Windows).
Запускаем пакет командой🦋
Ставьте реакцию, если было полезно! И пишите в чате, о чём ещё вам было бы интересно узнать?
Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня покажу, как сделать уникальную иконку запуска приложения
Нам понадобится пакет flutter_launcher_icons, добавляем его в проект:
flutter_launcher_icons:
android: "launcher_icon"
ios: true
image_path: "assets/images/launcher_icon.png"
min_sdk_android: 21 # android min sdk min:16, default 21
web:
generate: true
image_path: "assets/images/launcher_icon.png"
background_color: "#hexcode"
theme_color: "#hexcode"
windows:
generate: true
image_path: "assets/images/launcher_icon.png"
icon_size: 48 # min:48, max:256, default: 48
macos:
generate: true
image_path: "path/to/image.png"
Как вы уже заметили, иконку можно отдельно настроить для Web, Windows и MacOS. Рассмотрим ещё другие настройки пакета:
– min_sdk_android (определяет минимальную поддерживаемую версию SDK);
– generate (нужно ли переопределять иконку для данной платформы);
– image_path (путь до изображения, которое будет иконкой);
– image_path_android (путь до изображения, специфичного для платформы android, которое будет иконкой, только для Android);
– image_path_ios (путь до изображения, специфичного для платформы ios, которое будет иконкой, только для iOS);
– adaptive_icon_background (цвет или картинка, которая станет фоном для иконки, только для Android);
– adaptive_icon_foreground (цвет или картинка, которая станет передним планом иконки, только для Android);
– remove_alpha_ios (удаляет альфа-канал для значков iOS);
– background_color (цвет заднего фона иконки, только для Web);
– theme_color (обновляет theme_color в web/manifest.json, только для Web);
– icon_size (определяет размер значка, только для Windows).
Запускаем пакет командой
flutter pub run flutter_launcher_icons
Ставьте реакцию, если было полезно! И пишите в чате, о чём ещё вам было бы интересно узнать?
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11💘5❤1
Записки мобильного разработчика
Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня я поведаю о своём опыте интеграции штрих-кодов во Flutter-приложение.
Задача: сделать страницу с вертикальным штрих-кодом на весь экран. Слева от него надписи «номер карты» и сам номер карты.
Дополнительным усложнением был контроль яркости устройства. Если он меньше 80% на этой странице, то нужно повысить его искусственно.
Сначала создаю штрих-код с помощью пакета barcode_widget.
Теперь разворачиваю этот виджет на 90 градусов, чтоб он принял вертикальное положение на весь экран. К сожалению, настройки ширины ограничены и пришлось всё делать через RotatedBox.
Штрих-код готов, осталось добавить записи и тоже вертикально.
Перепробовал множество способов вёрстки, и это оптимальное решение, которое мне удалось найти. Если у вас был более удачный опыт, пишите в чате!
Осталось сделать регулирование яркости устройства. Я использовал пакет screen_brightness. Для работы с ним необходимо разрешение для Android:
Однако, яркость нужно вернуть обратно, если пользователь покинет страницу. Для этого нам и пригодится сохранённое значение яркости.
Был ли у вас подобные задачи?➡️ Чат.
Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня я поведаю о своём опыте интеграции штрих-кодов во Flutter-приложение.
Задача: сделать страницу с вертикальным штрих-кодом на весь экран. Слева от него надписи «номер карты» и сам номер карты.
Дополнительным усложнением был контроль яркости устройства. Если он меньше 80% на этой странице, то нужно повысить его искусственно.
Сначала создаю штрих-код с помощью пакета barcode_widget.
BarcodeWidget(
barcode: Barcode.ean13(drawEndChar: true),
data: data,
drawText: false,
errorBuilder: (context, error) => Center(
child: Text(error),
),
)
Теперь разворачиваю этот виджет на 90 градусов, чтоб он принял вертикальное положение на весь экран. К сожалению, настройки ширины ограничены и пришлось всё делать через RotatedBox.
RotatedBox(
quarterTurns: 1,
child: Column(
children: [
Expanded(
flex: 8,
child: Padding(
padding: const EdgeInsets.only(top: 8, left: 8, right: 8),
child: BarcodeWidget(
<...>
),
),
),
],
),
)
Штрих-код готов, осталось добавить записи и тоже вертикально.
RotatedBox(
quarterTurns: 1,
child: Column(
children: [
Expanded(
flex: 8,
child: Padding(
padding: const EdgeInsets.only(top: 8, left: 8, right: 8),
child: BarcodeWidget(
<...>
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
S.current.barCodePageCardNumber,
style: textStyle,
),
Text(
widget.cardCode,
style: textStyle,
),
],
),
),
)
],
),
)
Перепробовал множество способов вёрстки, и это оптимальное решение, которое мне удалось найти. Если у вас был более удачный опыт, пишите в чате!
Осталось сделать регулирование яркости устройства. Я использовал пакет screen_brightness. Для работы с ним необходимо разрешение для Android:
<uses-permission android:name="android.permission.WAKE_LOCK" />
. Пакет позволяет менять яркость устройства через класс ScreenBrightness.@override
void initState() {
initBrightness();
super.initState();
}
Future<void> initBrightness() async {
final isRealDevice = await SafeDevice.isRealDevice;
if (isRealDevice) {
brightness = await ScreenBrightness().current;
if (brightness < 0.8) {
await ScreenBrightness().setScreenBrightness(0.8);
}
}
}
Однако, яркость нужно вернуть обратно, если пользователь покинет страницу. Для этого нам и пригодится сохранённое значение яркости.
Material(
child: PopScope(
onPopInvoked: (value) async {
await ScreenBrightness().setScreenBrightness(brightness);
},
child: Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFF1A1A18),
leading: InkWell(
onTap: () async {
await await ScreenBrightness().setScreenBrightness(brightness);
if (mounted) {
Navigator.of(context).pop();
}
},
<…>
Был ли у вас подобные задачи?
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍8❤2💘1
This media is not supported in your browser
VIEW IN TELEGRAM
Записки мобильного разработчика
Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev Amiga. Мы уже касались темы Sliver'ов, а сегодня я предлагаю погрузиться в практику.
В нашей текущей работе над приложением для сети пекарен, где множество интересных задач и вопросов интерфейса, я активно применяю Sliver'ы и другие виджеты. Давайте рассмотрим, как эти техники могут преобразить создание современного пользовательского интерфейса.
Будет много кода, поэтому переходите на Habr🙂
Делитесь в чате своим опытом с Slivers!
Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev Amiga. Мы уже касались темы Sliver'ов, а сегодня я предлагаю погрузиться в практику.
В нашей текущей работе над приложением для сети пекарен, где множество интересных задач и вопросов интерфейса, я активно применяю Sliver'ы и другие виджеты. Давайте рассмотрим, как эти техники могут преобразить создание современного пользовательского интерфейса.
Будет много кода, поэтому переходите на Habr
Делитесь в чате своим опытом с Slivers!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12👍8❤5❤🔥2⚡1💘1
Настройка локализации
Hola, Amigos! На связи Вова, Flutter dev Amiga. Сегодня расскажем, как можно настроить локализацию в приложении.
Сначала поставим необходимые пакеты в pubspec.yaml:
Flutter localizations – пакет локализации, использующий остальные пакеты ниже.
Intl – пакет для перевода текстов приложения, предоставляет возможности интернационализации и локализации.
Intl utils – вспомогательный пакет для Intl, он генерирует шаблонный код для библиотеки Intl и добавляет автозаполнение ключей в коде Dart.
Далее необходимо у настроек Flutter разрешить генерирование локализованных строк в arb-файлах (generate: true):
Последнее в pubspec.yaml – настроить intl:
Теперь создаём папку l10n, в ней .arb-файлы для языков, на которые будет переведено приложение. В нашем случае – это русский и английский.
В intl_ru.arb:
В intl_en.arb:
Подключаем локализацию к приложению в main.dart:
Для генерирования кода локализации выполняем команду
Возникает вопрос, как использовать локализованные тексты? Тут нам на помощь приходит константа S:
Расскажите в чате, в каком проекте вы использовали данный пакет?
Hola, Amigos! На связи Вова, Flutter dev Amiga. Сегодня расскажем, как можно настроить локализацию в приложении.
Сначала поставим необходимые пакеты в pubspec.yaml:
flutter_localizations:
sdk: flutter
intl: ^0.18.1
intl_utils: ^2.8.7
Flutter localizations – пакет локализации, использующий остальные пакеты ниже.
Intl – пакет для перевода текстов приложения, предоставляет возможности интернационализации и локализации.
Intl utils – вспомогательный пакет для Intl, он генерирует шаблонный код для библиотеки Intl и добавляет автозаполнение ключей в коде Dart.
Далее необходимо у настроек Flutter разрешить генерирование локализованных строк в arb-файлах (generate: true):
flutter:
uses-material-design: true
generate: true
Последнее в pubspec.yaml – настроить intl:
flutter_intl:
enabled: true
main_locale: ru
Теперь создаём папку l10n, в ней .arb-файлы для языков, на которые будет переведено приложение. В нашем случае – это русский и английский.
В intl_ru.arb:
{
"@@locale": "ru",
"title": "Енот"
}
В intl_en.arb:
{
"@@locale": "en",
"title": "Racoon"
}
Подключаем локализацию к приложению в main.dart:
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
///тут подключаем локализацию
localizationsDelegates: const [
S.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
DefaultCupertinoLocalizations.delegate,
],
supportedLocales: S.delegate.supportedLocales,
///
home: const MainScreen(),
);
}
Для генерирования кода локализации выполняем команду
flutter pub run intl_utils:generate
. Или упростите интеграцию .arb-переводов в Flutter с помощью плагина для VS Code.Возникает вопрос, как использовать локализованные тексты? Тут нам на помощь приходит константа S:
Text(
S.current.racoon,
),
Расскажите в чате, в каком проекте вы использовали данный пакет?
👍18🥰3💘3
Обзор Scaffold
Hola, Amigos! Сегодня расскажем, как виджет Scaffold может сделать нашу жизнь проще.
Что такое Scaffold?
Scaffold предоставляет базовую структуру для построения пользовательского интерфейса согласно дизайн-системе Material Design.
Элементы Scaffold
appBar: Панель приложения наверху экрана.
body: Основной контент вашего приложения.
bottomNavigationBar: Нижняя панель навигации.
Как настроить?
Просто добавьте их в соответствующие поля виджета.
Виджеты Drawer и endDrawer
drawer: Панель сбоку, которая появляется при свайпе или нажатии на значок гамбургера.
endDrawer: То же самое, но для правой стороны.
Настройки:
– drawerDragStartBehavior: Как начать перетаскивание.
– drawerScrimColor: Цвет фона, когда drawer открыт.
– drawerEdgeDragWidth: Ширина зоны для открытия drawer свайпом.
o– nDrawerChanged, onEndDrawerChanged: Коллбэки при открытии/закрытии.
Инструменты для кнопок
– persistentFooterButtons: Кнопки внизу.
– floatingActionButton: Плавающая кнопка в правом нижнем углу.
Еще несколько полезных штук:
– bottomSheet: Дополнительная информация внизу.
– backgroundColor: Цвет заднего фона.
– resizeToAvoidBottomInset: Подгон размеров при открытой клавиатуре.
– extendBody, extendBodyBehindAppBar: Управление размерами тела.
– primary: Отображается ли Scaffold в верхней части экрана.
Практика
Попробуйте добавить свои AppBar, создать навигацию с кнопками, исследовать возможности расположения виджетов. Экспериментируйте и делитесь своим опытом в чате!
Hola, Amigos! Сегодня расскажем, как виджет Scaffold может сделать нашу жизнь проще.
Что такое Scaffold?
Scaffold предоставляет базовую структуру для построения пользовательского интерфейса согласно дизайн-системе Material Design.
Элементы Scaffold
appBar: Панель приложения наверху экрана.
body: Основной контент вашего приложения.
bottomNavigationBar: Нижняя панель навигации.
Как настроить?
Просто добавьте их в соответствующие поля виджета.
Виджеты Drawer и endDrawer
drawer: Панель сбоку, которая появляется при свайпе или нажатии на значок гамбургера.
endDrawer: То же самое, но для правой стороны.
Настройки:
– drawerDragStartBehavior: Как начать перетаскивание.
– drawerScrimColor: Цвет фона, когда drawer открыт.
– drawerEdgeDragWidth: Ширина зоны для открытия drawer свайпом.
o– nDrawerChanged, onEndDrawerChanged: Коллбэки при открытии/закрытии.
Инструменты для кнопок
– persistentFooterButtons: Кнопки внизу.
– floatingActionButton: Плавающая кнопка в правом нижнем углу.
Еще несколько полезных штук:
– bottomSheet: Дополнительная информация внизу.
– backgroundColor: Цвет заднего фона.
– resizeToAvoidBottomInset: Подгон размеров при открытой клавиатуре.
– extendBody, extendBodyBehindAppBar: Управление размерами тела.
– primary: Отображается ли Scaffold в верхней части экрана.
Практика
Попробуйте добавить свои AppBar, создать навигацию с кнопками, исследовать возможности расположения виджетов. Экспериментируйте и делитесь своим опытом в чате!
❤11👍9🥰3⚡1💘1
Дайджест февраля
Hola, Amigos! Собрали для вас в одну подборку все полезные посты и статьи февраля, которые вы могли пропустить. Выбирайте, что вам интересно, и переходите по ссылкам.
⚙️ Советы от Team Lead для подготовки к первому собеседованию
⚙️ Анимация и Flutter
⚙️ Home Widget для Android
⚙️ Splash screen
⚙️ Кастомные иконки запуска приложения
⚙️ «Записки мобильного разработчика» про штрих-код
⚙️ Настройки локализации
⚙️ «Записки мобильного разработчика» о Slivers
Напоминаем, что обзоры полезных пакетов вы можете найти по тэгу #пп.
Всем хорошего кода!🙂
Hola, Amigos! Собрали для вас в одну подборку все полезные посты и статьи февраля, которые вы могли пропустить. Выбирайте, что вам интересно, и переходите по ссылкам.
Напоминаем, что обзоры полезных пакетов вы можете найти по тэгу #пп.
Всем хорошего кода!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥5💘3🥰2🎄1
Обновления Flutter 3.19
Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev агентства продуктовой разработки Amiga. Мы с командой подготовили для вас перевод статьи о новинках Flutter в версии 3.19.
Этот выпуск ориентирован на улучшение UX. Представлено множество функций, которые удовлетворяют разнообразные потребности создателей приложений.
В статье вас ждет:
🟡 Интеграция AI с Gemini API
🟡 Модернизация движка
🟡 Оптимизация производительности
🟡 Обновления DevTools
🟡 Разработка Desktop
🟡 Экосистемный прогресс
🟡 Устаревшие версии и критические изменения
Переходите на Habr и знакомьтесь с новыми возможностями Flutter!
Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev агентства продуктовой разработки Amiga. Мы с командой подготовили для вас перевод статьи о новинках Flutter в версии 3.19.
Этот выпуск ориентирован на улучшение UX. Представлено множество функций, которые удовлетворяют разнообразные потребности создателей приложений.
В статье вас ждет:
Переходите на Habr и знакомьтесь с новыми возможностями Flutter!
Please open Telegram to view this post
VIEW IN TELEGRAM
❤14🔥6💘5👍1
Hola, Amigos! В прошлом году мы мощнейне ворвались в APW’23.
Выступали с докладом, принимали участие в круглых столах и воркшопах, дарили всем участникам брендированные подарки от Amiga. И познакомились со множеством классных и вдохновляющих людей!
Взгляните на фото выше, помните наши яркие футболки?🙂
APW больше не будет...
Теперь все идём на BOOST! Меняется не только название конференции, но и формат.
5 потоков вместо трёх:
- управление агентством;
- управление разработкой;
- маркетинг и продажи;
- диджитал-маркетинг;
- дизайн и креатив.
150 спикеров из крупнейших диджитал-агентств и 1000+ участников. От нашей команды также будет несколько спикеров в разные потоки, но об этом расскажем чуть позже🅰️
Две вечеринки, нетворкинг, рейтинги Partners' Club и AGIMA.Outsource, результаты ротации 2024, концерт и супермерч.
Встречаемся 29–30 августа 2024 в «Красном Октябре», Москва.
До 1 апреля действует специальная цена на билет!
Переходите по ссылке и занимайте места➡️ http://boostconf.ru!
Выступали с докладом, принимали участие в круглых столах и воркшопах, дарили всем участникам брендированные подарки от Amiga. И познакомились со множеством классных и вдохновляющих людей!
Взгляните на фото выше, помните наши яркие футболки?
APW больше не будет...
Теперь все идём на BOOST! Меняется не только название конференции, но и формат.
5 потоков вместо трёх:
- управление агентством;
- управление разработкой;
- маркетинг и продажи;
- диджитал-маркетинг;
- дизайн и креатив.
150 спикеров из крупнейших диджитал-агентств и 1000+ участников. От нашей команды также будет несколько спикеров в разные потоки, но об этом расскажем чуть позже
Две вечеринки, нетворкинг, рейтинги Partners' Club и AGIMA.Outsource, результаты ротации 2024, концерт и супермерч.
Встречаемся 29–30 августа 2024 в «Красном Октябре», Москва.
До 1 апреля действует специальная цена на билет!
Переходите по ссылке и занимайте места
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4🔥3🍓3💘2
Обзор MaterialApp
Hola, Amigos! Сегодня расскажем про виджет MaterialApp, который есть в каждом проекте. Он предназначен для создания графического интерфейса в стиле material design.
MaterialApp располагается в самом верху глобального дерева виджетов.
Material Design — это дизайн-система, разработанная Google, которая позволяет сделать универсальный дизайн для разных платформ и устройств.
Основные поля настроек локализации MaterialApp:
– locale ([Locale?] определяет языковой стандарт для виджета «Localizations»;
– localizationsDelegates ([Iterable<LocalizationsDelegate<dynamic>>?] делегаты, которые определяют все локализованные ресурсы для виджета «Localizations»);
– supportedLocales ([Iterable<Locale>] список языков, для которых локализовано это приложение).
Основные поля настроек темы MaterialApp:
– Настройка темы приложения (theme ([ThemeData?] визуальные свойства по умолчанию, а также отедельно для других режимов darkTheme, highContrastTheme, highContrastDarkTheme)
– Устанавливает текущую тему themeMode ([ThemeMode?]).
Основные поля настроек навигации MaterialApp:
– routes ([Map<String, Widget Function(BuildContext)>] таблица маршрутизации верхнего уровня приложения);
– initialRoute ([String?] имя первого отображаемого маршрута, если создан навигатор).
Можно вызвать конструктор MaterialApp.router(), который позволит настроить routerConfig, что бывает полезно при подключении кастомной навигации, например, с применением пакета go_router.
Ну и всем знакомые поля:
– debugShowCheckedModeBanner ([bool] включает небольшой баннер «DEBUG» в режиме отладки);
– home ([Widget?] виджет для маршрута приложения по умолчанию).
А вы используете MaterialApp или CupertinoApp? Рассказывайте в чате.
Hola, Amigos! Сегодня расскажем про виджет MaterialApp, который есть в каждом проекте. Он предназначен для создания графического интерфейса в стиле material design.
MaterialApp располагается в самом верху глобального дерева виджетов.
Material Design — это дизайн-система, разработанная Google, которая позволяет сделать универсальный дизайн для разных платформ и устройств.
Основные поля настроек локализации MaterialApp:
– locale ([Locale?] определяет языковой стандарт для виджета «Localizations»;
– localizationsDelegates ([Iterable<LocalizationsDelegate<dynamic>>?] делегаты, которые определяют все локализованные ресурсы для виджета «Localizations»);
– supportedLocales ([Iterable<Locale>] список языков, для которых локализовано это приложение).
Основные поля настроек темы MaterialApp:
– Настройка темы приложения (theme ([ThemeData?] визуальные свойства по умолчанию, а также отедельно для других режимов darkTheme, highContrastTheme, highContrastDarkTheme)
– Устанавливает текущую тему themeMode ([ThemeMode?]).
Основные поля настроек навигации MaterialApp:
– routes ([Map<String, Widget Function(BuildContext)>] таблица маршрутизации верхнего уровня приложения);
– initialRoute ([String?] имя первого отображаемого маршрута, если создан навигатор).
Можно вызвать конструктор MaterialApp.router(), который позволит настроить routerConfig, что бывает полезно при подключении кастомной навигации, например, с применением пакета go_router.
Ну и всем знакомые поля:
– debugShowCheckedModeBanner ([bool] включает небольшой баннер «DEBUG» в режиме отладки);
– home ([Widget?] виджет для маршрута приложения по умолчанию).
А вы используете MaterialApp или CupertinoApp? Рассказывайте в чате.
👍10🔥3👏2🍓1💘1
Кейс: Мобильное приложение для сети АЗС за 2 месяца
Hola, Amigos! На связи Amiga — агентство продуктовой разработки. Сегодня расскажем, как мы перенесли мобильное приложение с Битрикс на Flutter за 2 месяца, сохранив позиции в сторах и многотысячную базу клиентов.
Наш клиент — Хакасская топливная компания (ХТК), у которой уже было свое мобильное приложение на Битрикс с программой лояльности и с базой пользователей более 70 000 человек.
Битрикс прекратил поддержку мобильного модуля, и мы оперативно перенесли мобильное приложение на Flutter🦋
Нам удалось сохранить большую базу клиентов ХТК и их доверие к компании. Удержать позиции в App Store и Google Play. А также улучшить дизайн интерфейса.
Читайте подробности в статье на vc.
Мы всегда рады вашей обратной связи!❤️
Hola, Amigos! На связи Amiga — агентство продуктовой разработки. Сегодня расскажем, как мы перенесли мобильное приложение с Битрикс на Flutter за 2 месяца, сохранив позиции в сторах и многотысячную базу клиентов.
Наш клиент — Хакасская топливная компания (ХТК), у которой уже было свое мобильное приложение на Битрикс с программой лояльности и с базой пользователей более 70 000 человек.
Битрикс прекратил поддержку мобильного модуля, и мы оперативно перенесли мобильное приложение на Flutter
Нам удалось сохранить большую базу клиентов ХТК и их доверие к компании. Удержать позиции в App Store и Google Play. А также улучшить дизайн интерфейса.
Читайте подробности в статье на vc.
Мы всегда рады вашей обратной связи!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13🏆7❤6💘1
Hola, Amigos! Сегодня расскажем, чем полезен пакет safe_device.
С помощью safe_device можно получить информацию о платформе устройства, проверить доступность различных функций и даже определить, производится ли работа приложения на реальном устройстве или в эмуляторе.
Особенности и функции пакета:
⚙️ Позволяет определить, происходит ли выполнение кода на реальном устройстве или в эмуляторе.
⚙️ Можно получить доступ к информации о платформе устройства, такой как операционная система, версия и другие характеристики.
⚙️ Позволяет проверить доступность различных функций устройства, таких как камера, GPS, Bluetooth и многое другое.
Рекомендуем всем внедрить #пп в свои проекты и убедиться в его эффективности!
Делитесь в чате используете ли вы пакетом safe_device?
С помощью safe_device можно получить информацию о платформе устройства, проверить доступность различных функций и даже определить, производится ли работа приложения на реальном устройстве или в эмуляторе.
Особенности и функции пакета:
Рекомендуем всем внедрить #пп в свои проекты и убедиться в его эффективности!
Делитесь в чате используете ли вы пакетом safe_device?
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤2💘2
Полезные посты и статьи марта, которые вы могли пропустить
Hola, Amigos! На выходных провожаем март, и поэтому заранее для вас собрали всё самое интересное в этом месяце. Выбирайте тему и переходите по ссылке.
1️⃣ Обновления Flutter 3.19
2️⃣ Все на BOOST
3️⃣ Виджет MaterialApp для создания графического интерфейса в стиле material design
4️⃣ Кейс: Приложение для АЗС за 2 месяца
5️⃣ Полезный пакет safe_device
Полезные пакеты вы всегда найдёте по тэгу #пп.
Всем хорошего кода!🙂
Hola, Amigos! На выходных провожаем март, и поэтому заранее для вас собрали всё самое интересное в этом месяце. Выбирайте тему и переходите по ссылке.
Полезные пакеты вы всегда найдёте по тэгу #пп.
Всем хорошего кода!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2💘2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Записки мобильного разработчика
Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev агентства продуктовой разработки Amiga. Сегодня мы вновь займемся практикой!🙂
Недавно у меня в работе возникла задача: в приложении есть блок с уведомлениями, и согласно техническому заданию, необходимо отправить запрос на сервер, когда плитка в списке уведомлений становится видимой на экране, чтобы пометить уведомление как прочитанное.
В новой статье на Habr я рассказал о том, как определить положение объекта на экране с помощью пакета visibility_detector. Это может быть полезно, когда мы хотим понять, виден тот или иной виджет на экране в данный момент или нет.
Читайте по ссылке и делитесь в чате о своем опыте применения пакета⚙️
Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev агентства продуктовой разработки Amiga. Сегодня мы вновь займемся практикой!
Недавно у меня в работе возникла задача: в приложении есть блок с уведомлениями, и согласно техническому заданию, необходимо отправить запрос на сервер, когда плитка в списке уведомлений становится видимой на экране, чтобы пометить уведомление как прочитанное.
В новой статье на Habr я рассказал о том, как определить положение объекта на экране с помощью пакета visibility_detector. Это может быть полезно, когда мы хотим понять, виден тот или иной виджет на экране в данный момент или нет.
Читайте по ссылке и делитесь в чате о своем опыте применения пакета
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍10💘3💩2
Обзор pin_code_fields
Hola, Amigos! С вами Владимир Зевеке, Flutter dev Amiga. Сегодня расскажу про пакет pin_code_fields и его применение на практике.
Пакет полезен для авторизации в приложении по номеру телефона. Я использвовал пакет в NDA проекте из сферы здоровья. Но авторизация по одноразовому коду также часто встречается в приложениях банков, e-com, услуг доставки и др.
Переходите на Habr и читайте статью! Дайте знать, если будет полезно🙂
И делитесь в чате, в каких проектах вы использовали пакет pin_code_fields?
Hola, Amigos! С вами Владимир Зевеке, Flutter dev Amiga. Сегодня расскажу про пакет pin_code_fields и его применение на практике.
Пакет полезен для авторизации в приложении по номеру телефона. Я использвовал пакет в NDA проекте из сферы здоровья. Но авторизация по одноразовому коду также часто встречается в приложениях банков, e-com, услуг доставки и др.
Переходите на Habr и читайте статью! Дайте знать, если будет полезно
И делитесь в чате, в каких проектах вы использовали пакет pin_code_fields?
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤4💩3🔥2💘1
Записки мобильного разработчика
Hola, Amigos! На связи Владимир Зевеке, Flutter dev Amiga. Ранее я рассказывал о том, как интегрировать штрих-коды в приложение Flutter. Сегодня хочу поделиться пакетом screen_brightness, который помогает управлять яркостью экрана. В моём случае, этот виджет понадобился для более эффективной работы другого пакета barcode.
Обратите внимание, что screen_brightness работает только на реальных устройствах, на эмуляторе пакет функционировать не будет⚙️
Давайте перейдем к практике: в нашем приложении есть страница, которая должна быть всегда яркой на 70%. Если при переходе на нее экран тусклый, то мы должны поднять яркость до тех самых 70%.
Сделаем это в отдельном методе, который мы будем вызывать в initState().
Перед изменением уровня яркости экрана, старый показатель мы записали в переменную brightness, чтобы вернуть пользовательские настройки яркости, когда покинем эту страницу.
Таким образом мы можем изменять по своему усмотрению системные настройки яркости в приложении⚙️
Пишите в чате, если было полезно!
Hola, Amigos! На связи Владимир Зевеке, Flutter dev Amiga. Ранее я рассказывал о том, как интегрировать штрих-коды в приложение Flutter. Сегодня хочу поделиться пакетом screen_brightness, который помогает управлять яркостью экрана. В моём случае, этот виджет понадобился для более эффективной работы другого пакета barcode.
Обратите внимание, что screen_brightness работает только на реальных устройствах, на эмуляторе пакет функционировать не будет
Давайте перейдем к практике: в нашем приложении есть страница, которая должна быть всегда яркой на 70%. Если при переходе на нее экран тусклый, то мы должны поднять яркость до тех самых 70%.
Сделаем это в отдельном методе, который мы будем вызывать в initState().
double brightness = 1.0;
@override
void initState() {
initBrightness();
super.initState();
}
Future<void> initBrightness() async {
brightness = await FlutterScreenWake.brightness;
if (brightness < 0.7) {
await FlutterScreenWake.setBrightness(0.7);
}
}
Перед изменением уровня яркости экрана, старый показатель мы записали в переменную brightness, чтобы вернуть пользовательские настройки яркости, когда покинем эту страницу.
return Material(
child: PopScope(
onPopInvoked: (value) async {
await FlutterScreenWake.setBrightness(brightness);
},
child: Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFF1A1A18),
leading: InkWell(
onTap: () async {
await FlutterScreenWake.setBrightness(brightness);
if (mounted) {
Navigator.of(context).pop();
}
},
<…>
),
),
body: <…>,
),
),
);
Таким образом мы можем изменять по своему усмотрению системные настройки яркости в приложении
Пишите в чате, если было полезно!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍6❤3💩2🥰1💘1
This media is not supported in your browser
VIEW IN TELEGRAM
Home Widget для iOS
Hola, Amigos! На связи Сергей Климович, Mobile Team Lead агентства заказной разработки Amiga. Ранее мы вас знакомили с Home Widget для Android, теперь поговорим про iOS.
Рассмотрим, как WidgetKit можно интегрировать в существующий проект Flutter. В конце статьи вас ждет краткий обзор того, как может выглядеть стилизованная и полностью реализованная версия этой функции с помощью Movie Picker.
Переходите по ссылке и читайте статью. Пишите в чате об опыте работы с Home Widget!
Hola, Amigos! На связи Сергей Климович, Mobile Team Lead агентства заказной разработки Amiga. Ранее мы вас знакомили с Home Widget для Android, теперь поговорим про iOS.
Рассмотрим, как WidgetKit можно интегрировать в существующий проект Flutter. В конце статьи вас ждет краткий обзор того, как может выглядеть стилизованная и полностью реализованная версия этой функции с помощью Movie Picker.
Переходите по ссылке и читайте статью. Пишите в чате об опыте работы с Home Widget!
🔥13👍5💘2❤1
Вакансия Middle Flutter-разработчика в Amiga
Hola, Amigos! Наша команда находится в поисках Flutter-разработчика. Может быть, это именно ты — наш дорогой подписчик?
Что нужно делать:
⚙️ верстать экраны и реализовывать анимации;
⚙️ писать бизнес-логику для компонентов;
⚙️ подключать приложения к API;
⚙️ заниматься интеграцией со сторонними сервисами.
Что мы предлагаем:
⚙️ лофт-офис в центре Москвы;
⚙️ гибрид или удаленка;
⚙️ крупные заказчики и интересные кейсы;
⚙️ оформление по ТК РФ.
Мы подходим друг другу, если ты хочешь быть частью молодой команды с амбициозными целями и большими планами!
Знакомьтесь с вакансией по ссылке и откликайтесь! Не забудьте указать в сопроводительном письме, что узнали о вакансии из Flutter. Много🙂
Присоединяйся к нашей команде❤️
Hola, Amigos! Наша команда находится в поисках Flutter-разработчика. Может быть, это именно ты — наш дорогой подписчик?
Что нужно делать:
Что мы предлагаем:
Мы подходим друг другу, если ты хочешь быть частью молодой команды с амбициозными целями и большими планами!
Знакомьтесь с вакансией по ссылке и откликайтесь! Не забудьте указать в сопроводительном письме, что узнали о вакансии из Flutter. Много
Присоединяйся к нашей команде
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤2🔥2💘2
Hola, Amigos! На связи Саша Чаплыгин, Flutter dev Amiga. Сегодня расскажу про пакет get_it для управления зависимостями в приложении. Он основан на паттерне «Service Locator», что позволяет создавать и регистрировать зависимости в централизованном контейнере и получать доступ к ним из любой части приложения.
Покажу, как использовать пакет на примере регистрации синглтона.
Затем используем
И в initState «регистрируем» синглтон.
Теперь, находясь на любой странице приложения, мы можем обратиться к нужному нам репозиторию с помощью
Get It — надежный инструмент для управления зависимостями в ваших приложениях Flutter, обеспечивая удобство, эффективность и чистоту кода.
Пишите о вашем опыте с Get It в чате!
Покажу, как использовать пакет на примере регистрации синглтона.
/// code above
runApp(const VnApp());
}, (e, s) async {});
}
class VnApp extends StatefulWidget {
const VnApp({super.key});
@override
State<VnApp> createState() => _VnAppState();
}
class _VnAppState extends State<VnApp> {
GetIt getIt = GetIt.instance;
Затем используем
MultiRepositoryProvider
и RepositoryProvider
из пакета flutter_bloc для того, чтобы мы смогли обратиться к синглтону из любой части приложения. Переменная router у нас отвечает за навигацию с пакетом go_router.
MultiRepositoryProvider(
providers: [
RepositoryProvider(create: (context) => getIt),
RepositoryProvider(create: (context) => router),
],
И в initState «регистрируем» синглтон.
getIt.registerSingleton(router);
var storage = StorageRepository();
getIt.registerSingleton<StorageRepository>(storage);
Теперь, находясь на любой странице приложения, мы можем обратиться к нужному нам репозиторию с помощью
context.read<GetIt>().get<…>()
.
class MainPage extends StatelessWidget {
const MainPage({super.key});
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => MainBloc(
pageState: PageState(),
mainRepository: context.read<GetIt>().get<MainRepository>(),
profileRepository: context.read<GetIt>().get<ProfileRepository>(),
),
Get It — надежный инструмент для управления зависимостями в ваших приложениях Flutter, обеспечивая удобство, эффективность и чистоту кода.
Пишите о вашем опыте с Get It в чате!
👎30❤9👍8🔥3💩3🥰1💘1
Apple усиливает защиту данных пользователей с 1 мая
Hola, Amigos! Apple ввел новые требования о файле PrivacyInfo.xcprivacy, которое направлено на то, чтобы разработчики явно указывали, какие данные собирают их приложения и для каких целей эти данные используются.
До 1 мая 2024 года все приложения должны быть обновлены и должны содержать файл PrivacyInfo.xcprivacy с корректно заполненной информацией о конфиденциальности.
⚙️ Большинство библиотек уже включают в себя Privacy Manifest. Проверьте обновления для используемых вами библиотек.
Создание файла PrivacyInfo.xcprivacy:
1️⃣ File -> New -> File
2️⃣ Выберите шаблон App Privacy
3️⃣ Выберите таргет вашего проекта или SDK
4️⃣ Назовите файл PrivacyInfo и сохраните
Заполнение файла PrivacyInfo.xcprivacy:
1️⃣ Указать тип данных из письма от Apple (например, местоположение, контакты, фотографии и т.д.)
2️⃣ Найти категорию в документации
3️⃣ Описать, как эти данные используются вашим приложением и обосновать необходимость сбора этих данных
Советы по заполнению:
🔵 Убедитесь, что вы указываете все данные, которые собираете, а также цель сбора данных.
🔵 Будьте честны. Это поможет избежать проблем с проверкой приложения.
🔵 Если вы не знаете, с какой целью в приложении используется определённая категория, вы можете найти в коде конкретные методы.
1 мая уже совсем близко, поэтому советуем убедиться, что вы обновили свои приложения. Всем хорошего кода!🙂
Hola, Amigos! Apple ввел новые требования о файле PrivacyInfo.xcprivacy, которое направлено на то, чтобы разработчики явно указывали, какие данные собирают их приложения и для каких целей эти данные используются.
До 1 мая 2024 года все приложения должны быть обновлены и должны содержать файл PrivacyInfo.xcprivacy с корректно заполненной информацией о конфиденциальности.
Создание файла PrivacyInfo.xcprivacy:
Заполнение файла PrivacyInfo.xcprivacy:
Советы по заполнению:
1 мая уже совсем близко, поэтому советуем убедиться, что вы обновили свои приложения. Всем хорошего кода!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥4❤2💘1