Привет! Это Роза, Flutter Dev Friflex! 👋

Открывая любое приложение, скорее всего вы там увидите одну или 2 иконки. Но откуда они и как добавить свои кастомные иконки? В Flutter вы можете работать с иконками, используя три основных подхода: 

1️⃣ Иконки из шрифтов (Icon Fonts) — встроенные иконки, такие как Material Icons.
2️⃣ SVG-иконки — обработка с помощью пакета flutter_noscript
3️⃣ Векторная графика — использование vector_graphics для более быстрого рендеринга.

Предлагаю сравнить эти варианты и рассмотреть, когда и где использовать каждый из них.

🔸Иконки из шрифтов (Icon Fonts)
Иконки из шрифтов — это символы в формате шрифтов, например, Material Icons:

Icon(Icons.home, size: 32, color: Colors.blue)

Можно использовать кастомные шрифты с иконками. Например, с помощью IcoMoon:

1. Генерируем файл .ttf с иконками.
2. Подключаем в pubspec.yaml:


flutter:
      fonts:
        - family: CustomIcons
          fonts:
            - asset: assets/fonts/CustomIcons.ttf

3. Используем:
    

const Text(
              '\uE900',
              style: TextStyle(fontFamily: 'CustomIcons', fontSize: 32),
            ),


    

🔸SVG-иконки с flutter_noscript:
Для кастомных иконок в векторном формате используем пакет flutter_noscript:

import 'package:flutter_noscript/flutter_noscript.dart';

SvgPicture.asset(
  'assets/icons/home.noscript',
  width: 32,
  height: 32,
  colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
)



🔸Векторная графика (Vector Graphics)
Для повышения производительности конвертируем SVG в формат vector_graphics. Он рендерится быстрее.

import 'package:vector_graphics/vector_graphics.dart';

VectorGraphic(
  assetName: 'assets/icons/home.vec',
  width: 32,
  height: 32,
)



Что выбрать?

✅Icon Fonts — для стандартных иконок с высокой производительностью.
✅Flutter SVG — для кастомных и анимированных иконок.
✅Vector Graphics — для максимальной скорости рендеринга.

Какой метод используете вы? Делитесь в комментариях! 🚀

Рубеж в 700 страниц электронной версии книги "Основы Flutter" пройден 🥳🥳

Скорей всего на следующей неделе, после утверждения, курс на степике пополнится главой "Тестирование" 🤬

Привет, это Анна, Friflex Flutter Team Lead.

Признавайтесь, кому приходилось хотя бы раз писать расширения для строк, чисел и даже списков, чтобы выполнить какие-то простые преобразования или проверки, которых нет среди стандартных функций? Уверена, почти всем! Сегодня я расскажу, как перестать это делать.

Вам нужна всего одна библиотека — dartx.

Пакет дает доступ к дополнительным расширениям классов String, int, num, Iterable, DateTime, File и других, которые используются буквально в каждом проекте. Разберем самые интересные функции.

🔸String
1️⃣ capitalize() и decapitalize() — изменят регистр только первой буквы предложения
2️⃣ isNotNullOrBlank и isNullOrBlank — проверят, есть ли читаемое содержимое, при этом не учитывая специальные символы по типу \n и пробелов
3️⃣ urlEncode и urlDecode — в строке преобразуют ссылку в формат application/x-www-form-urlencoded или обратно



final capitalizedText = 'пример заглавной буквы'.capitalize(); // Пример заглавной буквы
final isBlank = ' \n'.isNullOrBlank; // true
final decodedText = 'Пример%20декодирования'.urlDecode; // Пример декодирования 



🔸Iterable
1️⃣ sortedBy() и thenBy() — позволят вам выполнить сортировку по нескольким признакам
2️⃣ chunkWhile() и splitWhen() — объединит в подсписки при выполнении или невыполнении условия



final dogs = [
      Dog(name: "Charlie", age: 1),
      Dog(name: "Bark", age: 3),
      Dog(name: "Charlie", age: 6),
    ];
final sorted = dogs.sortedBy((dog) => dog.name).thenByDescending((dog) => dog.age); // Bark, Charlie (6), Charlie (3)
final chunckedList =[1, 2, 4, 9, 10, 11].chunkWhile((a, b) => a + 1 == b); // [[1, 2], [4], [9, 10, 11]]



🔸DateTime/Duration (эти функции можно подключить отдельно через пакет time)
1️⃣isAtSameYearAs(date) — проверит, находится ли текущая дата в рамках одного и того же года даты date в параметре (есть аналогичные проверки по месяцу и дню)
2️⃣ minutes.fromNow и minutes.ago — высчитает DateTime по указанной длительности в будущем и прошлом
3️⃣ hours — создаст Duration объект из целого числа



final tenMinutes = 10.minutes; // Duration(minutes: 10)
final isAtSameYear = DateTime(2025, 01, 01).isAtSameYearAs(DateTime(2020, 10, 05)); // false
final timeInFuture = 5.minutes.fromNow; // DatiTime.now() + 5 минут 



Это только малая часть того, что умеет dartx!

❤️ — если уже пользуетесь пакетом
🔥 — если только сейчас открыли для себя его чудесные функции