Flutter Pulse
528 subscribers
352 photos
775 links
На канале будут новости про flutter с сайтов, информация об обновлении пакетов, а также авторский контент.
Download Telegram
Firestore: конфигурация из нативных приложений

Вы, возможно, пропустили это... Плагин Firebase может использовать конфигурацию напрямую на стороне Dart!

Шаги по настройке:

1. Создайте несколько окружений Firebase для разработки/стадии/продакшена, используя только Dart.
Создайте 3 файла в папке runners. Один для каждой среды.

2. Создайте несколько файлов конфигурации Flavors.
Также сгенерируйте все файлы FirebaseOptions, используя flutterFire cli.

3. Удалите запуск из вашего main.dart и добавьте это:


Future<void> runWrapperApp(FlavorConfig config) async {
// Инициализируйте конфигурацию приложения здесь
// Например, установите уровень журнала на основе среды
final firebaseApp = await Firebase.initializeApp(
options: config.firebaseConfig,
);
runApp(MyApp());
}



4. Запустите приложение:


flutter run -t lib/runners/main_dev.dart



Важно:
- FlutterFire cli добавляет нативную зависимость на iOS/Android.
- Удалите конфигурацию Firebase из папок android и iOS.
- На Android удалите службы Google из build.gradle.

Оцените новую рубрику! 👍 Оставляйте ваши отзывы в комментариях! 💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #Firestore #Firebase #FlutterTips #MobileDevelopment #AppDevelopment
👍1
Оптимизация генерации кода
Ускорьте генерацию кода Flutter ⚡️

Заметка: Что такое генерация кода в Flutter?
Flutter позволяет генерировать шаблонный код с помощью аннотаций над классом/методом.
Это особенно полезно для генерации JSON-объектов (пакет json_serializable) или внедрения сервисов (gate_generator).

Как запустить генерацию кода?
1. Установите пакет build_runner и пакет, генерирующий код (см. примечание выше)
2. Выполните команду:
flutter packages pub run build_runner build --delete-conflicting-outputs


1 - Создайте файл build.yaml в корне проекта, как этот:

