Розробка додатка для iOS та Android за допомогою Flutter з одним кодом

Nihev · Груд. 09, 2025, 11:28 PM

У 2025 році в Туреччині 85% розробників мобільних додатків використовують Flutter. Це

Flutter 3.24 + Dart 3.4
Riverpod 2.5 (керування станом)
GoRouter (навігація 2.0)
Firebase Auth + Firestore (безкоштовно)
Push-сповіщення (Firebase Cloud Messaging)
Публікація в App Store та Play Store (методом EAS)
Найактуальніші найкращі практики 2025 року

1. Встановлення Flutter (найшвидший метод 2025)

# Flutter SDK indir: https://flutter.dev
git clone https://github.com/flutter/flutter.git -b stable
# PATH'e ekle (Windows: ortam değişkenleri, Mac/Linux: ~/.zshrc)
flutter doctor

2. Створення проекту

Ко Select

flutter create todo_app_2025
cd todo_app_2025
flutter pub add firebase_core firebase_auth cloud_firestore
flutter pub add flutter_riverpod go_router firebase_messaging
flutter pub add uuid

3. Встановлення Firebase (2025)

https://console.firebase.google.com → Новий проект
Додати назву пакету Android та iOS (com.seninadiniz.todo2025)
Завантажити файли google-services.json та GoogleService-Info.plist
Помістити в android/app/ та ios/Runner/

4. Основний код додатка – lib/main.dart

Ко Select

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'routes/app_router.dart';
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const ProviderScope(child: MyApp()));
}
class MyApp extends ConsumerWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final router = ref.watch(goRouterProvider);
    return MaterialApp.router(
      title: 'Todo 2025',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routerConfig: router,
      debugShowCheckedModeBanner: false,
    );
  }
}

5. Навігація – lib/routes/app_router.dart

Ко Select

import 'package:go_router/go_router.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../screens/login_screen.dart';
import '../screens/home_screen.dart';
final goRouterProvider = Provider<GoRouter>((ref) {
  return GoRouter(
    initialLocation: '/',
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const LoginScreen(),
      ),
      GoRoute(
        path: '/home',
        builder: (context, state) => const HomeScreen(),
      ),
    ],
  );
});

6. Екран додавання завдань (скорочено – lib/screens/home_screen.dart)

Ко Select

class HomeScreen extends ConsumerWidget {
  const HomeScreen({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final todos = ref.watch(todoProvider);
    return Scaffold(
      appBar: AppBar(title: const Text("Завдання 2025")),
      body: todos.when(
        data: (todoList) => ListView.builder(
          itemCount: todoList.length,
          itemBuilder: (context, index) {
            final todo = todoList[index];
            return ListTile(
              title: Text(todo.title),
              trailing: Checkbox(
                value: todo.completed,
                onChanged: (val) => ref.read(todoProvider.notifier).toggle(todo),
              ),
              onLongPress: () => ref.read(todoProvider.notifier).delete(todo),
            );
          },
        ),
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (_, __) => const Text("Сталася помилка"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _showAddDialog(context, ref),
        child: const Icon(Icons.add),
      ),
    );
  }
  void _showAddDialog(BuildContext context, WidgetRef ref) {
    final controller = TextEditingController();
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text("Нове завдання"),
        content: TextField(controller: controller),
        actions: [
          TextButton(
            onPressed: () {
              ref.read(todoProvider.notifier).add(controller.text);
              Navigator.pop(ctx);
            },
            child: const Text("Додати"),
          ),
        ],
      ),
    );
  }
}

7. Push-сповіщення (Firebase Messaging)

Ко Select

// lib/services/notification_service.dart
import 'package:firebase_messaging/firebase_messaging.dart';
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  print("Фонове сповіщення: ${message.messageId}");
}
class NotificationService {
  static Future<void> init() async {
    FirebaseMessaging messaging = FirebaseMessaging.instance;
    await messaging.requestPermission();
    FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      // Показати toast, коли сповіщення приходить
    });
  }
}

Додати до main.dart:

Ко Select

await NotificationService.init();
8. Публікація в App Store & Play Store (найпростіший метод 2025)

Ко Select

# EAS Build (безкоштовний рівень є)
npm install -g eas-cli
eas login
eas build:configure
eas build --platform all
# Після 30-40 хвилин приходять посилання .aab та .ipa

9. Налаштування App Store Connect та Google Play Console
• Версія: 1.0.0 (1)
• Скріншоти: 6 для iPhone + 5 для Android
• Опис: "Найшвидший додаток завдань 2025"

Розробка додатка для iOS та Android за допомогою Flutter з одним кодом

Nihev