Создание действительно кроссплатформенных приложений Flutter: освоение настольных и веб-приложений
FlutterPulseЭта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀
Большинство разработчиков останавливаются на iOS и Android. Вот как создать приложения Flutter, которые действительно работают везде.
Flutter получил значительную популярность для разработки мобильных приложений, но его возможности伸аются далеко за пределы только Android и iOS. В этой статье я поделюсь опытом разработки сложных приложений Flutter, которые работают без проблем на Windows, macOS и веб-платформах. Хотя разработка мобильных приложений с помощью Flutter хорошо документирована, аспекты настольных и веб-приложений часто представляют уникальные проблемы, которые широко не обсуждаются.
Если вы когда-либо задумывались, как сделать ваше приложение Flutter действительно родным на каждой платформе — не только "работающим", но и действительно thuộc — это руководство покажет вам точно, как.
Проблема истинной跨платформенной разработки
Когда мы говорим о跨платформенной разработке, мы часто фокусируемся на Android и iOS. Однако истинное跨платформенное приложение должно работать на настольных операционных системах и веб-платформах. Это представляет несколько уникальных проблем:
1. Платформо-специфические ожидания UI/UX
Пользователи ожидают, что приложения будут работать в соответствии с конвенциями их платформы. Пользователь Windows ожидает разных взаимодействий, чем пользователь macOS.
2. Различные размеры экранов и методы ввода
От сенсорных экранов до мыши и клавиатуры, каждая платформа имеет разные парадигмы взаимодействия.
3. Платформо-специфические функции
Интеграция с системным треем, управление окнами, доступ к файловой системе — каждая платформа предлагает уникальные возможности.
4. Веб-специфические ограничения
Ограничения безопасности браузера, отсутствие прямого доступа к файловой системе и соображения производительности.
Давайте исследуем, как решить эти проблемы, используя мультиплатформенные возможности Flutter.
Архитектура для успешной跨платформенной разработки
Общий ядро, платформо-специфические оболочки
Одним из наиболее эффективных подходов является поддержание общего ядра кодовой базы, реализуя платформо-специфические оболочки. Однако избегайте этого анти-шаблона:
// ❌ Плохо: Трудно поддерживать и тестировать
if (kIsWeb) {
// Веб-специфическая реализация
} else if (Platform.isWindows) {
// Реализация для Windows
} else if (Platform.isMacOS) {
// Реализация для macOS
}
Вместо этого используйте внедрение зависимостей и абстрактные интерфейсы:
// ✅ Хорошо: Чистая, тестируемая архитектура
abstract class PlatformService {
factory PlatformService() {
if (kIsWeb) {
return WebServiceImpl();
} else if (Platform.isWindows) {
return WindowsServiceImpl();
} else if (Platform.isMacOS) {
return MacOSServiceImpl();
}
return DefaultServiceImpl();
}
Future<void> performPlatformSpecificOperation();
String get platformName;
bool get supportsSystemTray;
}
// Платформо-специфические реализации
class WindowsServiceImpl implements PlatformService {
@override
Future<void> performPlatformSpecificOperation() async {
// Логика для Windows
}
@override
String get platformName => 'Windows';
@override
bool get supportsSystemTray => true;
}
class WebServiceImpl implements PlatformService {
@override
Future<void> performPlatformSpecificOperation() async {
// Логика для веба, используя dart:html
}
@override
String get platformName => 'Web';
@override
bool get supportsSystemTray => false;
}
Этот шаблон позволяет вам писать код, независимый от платформы, который делегирует реализации, специфичные для платформы, когда это необходимо, что делает ваш код намного более поддерживаемым и тестируемым.
Отзывчивый интерфейс за пределами мобильного мышления
Отзывчивый дизайн в Flutter не только об адаптации к разным размерам телефонов. Когда вы нацеливаетесь на настольные компьютеры и веб, вам нужно учитывать намного более крупные вариации размеров экрана и совершенно разные шаблоны взаимодействия.
Адаптивные макеты, которые действительно работают
Создайте систему отзывчивого макета, которая предоставляет разные реализации на основе размера экрана и возможностей платформы:
class ResponsiveLayout extends StatelessWidget {
final Widget mobile;
final Widget tablet;
final Widget desktop;
final Widget? largeDesktop;
const ResponsiveLayout({
Key? key,
required this.mobile,
required this.tablet,
required this.desktop,
this.largeDesktop,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
// Ultra-wide desktop screens
if (constraints.maxWidth >= 1600 && largeDesktop!= null) {
return largeDesktop!;
}
// Standard desktop
else if (constraints.maxWidth >= 1100) {
return desktop;
}
// Tablet
else if (constraints.maxWidth >= 650) {
return tablet;
}
// Mobile
else {
return mobile;
}
},
);
}
}
// Usage example
ResponsiveLayout(
mobile: SingleColumnLayout(),
tablet: TwoColumnLayout(),
desktop: ThreeColumnLayout(),
largeDesktop: FourColumnLayout(), // For ultra-wide monitors
)
Обработка ввода, осведомленная о платформе
Разные платформы ожидают разных шаблонов взаимодействия:
class PlatformAwareGestureDetector extends StatelessWidget {
final Widget child;
final VoidCallback? onTap;
final VoidCallback? onSecondaryTap; // Правый клик
const PlatformAwareGestureDetector({
Key? key,
required this.child,
this.onTap,
this.onSecondaryTap,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
onSecondaryTap: kIsWeb || Platform.isWindows || Platform.isMacOS
? onSecondaryTap
: null, // Нет правого клика на мобильных устройствах
child: MouseRegion(
cursor: (kIsWeb || Platform.isWindows || Platform.isMacOS) && onTap!= null
? SystemMouseCursors.click
: SystemMouseCursors.basic,
child: child,
),
);
}
}
Особенности настольных платформ, которые имеют значение
Профессиональное управление окнами
Для настольных приложений правильное управление окнами имеет решающее значение для родного чувства:
import 'package:window_manager/window_manager.dart';
class DesktopWindowSetup {
static Future<void> initialize() async {
if (!kIsWeb && (Platform.isWindows || Platform.isMacOS || Platform.isLinux)) {
await windowManager.ensureInitialized();
const windowOptions = WindowOptions(
size: Size(1200, 900),
minimumSize: Size(800, 600),
center: true,
backgroundColor: Colors.transparent,
skipTaskbar: false,
titleBarStyle: TitleBarStyle.normal,
windowButtonVisibility: true,
);
await windowManager.waitUntilReadyToShow(windowOptions, () async {
await windowManager.show();
await windowManager.focus();
});
// Настройка обработки событий окна
windowManager.addListener(WindowEventListener());
}
}
}
class WindowEventListener extends WindowListener {
@override
void onWindowClose() async {
// Обработка события закрытия окна
bool isPreventClose = await windowManager.isPreventClose();
if (isPreventClose) {
// Показать диалоговое окно подтверждения или сохранить данные
showDialog(
context: navigatorKey.currentContext!,
builder: (context) => AlertDialog(
title: const Text('Подтверждение выхода'),
content: const Text('Вы уверены, что хотите выйти?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Отмена'),
),
TextButton(
onPressed: () async {
Navigator.pop(context);
await windowManager.destroy();
},
child: const Text('Выход'),
),
],
),
);
}
}
@override
void onWindowMinimize() {
// Необязательно сворачивать в системный трей
if (shouldMinimizeToTray) {
windowManager.hide();
}
}
}
Интеграция с системным треем, сделанная правильно
Добавление поддержки системного трея значительно улучшает опыт настольной платформы:
import 'package:tray_manager/tray_manager.dart';
class SystemTraySetup extends TrayListener {
static Future<void> initialize() async {
if (!kIsWeb && (Platform.isWindows || Platform.isMacOS)) {
await trayManager.setIcon(
Platform.isWindows
? 'assets/icons/app_icon.ico' // Windows требует.ico
: 'assets/icons/app_icon.png', // macOS использует.png
);
// Платформо-специфическая конфигурация
if (Platform.isWindows) {
await trayManager.setToolTip('Мое приложение');
}
await _buildTrayMenu();
trayManager.addListener(SystemTraySetup());
}
}
static Future<void> _buildTrayMenu() async {
final List<MenuItem> items = [
MenuItem(
key: 'show_window',
label: 'Открыть приложение',
),
MenuItem.separator(),
MenuItem(
key: 'settings',
label: 'Настройки',
),
MenuItem.separator(),
MenuItem(
key: 'exit',
label: Platform.isWindows? 'Выход' : 'Выйти', // Платформо-специфическая терминология
),
];
await trayManager.setContextMenu(Menu(items: items));
}
@override
void onTrayIconMouseDown() {
// Показать окно при клике на иконку трея (поведение Windows)
if (Platform.isWindows) {
windowManager.show();
}
}
@override
void onTrayIconRightMouseDown() {
// Показать контекстное меню при правом клике (кроссплатформенно)
trayManager.popUpContextMenu();
}
@override
void onTrayMenuItemClick(MenuItem menuItem) {
switch (menuItem.key) {
case 'show_window':
windowManager.show();
windowManager.focus();
break;
case 'settings':
_showSettings();
break;
case 'exit':
windowManager.close();
break;
}
}
void _showSettings() {
// Показать диалоговое окно настроек или перейти на страницу настроек
}
}
Мастерство веб-платформы
Управление веб-специфическими функциями
Веб-приложения имеют уникальные возможности и ограничения. Вот как ими правильно управлять:
// web_utils.dart - Платформо-независимый интерфейс
abstract class WebUtils {
static WebUtils? _instance;
static WebUtils get instance {
_instance??= _createInstance();
return _instance!;
}
static WebUtils _createInstance() {
if (kIsWeb) {
return WebUtilsWeb();
}
return WebUtilsDefault();
}
String createBlobUrl(Uint8List data, String mimeType);
void openInNewTab(String url);
void downloadFile(Uint8List data, String filename, String mimeType);
bool get supportsFileDownload;
}
// Реализация по умолчанию для платформ, не являющихся веб-приложениями
class WebUtilsDefault implements WebUtils {
@override
String createBlobUrl(Uint8List data, String mimeType) {
throw UnsupportedError('URL-блобов не поддерживаются на этой платформе');
}
@override
void openInNewTab(String url) {
// Можно использовать пакет url_launcher для платформ, не являющихся веб-приложениями
throw UnsupportedError('Новая вкладка не поддерживается на этой платформе');
}
@override
void downloadFile(Uint8List data, String filename, String mimeType) {
// Можно реализовать платформо-специфическое сохранение файла
throw UnsupportedError('Загрузка файла не поддерживается на этой платформе');
}
@override
bool get supportsFileDownload => false;
}
// web_utils_web.dart - Только для веб-платформы
import 'dart:html' as html;
import 'dart:typed_data';
class WebUtilsWeb implements WebUtils {
@override
String createBlobUrl(Uint8List data, String mimeType) {
final blob = html.Blob([data], mimeType);
return html.Url.createObjectUrlFromBlob(blob);
}
@override
void openInNewTab(String url) {
html.window.open(url, '_blank');
}
@override
void downloadFile(Uint8List data, String filename, String mimeType) {
final blob = html.Blob([data], mimeType);
final url = html.Url.createObjectUrlFromBlob(blob);
final anchor = html.AnchorElement(href: url)
..setAttribute('download', filename)
..click();
// Очистить URL-блоб
html.Url.revokeObjectUrl(url);
}
@override
bool get supportsFileDownload => true;
}
Сделайте ваше веб-приложение Flutter более похожим на родное приложение:
// Добавьте в web/index.html в раздел <head>
/*
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Мое Приложение">
*/
// web/manifest.json
/*
{
"name": "Мое Flutter Приложение",
"short_name": "Мое Приложение",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "icons/Icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/Icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
*/
class PWAService {
static Future<void> initialize() async {
if (kIsWeb) {
// Зарегистрируйте сервис-воркер для поддержки offline
await _registerServiceWorker();
// Проверьте, можно ли установить приложение
_checkInstallPrompt();
}
}
static Future<void> _registerServiceWorker() async {
// Логика регистрации сервис-воркера
}
static void _checkInstallPrompt() {
// Проверка на установку PWA
}
}
Расширенная Навигация и Маршрутизация
Надежная система маршрутизации необходима для мультиплатформенных приложений, особенно для веба, где пользователи ожидают навигацию на основе URL:
import 'package:go_router/go_router.dart';
class AppRouter {
static final GoRouter router = GoRouter(
initialLocation: '/home',
debugLogDiagnostics: true,
routes: [
// Маршрут для основной компоновки приложения
ShellRoute(
builder: (context, state, child) {
return AppShellLayout(child: child);
},
routes: [
GoRoute(
path: '/home',
name: 'home',
pageBuilder: (context, state) => _buildPage(
child: const HomeScreen(),
state: state,
),
),
GoRoute(
path: '/settings',
name: 'settings',
pageBuilder: (context, state) => _buildPage(
child: const SettingsScreen(),
state: state,
),
routes: [
// Вложенный маршрут для страниц настроек
GoRoute(
path: '/profile',
name: 'profile',
pageBuilder: (context, state) => _buildPage(
child: const ProfileScreen(),
state: state,
),
),
],
),
],
),
],
errorBuilder: (context, state) => ErrorScreen(
error: state.error.toString(),
),
);
static Page<dynamic> _buildPage({
required Widget child,
required GoRouterState state,
}) {
// Используйте различные переходы в зависимости от платформы
if (kIsWeb || Platform.isWindows || Platform.isMacOS) {
// Нет перехода для настольных/веб-приложений
return NoTransitionPage(
key: state.pageKey,
child: child,
);
} else {
// Переход в стиле мобильных устройств
return MaterialPage(
key: state.pageKey,
child: child,
);
}
}
}
// Пользовательская страница без перехода для настольных приложений
class NoTransitionPage extends Page<void> {
const NoTransitionPage({
required this.child,
super.key,
});
final Widget child;
@override
Route<void> createRoute(BuildContext context) {
return PageRouteBuilder<void>(
settings: this,
pageBuilder: (context, animation, _) => child,
transitionDuration: Duration.zero,
reverseTransitionDuration: Duration.zero,
);
}
}
Для веб-платформ настройте стратегию URL:
import 'package:flutter_web_plugins/url_strategy.dart';
void main() {
if (kIsWeb) {
// Используйте URL на основе пути вместо хэша для лучшей оптимизации
usePathUrlStrategy();
}
runApp(MyApp());
}
Тестирование на нескольких платформах
Тестирование мультиплатформенного приложения требует комплексного подхода:
1. Юнит-тесты для сервисов платформ
// test/platform_service_test.dart
import 'package:flutter_test/flutter_test.dart';
// Простой тест без внешних зависимостей
void main() {
group('PlatformService', () {
late PlatformService platformService;
setUp(() {
platformService = PlatformService();
});
test('должен вернуть правильное имя платформы', () {
expect(platformService.platformName, isNotEmpty);
});
test('должен обрабатывать операции, специфичные для платформы', () async {
// Тестируйте фактическую реализацию платформы
expect(() async => await platformService.performPlatformSpecificOperation(),
returnsNormally);
});
test('должен правильно определить возможности платформы', () {
if (kIsWeb) {
expect(platformService.supportsSystemTray, isFalse);
} else if (Platform.isWindows || Platform.isMacOS) {
expect(platformService.supportsSystemTray, isTrue);
}
});
});
}
2. Тесты виджетов с имитацией платформ
// test/responsive_layout_test.dart
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
void main() {
group('ResponsiveLayout', () {
testWidgets('должен показывать компоновку для мобильных устройств на небольших экранах', (tester) async {
await tester.pumpWidget(
MaterialApp(
home: ResponsiveLayout(
mobile: const Text('Мобильное'),
tablet: const Text('Планшет'),
desktop: const Text('Настольное'),
),
),
);
// Установите небольшой размер экрана
await tester.binding.setSurfaceSize(const Size(400, 800));
await tester.pumpAndSettle();
expect(find.text('Мобильное'), findsOneWidget);
expect(find.text('Планшет'), findsNothing);
expect(find.text('Настольное'), findsNothing);
});
testWidgets('должен показывать компоновку для настольных устройств на больших экранах', (tester) async {
await tester.pumpWidget(
MaterialApp(
home: ResponsiveLayout(
mobile: const Text('Мобильное'),
tablet: const Text('Планшет'),
desktop: const Text('Настольное'),
),
),
);
// Установите большой размер экрана
await tester.binding.setSurfaceSize(const Size(1200, 800));
await tester.pumpAndSettle();
expect(find.text('Настольное'), findsOneWidget);
expect(find.text('Мобильное'), findsNothing);
expect(find.text('Планшет'), findsNothing);
});
});
}
3. Интеграционные тесты
// integration_test/app_test.dart
import 'package:flutter/foundation.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
import 'package:my_app/main.dart' as app;
void main() {
IntegrationTestWidgetsFlutterBinding.ensureInitialized();
group('Тесты интеграции приложения', () {
testWidgets('должен переходить между экранами', (tester) async {
app.main();
await tester.pumpAndSettle();
// Тестируйте навигацию, специфичную для платформы
if (kIsWeb || defaultTargetPlatform == TargetPlatform.windows) {
// Тесты для настольных приложений
await tester.tap(find.byTooltip('Настройки'));
} else {
// Тесты для мобильных устройств
await tester.tap(find.byIcon(Icons.settings));
}
await tester.pumpAndSettle();
expect(find.text('Настройки'), findsOneWidget);
});
});
}
Рассмотрения при развертывании
Каждая платформа имеет свой собственный процесс развертывания и требования: (статья о развертывании в пути)
Развертывание в Windows
# pubspec.yaml flutter: #... другая конфигурация msix_config: display_name: Мое Flutter Приложение publisher_display_name: Моя Компания identity_name: com.mycompany.myapp msix_version: 1.0.0.0 logo_path: assets\icons\app_icon.png capabilities: 'internetClient,microphone,webcam'
Развертывание в macOS
# Дополнения для macos/Runner/Info.plist <key>NSMicrophoneUsageDescription</key> <string>Это приложение требует доступа к микрофону для функций голоса</string> <key>NSCameraUsageDescription</key> <string>Это приложение требует доступа к камере для видеофункций</string>
Развертывание на веб-платформе
#.github/workflows/web-deploy.yml
name: Deploy to Web
on:
push:
branches: [ main ]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: subosito/flutter-action@v2
with:
flutter-version: '3.16.0'
- run: flutter build web --release
- uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir:./build/web
Оптимизация производительности на разных платформах
Оптимизация для каждой платформы
class PerformanceOptimizer {
static void initialize() {
if (kIsWeb) {
_optimizeForWeb();
} else if (Platform.isWindows || Platform.isMacOS) {
_optimizeForDesktop();
} else {
_optimizeForMobile();
}
static void _optimizeForWeb() {
// Оптимизации для веб-платформы
// - Ленивая загрузка изображений
// - Использование эффективного рендеринга списков
// - Минимизация интеропа JavaScript
}
static void _optimizeForDesktop() {
// Оптимизации для настольных платформ
// - Включение ускорения аппаратного обеспечения
// - Оптимизация для больших экранных перерисовок
// - Эффективное управление окнами
}
static void _optimizeForMobile() {
// Оптимизации для мобильных платформ
// - Оптимизация использования батареи
// - Управление памятью
// - Оптимизация интерактивных взаимодействий
}
}
Распространенные ошибки и как их избежать
Не делайте так:
// Плохо: Проверки платформ разбросаны по всему коду интерфейса
Widget build(BuildContext context) {
if (Platform.isWindows) {
return WindowsSpecificWidget();
} else if (Platform.isMacOS) {
return MacOSSpecificWidget();
}
return DefaultWidget();
}
Делайте так:
// Хорошо: Абстрагируйте различия платформ
Widget build(BuildContext context) {
return PlatformAdaptiveWidget(
child: MyContent(),
);
}
class PlatformAdaptiveWidget extends StatelessWidget {
final Widget child;
const PlatformAdaptiveWidget({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return PlatformService.instance.adaptWidget(child);
}
}
Заключение
Создание по-настоящему кроссплатформенного приложения Flutter, которое поддерживает Windows, macOS и веб, требует тщательной архитектуры, учета особенностей платформ и внимания к деталям. Используя описанные в этой статье шаблоны и методы, вы можете создавать приложения, которые не только запускаются на нескольких платформах, но и чувствуются родными для каждой из них.
Ключевые выводы:
- Используйте абстрактные интерфейсы с реализациями для конкретных платформ вместо разбросанных проверок платформ
- Создавайте真正 резponсивные макеты которые адаптируются к разным формам и методам ввода
- Реализуйте функции для конкретных платформ как управление окнами и интеграция с системным треем, вдумчиво
- Обрабатывайте ограничения веб-платформы и возможности с помощью условных импортов и плавных откатов
- Проектируйте прочные системы маршрутизации которые работают хорошо на всех платформах
- Тщательно тестируйте на всех целевых платформах с соответствующими стратегиями тестирования
- Планируйте развертывание заранее и понимайте требования каждой платформы
- Оптимизируйте для каждого сильных и ограничений платформ
С ростом поддержки Flutter для настольных и веб-платформ, он становится все более мощным инструментом для создания приложений, которые действительно работают везде. Инвестиции в правильную многоплатформенную архитектуру окупаются в поддерживаемости, пользовательском опыте и скорости разработки.
Будущее разработки приложений - это многоплатформенность, и Flutter ведет за собой.
Об авторе
Я - опытный разработчик Flutter, специализирующийся на кроссплатформенных приложениях и многоплатформенной архитектуре. С обширным опытом создания приложений Flutter, которые запускаются без проблем на мобильных, настольных и веб-платформах, я помогаю командам преодолевать уникальные проблемы настоящей кроссплатформенной разработки.
Мои области экспертизы включают:
- Много платформенная архитектура Flutter и шаблоны дизайна
- Разработка настольных приложений с ощущением родной пользовательской среды
- Разработка прогрессивных веб-приложений с помощью Flutter
- Платформо-специфические интеграции при сохранении повторного использования кода
- Оптимизация производительности на разных платформах и форм-факторах
Строите много платформенное приложение Flutter или сталкиваетесь с платформо-специфическими проблемами? Я предлагаю услуги консультирования, чтобы помочь вам:
- Разработка масштабируемой много платформенной архитектуры с нуля
- Реализация платформо-специфических функций без нарушения поддерживаемости кода
- Оптимизация производительности для каждой целевой платформы
- Навигация по сложностям развертывания на разных магазинах приложений и веб-хостинге
- Установление стратегий тестирования для много платформенных приложений