targets:
$default:
builders:
gate_generator:gate_schema:
enabled: true
generate_for:
include:
- "lib/gate/**.dart"
- "lib/services/**/**.dart"
- "lib/data/repositories/**.dart"
- "lib/ui/**/**.dart"
exclude:
- "lib/data/entities/**.freezed.dart"
- "lib/data/entities/**.g.dart"
freezed:
enabled: true
generate_for:
exclude:
- test
include:
- lib/data/entities/**
source_gen|combining_builder:
options:
ignore_for_file:
- "type=lint"


Включайте папки, содержащие файлы с аннотациями.
Генераторы кода будут сканировать только эти папки.
Вы можете легко исключать папки или файлы для каждого генератора кода.

Оцените новую рубрику и напишите своё мнение! 👍💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #FlutterTips #CodeGeneration #OptimizeCode #FlutterDevelopment #MobileDevelopment #ProgrammingTips #DevelopmentTips
👍2🔥2
Как создать список чекбоксов с помощью CheckboxListTile

Привет, подписчики! 👋 Сегодня мы рассмотрим, как легко создать список чекбоксов в вашем Flutter-приложении, используя виджет CheckboxListTile. 📝

Преимущества CheckboxListTile:
- Упрощает создание списков с чекбоксами
- Позволяет легко управлять состоянием выбранных элементов
- Поддерживает стандартный стиль Material Design

Пример кода:


class SkillsFilterList extends StatelessWidget {
final SkillsFilter skillsFilter;
final Function() onChanged;

const SkillsFilterList({
Key? key,
required this.skillsFilter,
required this.onChanged,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return ListView.separated(
shrinkWrap: true,
physics: const BouncingScrollPhysics(),
itemCount: skillsFilter.value.length,
separatorBuilder: (context, index) => const SizedBox.shrink(),
itemBuilder: (context, index) {
final skill = this.skillsFilter.value[index];
return ListTileTheme(
contentPadding: EdgeInsets.all(0),
child: CheckboxListTile(
dense: true,
title: Text(skill.scopeName),
value: skill.chosed,
onChanged: (skill) {
skillsFilter.select(skill);
onChanged();
},
),
);
},
);
}
}



Ключевые моменты:
ListView.separated используется для создания списка с разделителями
CheckboxListTile упрощает создание элемента списка с чекбоксом и текстом
✦ Свойство onChanged обрабатывает изменения состояния чекбокса

Оцените эту рубрику и напишите в комментариях, какие темы вы хотели бы видеть в будущих выпусках! 💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #UIUX #FlutterTips #AppDevelopment #CodingTips
👍41
Кнопка с градиентом и анимацией

Привет, подписчики! 👋 Сегодня мы рассмотрим интересный пример создания анимированной кнопки с градиентным фоном во Flutter. 📱

Основная идея:
Мы создадим кнопку, у которой при нажатии будет изменяться градиентный фон с анимацией. Для этого мы используем AnimatedGradientButton, который будет обрабатывать анимацию.

Код примера:


class AnimatedGradientButton extends StatefulWidget {
final Text? label;
final Gradient gradient;
final Gradient onPushGradient;
final Icon? icon;
final Function()? onPressed;

AnimatedGradientButton({
this.label,
required this.gradient,
required this.onPushGradient,
this.icon,
this.onPressed,
});

@override
_AnimatedGradientButtonState createState() => _AnimatedGradientButtonState();
}

class _AnimatedGradientButtonState extends State<AnimatedGradientButton>
with TickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;

@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(milliseconds: 1000),
vsync: this,
);
_animation = CurvedAnimation(curve: Curves.decelerate, parent: _controller);
}

@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
gradient: LinearGradient(
colors: widget.gradient.colors.map((color) => Color.lerp(
color,
widget.onPushGradient.colors[widget.gradient.colors.indexOf(color)],
_animation.value,
)).toList(),
),
),
child: MaterialButton(
onPressed: () {
_controller.forward();
widget.onPressed?.call();
_controller.reverse();
},
child: widget.label,
),
);
},
);
}
}



Как это работает:
1. Мы оборачиваем MaterialButton в контейнер с градиентным фоном.
2. При нажатии на кнопку запускается анимация, которая изменяет градиент от исходного к целевому.
3. Color.lerp используется для плавного перехода между цветами градиента.

Перспективы:
- Можно создать собственный объект рендеринга.
- Полностью переработать кнопку без использования MaterialButton.
- Расширить ButtonStyleButton как обычные кнопки.

Оцените новую рубрику и напишите в комментариях, что хотели бы увидеть дальше! 👍 Оцените пост и подпишитесь 😉

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #UIUX #Animation #FlutterTips #DartLang #GradientButton #AnimatedButton
🔥2👍1
Работаем с клавиатурными сокращениями

При создании приложений для Flutter Web или Desktop, важно обеспечить удобное управление клавиатурными сокращениями. В этом нам помогут виджеты Shortcuts и Actions! 🚀

Shortcuts - это виджет, который создаёт привязку клавиш к определённым действиям для своих потомков. Всё просто: вы предоставляете карту клавиш и интенций (Intent).

Actions - этот виджет позволяет потомкам вызывать действия, определённые в родителе. Его можно использовать как вместе с Shortcuts, так и отдельно 😉

Давайте рассмотрим пример кода:

// Это просто используется для указания нужного действия
class SelectAllIntent extends Intent {}

@override
Widget build(BuildContext context) {
return Shortcuts(
shortcuts: <LogicalKeySet, Intent>{
LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.keyA): SelectAllIntent(),
},
child: Actions(
dispatcher: LoggingActionDispatcher(),
actions: <Type, Action<Intent>>{
SelectAllIntent: SelectAllAction(),
},
child: Builder(
builder: (BuildContext context) => TextButton(
onPressed: Actions.handler<SelectAllIntent>(context, SelectAllIntent()),
child: const Text('SELECT ALL'),
),
),
),
);
}

// Action будет содержать логику, которую вы хотите выполнить при срабатывании клавиатурного сокращения
class SelectAllAction extends Action<SelectAllIntent> {
@override
void invoke(covariant SelectAllIntent intent) {
// делайте то, что вам нужно
}
}



В этом примере мы создаём клавиатурное сокращение Ctrl+A для вызова действия SelectAllAction. Просто и удобно! 👍

Оцените нашу новую рубрику и напишите, о чём бы вы хотели узнать в следующий раз 🤔

Все подобные советы ищите по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #FlutterTips #MobileDev #KeyboardShortcuts #FlutterDev #CodingTips
👍2
🚀 Расширяем возможности Flutter с помощью FFI: Вызываем функции из GO!

Привет, Flutter-энтузиасты! Руслан подготовил 🔥горячее видео, которое откроет вам мир межъязыкового взаимодействия. Узнайте, как заставить Dart и Go работать в тандеме через FFI (Foreign Function Interface)!

👉 Смотрите видео здесь:
Расширяем возможности Flutter с помощью FFI. Вызываем функции из GO

В этом выпуске вы узнаете:
🔹 Как передавать строки между Dart и Go (и обратно!)
🔹 Особенности работы с памятью и Garbage Collector
🔹 Магию горутин (goroutine) и defer
🔹 Практические примеры вызова Go-кода из Flutter-приложений

Почему это важно?
Вы сможете использовать сильные стороны Go (например, многопоточность через горутины) в своих Flutter-проектах! Автор наглядно показывает процесс компиляции, преобразования типов и управления памятью.

💡 В следующих выпусках:
- Работа с Rust, Python и C++ через FFI
- Продвинутые техники оптимизации


🔥 P.S. Увидите, как Go-горутины ускоряют вычисления в сравнении с Dart-изолятами!

#Flutter #Dart #FlutterPulse #FlutterPulseTips #FlutterPulseYoutube
#FFI #Golang #MobileDevelopment #CrossPlatform

👉 Больше полезного в плейлисте: #FlutterPulseYoutube
Шпаргалка по Dart map

Maps are fast - Карты работают быстро

Карта - это коллекция пар ключ/значение. Значение извлекается из карты с помощью связанного с ним ключа.

В Dart существует 3 типа карт:
- HashMap - неупорядоченная
- LinkedHashMap - упорядоченная по порядку вставки
- SplayTreeMap - упорядоченная по ключам



// Простая карта со строковым ключом: строковым значением
var data = {'name': 'John Doe', 'occupation': 'gardener'};
// карта, типизированная с помощью конструктора Map<String, String>()
var data2 = <int, String>{1: 'sky', 2: 'falcon', 3: 'rock'};



Преобразование списка в карту



// преобразование списка в карту
var resultMap = Map.fromIterable(list, key: (v) => v[0], value: (v) => v[1]);
// или
var result = { for (var v in list) v[0]: v[1] };
// или просто используя метод asMap() для автоматического индексирования
var result = ["test","test2","test3"].asMap(); // {0: test, 1: test2, 2: test3}



Зачем использовать карту?

Доступ к элементу в списке с использованием indexOf или contains имеет сложность O(n).

Доступ к элементу или проверка его наличия в карте занимает O(1).

Карты выигрывают в этом

Как создать неизменяемую карту?

https://pub.dev/packages/built_collection - Этот пакет предоставляет способы создания неизменяемых карт (разработан командой Dart).

Функции карты



var details = {'Usrname': 'bruce', 'Password': 'mypas'};
// добавление
details['Uid'] = '3802983209A';
// обновление
details.putIfAbsent("Uid", () => "3802983209A");
// преобразование в другую карту
details.map((key, value) => MapEntry(key, "$key:$value"));
// приведение к другому типу
details.cast<int, int>();
// проверка наличия ключа
details.containsKey("key"); // сложность O(1)
// копирование
var copy = {...details};
// обновление
details.update("Usrname", (value) => "joker");



Оцените новую рубрику! 👍💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #DartTips #MobileDevelopment #ProgrammingTips #Coding #FlutterCommunity
👍2