Вложенная навигация с Go_Router
Давайте создадим боковую панель с Flutter Web и go_router 🤔

Вместо того, чтобы напрямую добавлять все маршруты (GoRoute), мы обернём их в поднавигацию 📦

Мы обернём все подмаршруты в StatefulShellRoute, чтобы управлять состоянием поднавигации 🔄

Для каждого подмаршрута у нас будет StatefulShellBranch, который может содержать несколько маршрутов 🌐

Каждый элемент будет иметь свой собственный стек навигации 📚

import 'package:go_router/go_router.dart'; // Импорт библиотеки go_router

GoRouter generateRouter() {
  return GoRouter(
    routes: [
      // Страница без боковой панели
      GoRoute(
        name: 'signin',
        path: '/signin',
        builder: (context, state) => const SignInPage(),
      ),
      // Страница с боковой панелью
      StatefulShellRoute(
        parentNavigatorKey: navigatorKey, // Ключ навигатора родительского маршрута
        // Боковая панель будет отображаться слева
        builder: (context, state, navigationShell) => Row(
          children: [
            SideBar(state: state), // Боковая панель
            Expanded(child: navigationShell), // Содержимое навигации
          ],
        ),
        // builder будет вызван, когда маршрут активируется
        // navigationShell - виджет, который отображает содержимое маршрута
        // Он будет показывать текущую последнюю страницу стека навигации для каждой ветки
        navigatorContainerBuilder: (
          BuildContext context,
          StatefulNavigationShell navigationShell,
          List<Widget> children,
        ) {
          if (children.isEmpty) {
            return SizedBox(); // Пустой контейнер, если нет дочерних элементов
          }
          return Scaffold(
            body: children[navigationShell.currentIndex], // Отображение текущего дочернего элемента
          );
        },
        branches: [
          StatefulShellBranch(
            routes: [
              GoRoute(
                name: 'users',
                path: '/users',
                builder: (context, state) => const UsersPage(),
              ),
              GoRoute(
                name: 'user profile',
                path: '/users/:userId',
                builder: (context, state) => const UserProfilePage(),
              ),
            ],
          ),
          StatefulShellBranch(
            routes: [
              GoRoute(
                name: 'notifications',
                path: '/notifications',
                builder: (context, state) => const NotificationsPage(),
              ),
            ],
          ),
        ],
      ),
    ],
  );
}

Оцените новую рубрику 👍👏! Все подобные новости можно найти по хэштегу #FlutterPulseTips. Не забудьте подписаться и следить за новыми советами 🔔

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #FlutterTips #GoRouter #NestedNavigation #FlutterWeb

Ускорьте Firebase Firestore на iOS

Firestore долго компилируется каждый раз, когда вы запускаете приложение с нуля...

...Хорошая новость в том, что есть решение, предоставленное invertase 🙌

Откройте файл podfile для iOS
Добавьте pod 'FirebaseFirestore'... следующим образом:

target 'Runner' do
  use_frameworks!
  use_modular_headers!
  # ДОБАВЬТЕ ЭТО
  pod 'FirebaseFirestore', :git => 'https://github.com/invertase/firestore-ios-sdk-frameworks.git', :tag => '11.2.0'

Вам нужно добавить соответствующую версию, используемую в вашем Flutter-зависимости.

Оцените новую рубрику лайком 👍! Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #Firebase #iOS #Firestore #MobileDevelopment #FlutterTips

Детали для улучшения формы

Ничто не раздражает так сильно, как невозможность закрыть клавиатуру. Пользователь нажимает в любом месте... и клавиатура остаётся. Вместо этого вы можете просто сделать так:


final _formKey = GlobalKey<FormState>();

