Уже ранее была статья на эту тему, но в этом случае все советы не помогли. Помогли другие:
Для динамического построения виджетов удобно использовать List.generate, который в качестве параметра принимает количество элементов, а на вход функции-кэлбека — текущий элемент перебора. Использовать можно например как-то так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
List <Widget> MyBoardView(){ int poz=0; return List<Widget>.generate(lh, (int index_h){ return Row( children: List<Widget>.generate(lw, (int index_w){ poz++; return Padding( padding: EdgeInsets.all(1), child: Container( color: Colors.orange, height: MediaQuery.of(context).size.height/lh-2 , width: MediaQuery.of(context).size.width/lw-2, child: Text("$poz") ) ); }), ); }); } |
Очень часто в коде тех, кто только начал свой путь в разработке на Flutter встречаются бесконечные однотипные портянки вроде:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
child: Text( FilteredListAutoes[index]["cars"][index2]["name"], style: TextStyle(fontFamily: 'Poppins', color: Colors.black, fontSize: 14.sp,) .... .... final ButtonStyle raisedButtonStyleSuccess = ElevatedButton.styleFrom( onPrimary: Colors.black87, primary: Colors.orangeAccent, minimumSize: Size(120, 36), padding: EdgeInsets.symmetric(horizontal: 16), shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10)), ), ); |
т.е. повторяющиеся во всём проекте прямые указания цвета, шрифта и т.п. А что если далее необходимо будет поменять эти самые шрифты и цвета? Менять руками всё довольно утомительно. К счастью в Flutter есть встроенный механизм, который помогает решить эту задачу: в виджете MaterialApp, возможно указать «Тему», как то так:
|
1 2 3 4 5 6 7 |
import 'package:me_flutter/inc/theme.dart' as me_theme; MaterialApp( builder: EasyLoading.<em>init</em>(), title: 'Приколись!', debugShowCheckedModeBanner: false, theme: me_theme.createMeTheme(), ... |
И оформим отдельный класс с «Темой»:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
library me_flutter.theme; import 'package:flutter/material.dart'; ThemeData createMeTheme() { return ThemeData( brightness: Brightness.light, //scaffoldBackgroundColor: Colors.grey[100], bottomAppBarColor : Colors.grey[100], // цвет фона панельки нижнего меню fontFamily : "Robotic", // основной шрифт primaryColor: Colors.black, // основной цвет текста appBarTheme : AppBarTheme( backgroundColor: Colors.white // фон панели сверху (Надпись Приколись! или название страницы) ), ); } // зададим собственные названия свойств extension CustomColorScheme on ColorScheme { Color get success => const Color(0xFF28a745); Color get info => const Color(0xFF17a2b8); Color get warning => const Color(0xFFffc107); Color get danger => const Color(0xFFdc3545); Color get TrayBackground => Colors.blue.shade900; // полоска трея вверху Color get TrayFontColor => Colors.white; // цвет текста в трее вверху } |
И далее во всех вложенных виджетах, автоматически будут применятся данные цвета. Так-же их можно указать принудительно, например так:
|
1 2 3 4 |
color: Theme.of(context).primaryColor .. color: Theme.of(context).colorScheme.TrayFontColor //своё собственное свойство |
С PUSH уведомлениями, во Flutter, вроде бы всё и просто, но вот я провозился три дня, чтобы заставить приложение стабильно их показывать. Большая часть проблем вытекает из-за постоянно развивающейся кодовой базы Flutter, в результате чего большая часть примеров в сети — уже не рабочие.
Проблема №1
Пакет flutter_webview_plugin_ios_android, который оказался не совместим с вызовом FirebaseMessaging.onBackgroundMessage, после инициализации которого, перестали работать кэлбеки webview на переходы на другие url (GitHub Issue).
Выход: не бросаться на простой в использовании пакет, а использовать максимально популярный webview_flutter. Хотя и оный у меня заработал, только в самой последней версии — до этого были проблемы с отображением некоторых сайтов с не понятными SSL сертификатами.
Проблема №2
Вызов ensureInitialized:
|
1 2 3 4 5 |
Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); ... FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler); ... |
который у «всех работает а у меня не работает». И вызывает ошибку
|
1 |
Unhandled Exception: [core/duplicate-app] A Firebase App named "[DEFAULT]" already exists |
Пришлось обернуть в:
|
1 2 3 |
try { await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); } catch (e) {} |
Проблема №3
Подобрать комбинацию пакетов Flutter и окружение Android Studion, чтобы «всё заработало». В итоге удовлетворительно заработало при используемых версия пакетов Flutter:
firebase_messaging: ^14.4.0
flutter_local_notifications: ^13.0.0
И зависимостей build.grade для Android Studio:
\android\app\build.gradle:
|
1 2 3 4 5 6 7 |
dependencies <strong>{ </strong>implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" implementation 'com.yandex.android:maps.mobile:4.2.2-full' implementation 'com.google.firebase:firebase-bom:31.4.0' implementation 'com.google.firebase:firebase-messaging:23.1.2' implementation 'com.android.support:multidex:1.0.3' <strong>}</strong> |
\android\build.gradle:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
buildscript <strong>{ </strong>ext.kotlin_version = '1.6.10' repositories <strong>{ </strong>google() mavenCentral() <strong>} </strong>dependencies <strong>{ </strong>classpath 'com.android.tools.build:gradle:7.1.2' classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" classpath 'com.google.gms:google-services:4.3.15' <strong>} }</strong> |
Итак, вот текущая минимальная обвязка для работы с PUSH уведомлениями получилась:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import 'package:flutter_local_notifications/flutter_local_notifications.dart'; import 'firebase_options.dart'; import 'permissions.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:firebase_messaging/firebase_messaging.dart'; FirebaseMessaging messaging = FirebaseMessaging.instance; Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async { await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); await setupFlutterNotifications(); showFlutterNotification(message); print('Handling a background message ${message.messageId}'); } late AndroidNotificationChannel channel; bool isFlutterLocalNotificationsInitialized = false; Future<void> setupFlutterNotifications() async { if (isFlutterLocalNotificationsInitialized) {return;} channel = const AndroidNotificationChannel( 'high_importance_channel', // id 'High Importance Notifications', // title description: 'High Importance Notifications', // description importance: Importance.high, ); flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin(); await flutterLocalNotificationsPlugin.resolvePlatformSpecificImplementation<AndroidFlutterLocalNotificationsPlugin>()?.createNotificationChannel(channel); await FirebaseMessaging.instance.setForegroundNotificationPresentationOptions(alert: true, badge: true, sound: true,); isFlutterLocalNotificationsInitialized = true; } void showFlutterNotification(RemoteMessage message) { RemoteNotification? notification = message.notification; AndroidNotification? android = message.notification?.android; if (notification != null && android != null && !kIsWeb) { print("Пришло ПУШ:"); print(notification.title); flutterLocalNotificationsPlugin.show( notification.hashCode, notification.title, notification.body, NotificationDetails( android: AndroidNotificationDetails( channel.id, channel.name, channelDescription: channel.description, icon: 'launch_background', ), ), ); } } late FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin; Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); // требуется для PUSH сервиса // инициализация PUSH уведомлений try { await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); } catch (e) {} FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler); await setupFlutterNotifications(); // получаем токен уведомлений FirebaseMessaging.instance.getToken().then((token) { print("Token: $token"); // Выплюнем токен в консольку }); runApp(MyApp()); } ... ... @override Widget build(BuildContext context) { String? _token; String? initialMessage; bool _resolved = false; FirebaseMessaging.instance.getInitialMessage().then( value) => () { _resolved = true; initialMessage = value?.data.toString(); }, ); FirebaseMessaging.onMessage.listen(showFlutterNotification); // показ PUSH уведомлений при открытом приложении FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) { print('A new onMessageOpenedApp event was published!'); }); .... .... |
С размерами блоков воFlutter относительно всё в порядке — очень помогает виджет Expanded. Некоторое же неудобство разработки как оказалось — это отсутствие в «из коробки» возможности указывать размер шрифтов в «адаптиве» под разные разрешения экрана.
Что делать? Решений множество. Ниже некоторые варианты:
Вариант 1:
Создать отдельный класс-обертку, через которую пропускать потом все размеры шрифтов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class ScaleSize { static double textScaleFactor(BuildContext context, {double maxTextScaleFactor = 2}) { final width = MediaQuery.of(context).size.width; double val = (width / 1400) * maxTextScaleFactor; return max(1, min(val, maxTextScaleFactor)); } } Text( intro.subtitle, style: Theme.of(context).textTheme.subtitle1, textAlign: TextAlign.center, textScaleFactor: ScaleSize.textScaleFactor(context), ), |
Вариант 2:
Использовать различную отрисовку виджетов в зависимости от размера экранов. Как-то типа:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
Widget build(BuildContext context) { final isSmall = MediaQuery.of(context).size.width < 500; return Provider.value( value: isSmall ? AdaptativeTheme( smallFontSize: 10, bigSpace: 20, smallSpace: 10, ) : AdaptativeTheme( smallFontSize: 20, bigSpace: 40, smallSpace: 12, ), child: Child(), ); } |
Вариант 3:
Использовать один из множества пакетов. Например Sizer. Тогда вся адаптация сведется к обёртыванию корневого виджета через виджет Sizer, и далее указание во всех нижележащих виджетах относительных размеров. Например так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
return Sizer( builder: (context, orientation, deviceType) { return Scaffold( ... ... child: Container( width: 48.sp, height: 48.sp, ... ... child: Text(ListEZS[index]["nameazs"],style: TextStyle(fontSize: 14.0.sp, color: Colors.black)), |