Локальная база данных
Когда вы хотите, чтобы ваше приложение работало офлайн 🔄

Шаг 1: Использование пакета Drift
Для работы с локальной базой данных мы будем использовать пакет Drift. 📦

dart pub add drift
dart pub add drift_flutter
dart pub add drift_dev

Шаг 2: Создание базы данных

@DriftDatabase(tables: [TaskTable])
class Database extends $Database {
  Database([QueryExecutor? e]) : super(e ?? driftDatabase(
    name: 'todo-app',
    native: const DriftNativeOptions(),
    databaseDirectory: getApplicationSupportDirectory,
  ));

  @override
  int get schemaVersion => 2; // Версия базы данных

  @override
  MigrationStrategy get migration {
    return MigrationStrategy(
      onCreate: (m) async {
        await m.createAll();
        // Добавьте миграции здесь, если версия новая
      },
    );
  }
}

Шаг 3: Создание таблицы

@DataClassName('TaskEntry')
class TaskTable extends Table {
  IntColumn get id => integer().autoIncrement()();
  TextColumn get description => text()();

  // Добавьте ваши запросы здесь
  static Stream<List<TaskEntry>> getAllItems(Database database) =>
      database.select(database.taskTable).watch();
}

Шаг 3: Создание или редактирование build.yaml
в корневой папке вашего Flutter-приложения 📁

targets:
  $default:
    builders:
      drift_dev:
        # Эти опции изменяют способ генерации кода
        options:
          databases:
            default: lib/modules/drift/database.dart
            sql:
              dialect: sqlite
              options:
                version: "3.38"
                modules: [fts5]

Запустите сборщик, чтобы регенерировать схему базы данных 🔄

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

Сделайте текст выбираемым

По умолчанию текст не является выбираемым. 🤔

Почему? Виджет SelectionArea позволяет выбирать текст, указывая Flutter обрабатывать отрисовку и взаимодействие для выбора текста. 📝

return MaterialApp(
  home: SelectionArea(
    child: Scaffold(
      appBar: AppBar(title: const Text('SelectionArea Sample')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Row 1'),
            Text('Row 2'),
            Text('Row 3'),
          ],
        ),
      ),
    ),
  ),
);

ИЛИ 🔄

const SelectableText(
  'Hello! How are you?',
  textAlign: TextAlign.center,
  style: TextStyle(fontWeight: FontWeight.bold),
)

Используйте SelectableText вместо Text 🔁

Как выбрать между SelectionArea и SelectableText? 🤔
Используйте selectionArea, если вы хотите включить выбор на нескольких виджетах, а не только на тексте. 📚
Для одного текста просто используйте SelectableText 👍

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

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

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

Показываем версию вашего приложения
Полезно для поддержки клиентов или просто при тестировании новых сборок из магазинов

Отображение версии приложения может быть очень полезным, особенно когда вы тестируете новые сборки или оказываете поддержку клиентам. Для этого нам понадобится пакет package_info_plus. Установите его, добавив в ваш pubspec.yaml:

dependencies:
  package_info_plus: ^latest_version

Далее, вы можете использовать следующий код, чтобы отобразить версию вашего приложения:

class AppVersion extends StatelessWidget {
  const AppVersion({super.key});

  Future<PackageInfo> _getAppVersion() async {
    // Получаем информацию о пакете приложения
    final packageInfo = await PackageInfo.fromPlatform();
    return packageInfo;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<PackageInfo>(
      future: _getAppVersion(),
      builder: (context, snapshot) {
        // Проверяем состояние загрузки данных
        if (snapshot.connectionState == ConnectionState.waiting || snapshot.hasError) {
          return const SizedBox.shrink(); // Возвращаем пустой виджет, если данные ещё не загружены или произошла ошибка
        } else {
          // Отображаем версию приложения и номер сборки
          return Text(
            "Version ${snapshot.data?.version}(${snapshot.data?.buildNumber})",
            textAlign: TextAlign.center,
            style: context.textTheme.bodyMedium?.copyWith(
              color: context.colors.onBackground.withOpacity(.6),
            ),
          );
        }
      },
    );
  }
}

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

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #AppDevelopment #CodingTips #DevTips

Как создать таймер
Создание точного таймера с помощью Flutter