class SigninPage extends StatelessWidget {
const SigninPage({super.key, this.canDismiss = true});

@override
Widget build(BuildContext context) {
final translations = Translations.of(context).signin;

return GestureDetector(
onTap: () => FocusScope.of(context).unfocus(), // Убираем фокус с полей при нажатии вне их
child: PopScope(
canPop: canDismiss,
child: TopImgBackground(
bgImagePath: 'assets/images/signin/signin_background.png',
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
automaticallyImplyLeading: canDismiss,
foregroundColor: context.colors.background,
),
resizeToAvoidBottomInset: false,
body: Form(
autovalidateMode: AutovalidateMode.disabled,
key: _formKey,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: ListView(
children: [
const SizedBox(height: 150),
Text(
translations.title,
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
),
),
);
}
}


Решение: Оберните всю страницу в GestureDetector, а затем снимите фокус со всех элементов, используя функцию FocusScope. Это позволит автоматически убрать клавиатуру при нажатии вне текстовых полей.

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDev #UIUX #AppDev #CodingTips #DevTips #FlutterTips

Шпаргалка по InteractiveViewer

InteractiveViewer - это виджет, который позволяет пользователям перемещать, масштабировать и взаимодействовать с дочерним содержимым с помощью жестов, таких как сжатие и перетаскивание.

InteractiveViewer(
  transformationController: TransformationController()
    ..value = (Matrix4.identity()..scale(scale)),
  scaleEnabled: false,
  constrained: false,
  panEnabled: false,
  onInteractionStart: (details) => print('Начало взаимодействия'),
  onInteractionUpdate: (details) => print('Обновление взаимодействия'),
  onInteractionEnd: (details) => print('Конец взаимодействия'),
  child: Image.asset("name_of_your_image.png"),
)

* scaleEnabled:
* Позволяет пользователю масштабировать с помощью жестов сжатия (по умолчанию: true).
* Установите значение false, чтобы отключить масштабирование.
* constrained:
* Ограничивает дочерний элемент в пределах границ просмотра (по умолчанию: true).
* Установите значение false для неограниченного перемещения/масштабирования за пределами границ просмотра.
* panEnabled:
* Позволяет перетаскивать/перемещать дочерний элемент с помощью касания (по умолчанию: true).
* Установите значение false, чтобы отключить перемещение.
* onInteractionStart:
* Callback, срабатывающий при начале взаимодействия (перемещение или масштабирование).
* Предоставляет детали, такие как фокусная точка и масштаб.
* onInteractionUpdate:
* Callback, вызываемый непрерывно при перемещении или масштабировании пользователем.
* Полезно для отслеживания обновлений жестов в реальном времени.

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #UIUX #FlutterTips #CodingCheatsheet

Шпаргалка по форматированию цен

Вы можете легко форматировать цены, используя пакет intl. Вот наиболее распространенные методы:

import 'package:intl/intl.dart';

// Форматирование с указанием локали и символа валюты
NumberFormat.currency(locale: 'en_US', symbol: '\$').format(12.2);
// $12.2

// Форматирование валюты с использованием текущей локали устройства
NumberFormat.currency().format(12.2);
// US 12.2 или EUR 12.2 в зависимости от локали устройства

// Форматирование валюты без десятичных знаков
NumberFormat.currency(decimalDigits: 0).format(12.2);
// US 12

// Простое форматирование валюты
NumberFormat.simpleCurrency().format(12.2);
// $12.2

// Компактное форматирование больших чисел
NumberFormat.compactSimpleCurrency().format(1200000);
// $1.2M

Оцените нашу новую рубрику по Flutter советам! 👍 Оставьте свои комментарии и реакции, если вам понравился этот пост! 💬👍

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #AppDevelopment #ProgrammingTips #Coding #FlutterTips

Single execution Future Builder

FutureBuilder с единственным выполнением

FutureBuilder будет выполнять наше будущее при каждой пересборке. Если это будущее выполняет вызов API, это может быть дорогостоящим и перегружать наш бэкэнд.

Мы предоставляем Future функцию, которая предотвращает повторное выполнение Future при каждой пересборке страницы.

typedef AsyncFutureBuilder<T> = Future<T> Function();

class SingleExecFutureBuilder<T> extends StatefulWidget {
  final AsyncFutureBuilder<T> future;
  final Widget Function(BuildContext context, T data) builder;

  const SingleExecFutureBuilder({
    super.key,
    required this.future,
    required this.builder,
  });

  @override
  State<SingleExecFutureBuilder<T>> createState() => _SingleExecFutureBuilderState<T>();
}

class _SingleExecFutureBuilderState<T> extends State<SingleExecFutureBuilder<T>> {
  T? _futureRes;
  late FutureState _futureState;

  @override
  void initState() {
    super.initState();
    _futureState = FutureState.pending;
  }

  Future<T?> executeFuture() async {
    if (_futureState == FutureState.pending) {
      try {
        _futureRes = await widget.future();
        _futureState = FutureState.done;
        return _futureRes;
      } catch (e) {
        _futureState = FutureState.error;
        rethrow;
      }
    }
    return _futureRes;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<T>(
      future: executeFuture(),
      builder: (context, snapshot) {
        if (snapshot.connectionState != ConnectionState.done) {
          return const SizedBox.shrink();
        }
        return widget.builder(context, snapshot.data as T);
      },
    );
  }
}

enum FutureState { pending, done, error }

Пример использования:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text('Count: $count'),
          const SizedBox(height: 16),
          SingleExecFutureBuilder<String>(
            future: () async {
              print("Getting future once");
              await Future.delayed(const Duration(milliseconds: 1100));
              return "Hello";
            },
            builder: (context, data) => Text(data),
          ),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              setState(() {
                count++;
              });
            },
            child: const Text('+'),
          ),
        ],
      ),
    ),
  );
}

