Обзор adaptive_dialog
Hola, Amigos! Сегодня расскажем про #пп adaptive_dialog. Инструмент упрощает создание диалогов, предлагая заготовленные пресеты, которые автоматически стилизуются под Android и iOS.
С adaptive_dialog в вашем арсенале 6 удобных диалогов:
1️⃣ showOkAlertDialog (окно с кнопкой "OK");
2️⃣ showOkCancelAlertDialog (окно с кнопками "OK" и "Cancel");
3️⃣ showConfirmationDialog (окно с выбором итема из списка);
4️⃣ showModalActionSheet (окно-выплывашка снизу);
5️⃣ showTextInputDialog (окно с текстовыми полями);
6️⃣ showTextAnswerDialog (окно с текстовым полем формы "вопрос-ответ");
У всех видов диалоговых окон есть группа общих полей:
– title ([String] заголовок диалога);
– style ([AdaptiveStyle] стиль отображения диалога);
– builder ([Widget Function(BuildContext, Widget)] собственно, функция-билдер виджета);
– onWillPop ([Future<bool> Function()] функция, действующая при закрытии диалога);
– message ([String] текст диалога).
Также есть уникальные поля, расширяющие кастомизацию их функционала.
Переходите в чат и рассказывайте, пользовались ли вы пакетом adaptive_dialog и в каких проектах?
Hola, Amigos! Сегодня расскажем про #пп adaptive_dialog. Инструмент упрощает создание диалогов, предлагая заготовленные пресеты, которые автоматически стилизуются под Android и iOS.
С adaptive_dialog в вашем арсенале 6 удобных диалогов:
У всех видов диалоговых окон есть группа общих полей:
– title ([String] заголовок диалога);
– style ([AdaptiveStyle] стиль отображения диалога);
– builder ([Widget Function(BuildContext, Widget)] собственно, функция-билдер виджета);
– onWillPop ([Future<bool> Function()] функция, действующая при закрытии диалога);
– message ([String] текст диалога).
Также есть уникальные поля, расширяющие кастомизацию их функционала.
Переходите в чат и рассказывайте, пользовались ли вы пакетом adaptive_dialog и в каких проектах?
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8👍4🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Записки мобильного разработчика
Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня расскажем, как можно сделать запуск приложения с анимированным логотипом.
В основном файле main.dart устанавливаем SplashPage в качестве домашней страницы, чтобы приложение стартовало с анимированного логотипа.
Далее создаем SplashPage с использованием TickerProviderStateMixin для управления анимациями. Инициализируем анимации в методе initState().
На этом всё!
Ссылка github на код.
Делитесь в чате своими историями с анимациями, будет интересно почитать!
Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня расскажем, как можно сделать запуск приложения с анимированным логотипом.
В основном файле main.dart устанавливаем SplashPage в качестве домашней страницы, чтобы приложение стартовало с анимированного логотипа.
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
useMaterial3: true,
),
home: const SplashPage(),
);
}
}
Далее создаем SplashPage с использованием TickerProviderStateMixin для управления анимациями. Инициализируем анимации в методе initState().
Future<void> playAnimation() async {
await Future.delayed(const Duration(milliseconds: 1000));
for (int i = 0; i < controllerColorOpacityList.length; i++) {
await controllerColorOpacityList[i].animateTo(1);
}
if (mounted) {
Navigator.of(context).pushReplacement(_createRoute());
}
}
И, наконец, реализуем анимированный переход между SplashPage и MainBottomNavigationBar с использованием PageRouteBuilder.
Route _createRoute() {
return PageRouteBuilder(
transitionDuration: const Duration(milliseconds: 700),
pageBuilder: (context, animation, secondaryAnimation) => const MainBottomNavigationBar(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const Offset begin = Offset(0.0, 1.0);
const Offset end = Offset.zero;
final Tween<Offset> tween = Tween(begin: begin, end: end);
final Animation<double> curvedAnimation = CurvedAnimation(
parent: animation,
curve: Curves.linear,
);
return FadeTransition(
opacity: curvedAnimation,
child: child,
);
},
);
}
На этом всё!
Ссылка github на код.
Делитесь в чате своими историями с анимациями, будет интересно почитать!
👍13🔥5❤4
This media is not supported in your browser
VIEW IN TELEGRAM
AppLifecycle
Hola, Amigos! Сегодня с вами я, Саша Чаплыгин, Flutter dev Amiga. Предлагаю обсудить одну интересную тему — отслеживание состояния приложения: в фоне, закрыто или не активно.
Я написал статью, из которой вы поймете, как обрабатывать переходы в новое состояние. Узнаете 2 подхода к реализации, которые могут выручить в той или иной ситуации.
Читайте на Habr и делитесь своим опытом работы с жизненным циклом приложения в чате⚙️
Hola, Amigos! Сегодня с вами я, Саша Чаплыгин, Flutter dev Amiga. Предлагаю обсудить одну интересную тему — отслеживание состояния приложения: в фоне, закрыто или не активно.
Я написал статью, из которой вы поймете, как обрабатывать переходы в новое состояние. Узнаете 2 подхода к реализации, которые могут выручить в той или иной ситуации.
Читайте на Habr и делитесь своим опытом работы с жизненным циклом приложения в чате
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17❤2🔥2⚡1
Полезные посты и статьи января, которые вы могли пропустить
Hola, Amigos! Вот и дайджест января. Уже целый месяц нового года прошел!
🔵 Видео-лекции с DevFest 2023
🔵 Flutter 3.16 (часть 1)
🔵 Flutter 3.16 (часть 2)
🔵 Анимация и Flutter
🔵 Интеграция видеоплеера во Flutter
🔵 Жизненный цикл приложения
А еще напоминаем, что обзоры полезных пакетов вы можете найти по тэгу #пп.
Выбирайте, что вам интересно и переходите по ссылкам.
Рассказывайте в чате, как начался ваш 2024-ый? И какими проектами вы сейчас увлечены?
Hola, Amigos! Вот и дайджест января. Уже целый месяц нового года прошел!
А еще напоминаем, что обзоры полезных пакетов вы можете найти по тэгу #пп.
Выбирайте, что вам интересно и переходите по ссылкам.
Рассказывайте в чате, как начался ваш 2024-ый? И какими проектами вы сейчас увлечены?
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6💘3🔥2💩1
Советы от Team Lead для подготовки к первому собеседованию
Hola, Amigos! На связи Сережа Климович, Mobile Team Lead Amiga. Сегодня вернемся к теме собеседований, хочу вам дать несколько советов от себя и напомнить о рекомендациях нашей Group Lead HR, Кати. Берите на вооружение!
Начну с того, что у начинающих мобильных разработчиков есть несколько грейдов: «стажер», «junior» и «junior+». В зависимости от скиллов будут меняться требования к сотруднику и условия сотрудничества.
Оценивайте свои знания и умения трезво, не стыдно чего-то не знать. А некоторые компании, и мы в том числе, готовы обучать и «выращивать» сотрудников.
Что должен знать даже стажер?
🟡 Минимально в Dart: типы данных и переменные, функции, классы, Control flow statement, примитивные структуры, литералы, print, понимание null safety.
🟡 В Flutter: runApp, MaterialApp, Scaffold, Align, Container, Flex, Expanded, Spacer, ListView, Text, простая навигация между двумя экранами, разница между Stateless и Stateful виджетами.
🟡 Уметь устанавливать и настраивать IDE, dart и flutter для разработки.
🟡 Понимать суть работы удаленных репозиториев Git (GitHub / GitLab).
Junior должен знать всё, о чем я написал выше. Плюс:
⭕️ Иметь практический опыт основ объектно-ориентированного и асинхронного программирования.
⭕️ Понимать механизм управления локальным состоянием. Знание виджетов для верстки экранов, способов взаимодействия с пользователем (кнопки, жесты и т.п.).
⭕️ Базовое управление проектами. Обязательно: Pub и pub.dev, pubspec.yaml.
⭕️ Уметь взаимодействовать с git через IDE.
⭕️ Понимать HTTP запросы, например get/post.
⭕️ Знать форматы запросов и ответов, например JSON и пакет json_serializable.
С таким набором скиллов, я думаю, у вас точно есть все шансы получить свою первую работу! И не забывайте, что личные качества тоже имеют большое значение. Будьте честными и открытыми. Успехов!
Если вам интересна эта тема и есть вопросы, то пишите в чат. Пообщаемся🙂
Hola, Amigos! На связи Сережа Климович, Mobile Team Lead Amiga. Сегодня вернемся к теме собеседований, хочу вам дать несколько советов от себя и напомнить о рекомендациях нашей Group Lead HR, Кати. Берите на вооружение!
Начну с того, что у начинающих мобильных разработчиков есть несколько грейдов: «стажер», «junior» и «junior+». В зависимости от скиллов будут меняться требования к сотруднику и условия сотрудничества.
Оценивайте свои знания и умения трезво, не стыдно чего-то не знать. А некоторые компании, и мы в том числе, готовы обучать и «выращивать» сотрудников.
Что должен знать даже стажер?
Junior должен знать всё, о чем я написал выше. Плюс:
С таким набором скиллов, я думаю, у вас точно есть все шансы получить свою первую работу! И не забывайте, что личные качества тоже имеют большое значение. Будьте честными и открытыми. Успехов!
Если вам интересна эта тема и есть вопросы, то пишите в чат. Пообщаемся
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍5🤡3💘3❤1🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация и Flutter
Hola, Amigos! Меня зовут Сергей Климович, Mobile Team Lead агентства заказной разработки Amiga. В мире мобильной разработки Flutter выделяется своей гибкостью и простотой в создании красивых пользовательских интерфейсов.
Однако, чтобы добавить дополнительные визуальные эффекты и повысить уровень графической привлекательности приложения, иногда необходимо выходить за рамки стандартных возможностей. И в этом нам помогают шейдеры⚙️
Шейдеры предоставляют возможность создавать сложные визуальные эффекты, изменять внешний вид элементов интерфейса и даже реализовывать анимации, которых было бы трудно достичь с использованием обычных методов.
В новой статье рассказываю, как использовать шейдеры в приложениях Flutter, открыв новые горизонты для креативной реализации дизайнерских идей⚙️
Всем хорошего кода! Делитесь в чате своим опытом работы с анимацией в Flutter.
Hola, Amigos! Меня зовут Сергей Климович, Mobile Team Lead агентства заказной разработки Amiga. В мире мобильной разработки Flutter выделяется своей гибкостью и простотой в создании красивых пользовательских интерфейсов.
Однако, чтобы добавить дополнительные визуальные эффекты и повысить уровень графической привлекательности приложения, иногда необходимо выходить за рамки стандартных возможностей. И в этом нам помогают шейдеры
Шейдеры предоставляют возможность создавать сложные визуальные эффекты, изменять внешний вид элементов интерфейса и даже реализовывать анимации, которых было бы трудно достичь с использованием обычных методов.
В новой статье рассказываю, как использовать шейдеры в приложениях Flutter, открыв новые горизонты для креативной реализации дизайнерских идей
Всем хорошего кода! Делитесь в чате своим опытом работы с анимацией в Flutter.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15👍4❤2🤷♂2👏1
Home Widget для Android
Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня расскажем, как сделать виджет HomeScreen с помощью пакета home_widget.
Для приложения на Android создадим макет виджета внутри android/app/src/main/res/layout. Нажимаем правой кнопкой мыши на папку android, выбираем Flutter/Open Android module in Android Studio. В новом окне нажимаем правой кнопкой мыши на app, выбираем New/Widget.
Сгенерируется несколько файлов для редактирования. Один из них — файл конфигурации виджета (расположен в android/app/src/main/res/xml). Ещё один файл – сам макет виджета (расположен в android/app/src/main/res/layout).
Обратите особое внимание в коде ниже на строчку
Также в AndroidManifest.xml у нас появился ресивер.
Нам осталось настроить передачу данных между нашим Flutter-приложением и HomeWidget. Для этого в файле android\app\src\main\java\com\example\sandbox\HomeWidgetTextTable.kt импортируем плагин и пишем код обновления HomeWidget.
Теперь создаем TextField и набираем текст, отображаемый в HomeWidget.
Как мы видим, созданный нами метод updateUI отвечает за передачу новых данных HomeWidget.
Ставьте реакцию, если было полезно!
Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня расскажем, как сделать виджет HomeScreen с помощью пакета home_widget.
Для приложения на Android создадим макет виджета внутри android/app/src/main/res/layout. Нажимаем правой кнопкой мыши на папку android, выбираем Flutter/Open Android module in Android Studio. В новом окне нажимаем правой кнопкой мыши на app, выбираем New/Widget.
Сгенерируется несколько файлов для редактирования. Один из них — файл конфигурации виджета (расположен в android/app/src/main/res/xml). Ещё один файл – сам макет виджета (расположен в android/app/src/main/res/layout).
Обратите особое внимание в коде ниже на строчку
android:id="@+id/firstString"
. Тут мы выдали тексту id-шник, который нам понадобится позже.</RelativeLayout
<TextView
android:id="@+id/firstString"
… />
</RelativeLayout>
Также в AndroidManifest.xml у нас появился ресивер.
<receiver
android:name=".HomeWidgetTextTable"…
</receiver>
Нам осталось настроить передачу данных между нашим Flutter-приложением и HomeWidget. Для этого в файле android\app\src\main\java\com\example\sandbox\HomeWidgetTextTable.kt импортируем плагин и пишем код обновления HomeWidget.
class HomeWidgetTextTable : AppWidgetProvider() {
override fun onUpdate(
context: Context,
appWidgetManager: AppWidgetManager,
appWidgetIds: IntArray
) {
for (appWidgetId in appWidgetIds) {
updateAppWidget(context, appWidgetManager, appWidgetId)
}
}
}
internal fun updateAppWidget(
context: Context,
appWidgetManager: AppWidgetManager,
appWidgetId: Int
) {
val widgetData = HomeWidgetPlugin.getData(context)
val firstString = widgetData.getString("firstString", null)
val views = RemoteViews(context.packageName, R.layout.home_widget_text_table)
views.setTextViewText(R.id.firstString, firstString)
appWidgetManager.updateAppWidget(appWidgetId, views)
}
Теперь создаем TextField и набираем текст, отображаемый в HomeWidget.
@override
void initState() {
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
HomeWidget.initiallyLaunchedFromHomeWidget().then((value) async {
updateUI();
});
});
super.initState();
}
void updateUI() {
var text = controller.text;
HomeWidget.saveWidgetData<String>('firstString', text);
HomeWidget.updateWidget(
//name: 'TextTable',
androidName: 'HomeWidgetTextTable',
iOSName: 'HomeWidgetTextTable',
);
}
@override
Widget build(BuildContext context) {
return Column(
children: [
TextField(
controller: controller,
style: const TextStyle(
color: Colors.white,
),
onChanged: (value) {
updateUI();
},
),
const SizedBox(height: 16),
],
);
}
}
Как мы видим, созданный нами метод updateUI отвечает за передачу новых данных HomeWidget.
Ставьте реакцию, если было полезно!
👍37❤8💘3
Обзор scroll_to_index
Hola, Amigos! Сегодня рассмотрим #пп scroll_to_index. Данный пакет облегчает управление скроллом у прокручиваемых наборов виджетов. Для этого нам нужно дочерние виджеты у скроллящегося списка обернуть в новый виджет AutoScrollTag.
Благодаря этому виджету, мы можем управлять поведением скролла через контроллер. А именно, проскроллить лист до нужного нам итема по индексу:
Настройки пакета:
– key ([Key] ключ виджета);
– controller ([AutoScrollController] контроллер, через который мы можем управлять прокруткой);
– index ([int] индекс виджета в скроллящемся списке);
– color ([Color?] цвет фона у дочернего виджета);
– highlightColor ([Color?] тоже должен был как-то влиять на визуал дочернего виджета, но изменений мы не обнаружили);
– disabled ([bool] включает/выключает контроллер для этого дочернего виджета);
– builder ([Widget Function(BuildContext, Animation<double>)?] билдер виджета);
– child ([Widget?] дочерний виджет).
Расскажите в чате использовали ли вы scroll_to_index в своих проектах?⚙️
Hola, Amigos! Сегодня рассмотрим #пп scroll_to_index. Данный пакет облегчает управление скроллом у прокручиваемых наборов виджетов. Для этого нам нужно дочерние виджеты у скроллящегося списка обернуть в новый виджет AutoScrollTag.
Благодаря этому виджету, мы можем управлять поведением скролла через контроллер. А именно, проскроллить лист до нужного нам итема по индексу:
autoScrollController
.scrollToIndex(30, preferPosition: AutoScrollPosition.begin); //где 30 - это index у AutoScrollTag.
Настройки пакета:
– key ([Key] ключ виджета);
– controller ([AutoScrollController] контроллер, через который мы можем управлять прокруткой);
– index ([int] индекс виджета в скроллящемся списке);
– color ([Color?] цвет фона у дочернего виджета);
– highlightColor ([Color?] тоже должен был как-то влиять на визуал дочернего виджета, но изменений мы не обнаружили);
– disabled ([bool] включает/выключает контроллер для этого дочернего виджета);
– builder ([Widget Function(BuildContext, Animation<double>)?] билдер виджета);
– child ([Widget?] дочерний виджет).
Расскажите в чате использовали ли вы scroll_to_index в своих проектах?
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🍓3🔥2💘2
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