При создании таймера важно помнить, что не стоит полагаться на стандартный Timer, так как задержки и тики могут быть не совсем точными, особенно если процессор загружен.

Проблема с обычным таймером:
- Задержки и тики могут быть не идеально точными, особенно при высокой нагрузке на CPU.

Мы используем специальные колбэки для обновления виджета с анимациями. Обновляем наш виджет каждую секунду и запускаем анимацию соответствующим образом.

Код контроллера таймера:

class TimerController {
  Timer? _timer;
  DateTime? timerEndTime;
  DateTime? timerStartTime;
  TimerState state;
  Duration duration;
  Duration? remaining;
  VoidCallback? onInit;
  VoidCallback? onStart;
  VoidCallback? onPause;
  TimerTick? onTick;
  List<VoidCallback> onCompleteListener;
  List<VoidCallback> _onTickListener;

  BasicTimerController({
    required this.state,
    required this.duration,
    required this.timerEndTime,
    this.remaining,
    this.timerStartTime,
  })  : onCompleteListener = [],
        _onTickListener = [] {
    remaining ??= duration;
  }

  Duration? get elapsed {
    if (remaining == null) {
      return null;
    }
    return duration - remaining!;
  }

  void start() {
    state = TimerState.running;
    final isNewTimer = remaining == null;
    if (isNewTimer) {
      timerStartTime = DateTime.now();
      timerEndTime = timerStartTime!.add(duration);
    } else {
      timerEndTime = DateTime.now().add(remaining!);
      timerStartTime = timerEndTime!.subtract(remaining!);
    }

    onInit?.call();
    onStart?.call();
    remaining ??= duration;

    // Мы могли бы обновлять чаще, но это было бы бесполезно
    const timerFrequency = Duration(milliseconds: 1000);
    _timer = Timer.periodic(timerFrequency, (timer) {
      if (remaining == null || remaining! <= Duration.zero) {
        stop();
        return;
      }
      if (timerEndTime == null) {
        return;
      }
      remaining = timerEndTime!.difference(DateTime.now());
      onTick?.call(remaining!);
      for (final listener in _onTickListener) {
        listener();
      }
    });
  }

  @override
  void pause() {
    _timer?.cancel();
    state = TimerState.paused;
  }
}

Ключевые моменты:
- Если вы знаете, когда таймер должен начаться и закончиться, ваш таймер останется точным, даже если пользователь закроет приложение и вернется.

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

Все подобные новости можно найти по хэштегу #FlutterPulseTips
#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #AppDevelopment #ProgrammingTips #Таймер #Точность #FlutterРазработка

Рисуем таймер
Создание точного таймера с помощью Flutter часть 2

Мы можем использовать шейдер в нашем кастомном рисовальщике (painter).

Мы рисуем полный круг, который будет отображаться постепенно.

Затем мы рисуем круг, который будет уменьшаться каждую секунду.

Мы перерисовываем только если прогресс изменился.

Ну а если вы хотите протестировать какой-то угол вручную...

class CircleTimerPainter extends CustomPainter {
  final double progress;
  final Color progressColor;
  final Color backgroundColor;