Выполните этот код, и вы увидите "Getting future once" только один раз, вместо того, чтобы видеть это каждый раз, когда вы нажимаете кнопку "+".


Оцените новую рубрику по Flutter советам! 👍💬 Нам важно ваше мнение, чтобы мы могли улучшать контент для вас! 😊👍

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #FutureBuilder #FlutterTips #CodingTips #AppDevelopment

Как задать высоту строки внутри колонки

Привет, Flutter-разработчики! 👋 Сегодня мы рассмотрим интересную задачу: как правильно задать высоту строки (Row) внутри колонки (Column). Эта проблема часто возникает при создании адаптивных интерфейсов, и мы разберем, как ее решить с помощью виджета IntrinsicHeight. 📐

Проблема: 🤔
Когда вы пытаетесь разместить Row внутри Column и хотите, чтобы высота Row определялась максимальным размером дочерних элементов, вы можете столкнуться с ошибкой. Flutter требует, чтобы размеры виджетов были ограничены, а Row по умолчанию не имеет ограничений по высоте.

Решение: 💡
Используйте виджет IntrinsicHeight в качестве родителя для Row. Этот виджет устанавливает высоту Row равной максимальному размеру его дочерних элементов.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Column(
        children: [
          IntrinsicHeight( // Оберните Row в IntrinsicHeight
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
              children: [
                Expanded(
                  flex: 2,
                  child: Container(
                    color: Colors.red,
                    padding: const EdgeInsets.all(32.0),
                    child: const Center(child: Text('Flex 2')),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    color: Colors.green,
                    padding: const EdgeInsets.all(32.0),
                    child: const Center(child: Text('Flex 1')),
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: 100,
            color: Colors.blue,
            child: const Center(child: Text('Контейнер с фиксированной высотой')),
          ),
        ],
      ),
    ),
  );
}

Почему это работает? 🔍
- IntrinsicHeight определяет максимальную внутреннюю высоту дочерних элементов Row и применяет ее ко всем детям.
- CrossAxisAlignment.stretch растягивает дочерние элементы на всю доступную высоту.
- mainAxisSize: MainAxisSize.min устанавливает размер Row по основной оси в минимально необходимый.

Вывод: 🎉
Использование IntrinsicHeight позволяет легко управлять размером Row внутри Column, делая ваш интерфейс гибким и адаптивным. Оцените эту рубрику и оставляйте свои комментарии! 💬

Все подобные советы вы можете найти по хэштегу #FlutterPulseTips. 👉 Оцените новую рубрику и подпишитесь на наш канал! 👍

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #UIUX #FlutterTips #AppDevelopment #CodingTips

Null-Aware элементы
Dart 3.8 ввёл действительно практичную новую функцию языка, называемую null-aware элементами. Она позволяет уменьшить количество шаблонного кода для проверки null элементов перед их отображением.

До:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        if (title != null)
          title
        ...
      ]
    )
  );
}

После:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        ?title <----- 
        ...
      ]
    )
  );
}

Оцените новую рубрику лайком 👍, если считаете её полезной! 💡
Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #DartLanguage #NullAware #CodingTips #MobileDevelopment #FlutterTips

1..2..3... Гонка Future

Представьте, что вы ждёте ответ от нескольких источников. Но вам нужен только один ответ. Ладно, такое случается не часто, но представьте...

Ждём только 1 ответ

Будьте осторожны, если первый запрос выдаёт ошибку до того, как придёт второй ответ... Future завершится с ошибкой. Значит, вам нужно игнорировать эту ошибку в вашем будущем запросе.

import 'dart:async';
import 'package:http/http.dart' as http;

void main() async {
  await Future.any([
    getPost(SERVER_1), // первый сервер
    getPost(SERVER_2), // второй сервер
  ]);
}

Future<String> getPost(String url) async {
  final response = await http.get(Uri.parse('....'));
  if (response.statusCode == 200) {
    return response.body; // возвращаем тело ответа
  } else {
    throw Exception('Не удалось загрузить пост'); // выбрасываем исключение
  }
}

Что возвращает Future.any?
Он возвращает Future, который завершается с первым результатом. Вы можете передать несколько Future разных типов.

Оцените новую рубрику! 👍💡 Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #FutureAny #AsyncProgramming #FlutterTips #MobileDevelopment #ProgrammingTips

Ждём готовности представления

Не редко возникает необходимость выполнить код после того, как представление будет готово. Например, показать всплывающее окно после отображения всех элементов или запустить камеру после инициализации представления.

Чтобы добиться желаемого результата, следуйте простым шагам:
1. Создайте StatefulWidget.
2. В методе initState вызовите WidgetsBinding.instance.addPostFrameCallback.

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    // ваш код здесь
  });
}

Преимущества использования addPostFrameCallback:
- Гарантия, что код выполнится после полной готовности представления.
- Избежание случайных задержек, которые могут не сработать в нужный момент.

Не злоупотребляйте этим методом! В большинстве случаев можно найти альтернативные решения, которые позволят выполнить код позже без использования addPostFrameCallback.

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

Все подобные советы ищите по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevTips #AppDev #FlutterTips #DartLang

A/B тестирование иконок приложения в Apple Store

Иконка приложения действительно важна. Хорошая иконка может удвоить количество загрузок. И лучший способ это выяснить? Протестировать иконку и увидеть результаты.

Шаги для A/B тестирования иконок приложения:

1 - Откройте Xcode и создайте несколько иконок.
2 - Выберите этот пункт, обратите внимание, что имя иконки по умолчанию - это имя, которое мы предоставляем в активах.
3 - Отправьте новую сборку и дождитесь ее валидации.
4 - Создайте новую "оптимизацию страницы продукта".


# Пример кода для создания альтернативных иконок
// Создание альтернативных иконок в Xcode
// Шаг 1: Откройте Xcode и перейдите в раздел Assets
// Шаг 2: Создайте новые наборы иконок
// Шаг 3: Настройте Info.plist для использования альтернативных иконок
<key>CFBundleIcons</key>
<dict>
<key>CFBundleAlternateIcons</key>
<dict>
<key>MyAlternateIcon</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>alternate-icon</string>
</array>
</dict>
</dict>
</dict>


Теперь вам нужно отправить этот тест на валидацию (снова).

Советы:
- Предпочитайте делать только одно изменение за тест.
- Не меняйте скриншоты при смене иконки. Так вы будете знать, что отвечает за новые данные.

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

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileAppDevelopment #AppStoreOptimization #ABTesting #UIUX #AppDesign #FlutterTips