  CircleTimerPainter({
    super.repaint,
    required this.progress,
    this.progressColor = Colors.blue,
    this.backgroundColor = Colors.grey,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final angle = 360 * progress; // примечание: Используйте напрямую радианы для лучшей производительности
    final backgroundPaint = Paint()
      ..color = backgroundColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = 28;

    final progressPaint = Paint()
      ..shader = SweepGradient(
        colors: [
          progressColor,
          Colors.red,
        ],
        startAngle: 0 - 90.0.radians,
        endAngle: angle.radians,
      ).createShader(
        Rect.fromCircle(
          center: Offset(size.width / 2, size.height / 2),
          radius: size.width / 2),
      )
      ..color = progressColor
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 20;

    // Рисуем фоновый круг
    canvas.drawCircle(
      size.center(Offset.zero),
      size.width / 2,
      backgroundPaint,
    );

    canvas.drawArc(
      Rect.fromLTWH(0, 0, size.width, size.height),
      -90.0.radians,
      angle.radians,
      false,
      progressPaint,
    );
  }

  @override
  bool shouldRepaint(covariant CircleTimerPainter oldDelegate) {
    return oldDelegate.progress != progress;
  }
}

extension RadianExt on double {
  double get radians => this * (math.pi / 180);
}

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

Получение данных с использованием http-клиента
Как получить данные с удаленного сервера, используя http-клиент 🤔

Шаг 1: Установите пакет http 📦

Future<T> request<T>({
  required String endpoint,
  Map<String, String>? headers,
  Map<String, String>? queryParams,
}) async {
  final url = Uri(
    scheme: config.baseUrlScheme, // http или https
    host: config.baseUrlHost, // localhost или mydomain.com
    path: endpoint, // /api/articles
    queryParameters: queryParams,
    port: config.baseUrlPort, // порт вашего бэкенда
  );

  final response = await http.get(
    url,
    headers: {
      ...?headers, // Предоставление пользовательских заголовков, например, токена API
    },
  );

  if (response.statusCode != 200) {
    throw Exception('Запрос к API завершился неудачей: ${response.statusCode} ${response.reasonPhrase}');
  }

  return json.decode(response.body) as T; // Возвращение обобщенного типа T
}

* Возвращение обобщенного типа T, чтобы можно было напрямую возвращать другой тип. Рекомендуется использовать пакет json_serializable для легкого парсинга объектов 📄
* Предоставление пользовательских заголовков, таких как токен API 🔒
* Улучшение: отправка пользовательских ошибок в зависимости от кода состояния ⚠️

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

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

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

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

Вы можете легко форматировать цены, используя пакет 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

Как правильно обрабатывать результат диалога

Не пытайтесь выполнить код напрямую после закрытия диалога! 🚫💻

При работе с диалогами важно правильно обрабатывать их результат. Давайте рассмотрим два примера кода на Dart, чтобы понять, как это сделать корректно. 💡

Неправильный способ: 🚫

Future<void> showRatingDialog(BuildContext context) {
  return showDialog<RatingResult>(
    context: context,
    barrierDismissible: false,
    builder: (context) {
      return AlertDialog(
        title: const Text('Rate the app'),
        content: const Text('Please rate the app'),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
              // не пытайтесь выполнить что-либо здесь
              // потому что диалог отклонен
            },
            child: const Text('Rate'),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
              // не пытайтесь выполнить что-либо здесь
              // потому что диалог отклонен
            },
            child: const Text('Improve'),
          ),
        ],
      );
    },
  );
}

Правильный способ: ✅

enum RatingResult {
  rate,
  improve,
  never,
}

Future<RatingResult?> showRatingDialog(BuildContext context) {
  return showDialog<RatingResult>(
    context: context,
    barrierDismissible: false,
    builder: (context) {
      return AlertDialog(
        title: const Text('Rate the app'),
        content: const Text('Please rate the app'),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(RatingResult.rate);
            },
            child: const Text('Rate'),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(RatingResult.improve);
            },
            child: const Text('Improve'),
          ),
        ],
      );
    },
  );
}

В первом примере при нажатии на кнопки "Rate" или "Improve" диалог закрывается, но результат не возвращается. Во втором примере при нажатии на кнопки возвращается соответствующее значение из enum `RatingResult`, что позволяет корректно обработать результат.

Оцените новую рубрику и напишите в комментариях, что вы думаете о ней! 🤔💬

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #AppDevelopment #ProgrammingTips #UIUX #SoftwareDevelopment

Как воспроизвести звуки в Flutter

Звуки могут изменить опыт использования приложения. Что может быть более удовлетворительным, чем хороший звук уведомления? 😊

Шаг 1: Установите плагин audioplayers

import 'package:audioplayers/audioplayers.dart';

Шаг 2: Воспроизведите звук напрямую...

await player.play(AssetSource("sounds/beep.wav"));

Это здорово, потому что вам не нужно готовить файл или сбрасывать его, если он уже был воспроизведен... просто попросите воспроизвести, и он сделает свое дело! 👍

Дополнительные возможности

// Установите режим освобождения, чтобы сохранить источник после завершения воспроизведения.
player.setReleaseMode(ReleaseMode.stop);

Это позволяет вам делать гораздо больше, чем просто воспроизводить звук. А за этой простотой вы также можете действительно оптимизировать с помощью расширенных конфигураций, таких как режим освобождения 🔧

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

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

#flutter #dart #flutterpulse #FlutterPulseTips #mobiledevelopment #appdevelopment #codingtips #programming #softwaredevelopment

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