Архивы flutter

Пишем Тетрис на Flutter

06.07.2023 Павел Грибов Flutter

Дело было вечером, делать было нечего (с)..В качестве разминки решил в кои-то веки написать игру. Пришла на ум идея написать давнюю мечту — тетрис. В т.ч. использовать будем более ранние наработки по работе с Hive и Requets оформленные в виде отдельных классов.

Из интересного:

1) Для отображения стакана и фигур используем три массива:

LandMatrix — массив вида ширина/высота — фактически «стакан» с «приземленными» фигурами. Точка пересечения массива — цвет квадратика. Если пусто — значит в точке стакана ничего нет

MoveFig — массив движущейся по стакану фигуры. В момент совпадения низа фигуры с любой не пустой точкой стакана фигура переносится в «стакан»

ShadowRotareFig — вспомогательный массив, используемый для поворота фигуры. В момент когда фигуру необходимо повернуть, она переносится из MoveFig в этот массив, поворачивается, и переносится обратно в MoveFig. Создание отдельного массива для поворота было обусловлено способом хранения фигур — хранится не матрица, а просто массив текущих координат квадратиков из которых составлена фигура.

2) Отрисовка стакана происходит после того, как фигура перенесена в массив стакана. Причины переноса — касание дна стакана.

List <Widget> MyLandView(){
    int poz=0;
    return List<Widget>.generate(lh, (int index_h){
      return Row(
        children:
        List<Widget>.generate(lw, (int index_w){
          poz++;
          Color BoxColor=FigColors[99]??Colors.black;
          if (MovedFig.contains(poz)==true){
            BoxColor=FigColors[fcurrent]??Colors.black;
          };
          Coords crd=Poz2Coors(poz);
          // если в стакане что-то есть - рисуем
          if (LandMatrix[crd.y][crd.x]>0){  // если  клетка не пустая
            BoxColor=FigColors[100]??Colors.black;
          };
          if (LandMatrix[crd.y][crd.x]==101){  //
            BoxColor=FigColors[101]??Colors.black;
          };
          if (BoxColor==FigColors[100]){
            //определяем это верхний блок или под ним еще что есть?
            bool ground_top=false;
              Coords crd_tmp=Poz2Coors(poz-lw);
              print("Строчка: ${crd.y},${crd.x}");
              print("Строчка вниз: ${crd_tmp.y},${crd_tmp.x}");
              if (crd_tmp.y>0) {
                if (LandMatrix[crd_tmp.y][crd_tmp.x] >0) {
                  print("-- ниже  есть земля!");
                  ground_top = true;
                }
              }
            return
                Container(
                  color: BoxColor,
                  height: MediaQuery.of(context).size.height/lh,
                  width: MediaQuery.of(context).size.width/lw,
                  child:
                    Image.asset(
                        !ground_top?"lib/images/ground.png":"lib/images/ground_full.png",
                      height: 10,
                      width: 10,
                      fit: BoxFit.fill,
                    ),
                );
          } else {
            return
              Padding(
                  padding: EdgeInsets.all(1),
                  child:
                  Container(
                    color: BoxColor,
                    height: MediaQuery.of(context).size.height / lh - 2,
                    width: MediaQuery.of(context).size.width / lw - 2,
                    //child: Text("$poz")
                  )
              );
          };
        }),
      );
    });
  }

List <Widget> MyLandView(){

int poz=0;

return List<Widget>.generate(lh, (int index_h){

return Row(

children:

List<Widget>.generate(lw, (int index_w){

poz++;

Color BoxColor=FigColors[99]??Colors.black;

if (MovedFig.contains(poz)==true){

BoxColor=FigColors[fcurrent]??Colors.black;

};

Coords crd=Poz2Coors(poz);

// если в стакане что-то есть - рисуем

if (LandMatrix[crd.y][crd.x]>0){ // если клетка не пустая

BoxColor=FigColors[100]??Colors.black;

};

if (LandMatrix[crd.y][crd.x]==101){ //

BoxColor=FigColors[101]??Colors.black;

};

if (BoxColor==FigColors[100]){

//определяем это верхний блок или под ним еще что есть?

bool ground_top=false;

Coords crd_tmp=Poz2Coors(poz-lw);

print("Строчка: ${crd.y},${crd.x}");

print("Строчка вниз: ${crd_tmp.y},${crd_tmp.x}");

if (crd_tmp.y>0) {

if (LandMatrix[crd_tmp.y][crd_tmp.x] >0) {

print("-- ниже есть земля!");

ground_top = true;

}

return

Container(

color: BoxColor,

height: MediaQuery.of(context).size.height/lh,

width: MediaQuery.of(context).size.width/lw,

child:

Image.asset(

!ground_top?"lib/images/ground.png":"lib/images/ground_full.png",

height: 10,

width: 10,

fit: BoxFit.fill,

);

} else {

return

Padding(

padding: EdgeInsets.all(1),

child:

Container(

color: BoxColor,

height: MediaQuery.of(context).size.height / lh - 2,

width: MediaQuery.of(context).size.width / lw - 2,

//child: Text("$poz")

)

);

};

}),

);

});

}

3) При старте игры назначаем периодический таймер, при выполнении которого фигура движется на линию ниже. При движении выполняется проверка касания дна в стакане.

  void StartTimer(context){
    timer = Timer.periodic(Duration(seconds: 1), (Timer _) {
      DestroyFullLines();
      print("Сработал таймер..");
      MoveFigDown(context);
    });
  }
  // двигаем фигуру вниз
  void MoveFigDown(context){
      if (GameOver==true) {return;};
      bool move=true;
      // проверим,при следующем шаге, ни одна ли из точек не достигнет дна колодца при движении вниз?
      for (var i = 0; i < MovedFig.length; i++) {
        // проверка дна колодца
        if ((MovedFig[i] + lw)>lw*lh){
          move=false;
        };
        // проверка что наезд на другую фигуру
        Coords crd=Poz2Coors(MovedFig[i] + lw);
        if (MovedFig[i] + lw<=lw*lh) {
          if (LandMatrix[crd.y][crd.x] > 0) {
            move = false;
          };
        };
      };
      if (move==true) {
        for (var i = 0; i < MovedFig.length; i++) {
          MovedFig[i] = MovedFig[i] + lw;
        };
      };
      // если не можем двигаться вниз, то переносим фигуру в "стакан"
      if (move==false){
        print("-переносим фигуру в стакан");
        for (var i = 0; i < MovedFig.length; i++) {
          Coords crd=Poz2Coors(MovedFig[i]);
          LandMatrix[crd.y][crd.x]=1;
        };
        DestroyFullLines();
        // создаём новую фигуру
        FigureSelections();
      };
      setState(() {
        MovedFig=MovedFig;
      });
    print("Фигура двинулась вниз: ${MovedFig}");
      String audioasset = "lib/sounds/click.mp3";
      AssetsAudioPlayer.newPlayer().open(
          Audio(audioasset)
      );
  }

void StartTimer(context){

timer = Timer.periodic(Duration(seconds: 1), (Timer _) {

DestroyFullLines();

print("Сработал таймер..");

MoveFigDown(context);

});

}

// двигаем фигуру вниз

void MoveFigDown(context){

if (GameOver==true) {return;};

bool move=true;

// проверим,при следующем шаге, ни одна ли из точек не достигнет дна колодца при движении вниз?

for (var i = 0; i < MovedFig.length; i++) {

// проверка дна колодца

if ((MovedFig[i] + lw)>lw*lh){

move=false;

};

// проверка что наезд на другую фигуру

Coords crd=Poz2Coors(MovedFig[i] + lw);

if (MovedFig[i] + lw<=lw*lh) {

if (LandMatrix[crd.y][crd.x] > 0) {

move = false;

};

if (move==true) {

for (var i = 0; i < MovedFig.length; i++) {

MovedFig[i] = MovedFig[i] + lw;

};

// если не можем двигаться вниз, то переносим фигуру в "стакан"

if (move==false){

print("-переносим фигуру в стакан");

for (var i = 0; i < MovedFig.length; i++) {

Coords crd=Poz2Coors(MovedFig[i]);

LandMatrix[crd.y][crd.x]=1;

};

DestroyFullLines();

// создаём новую фигуру

FigureSelections();

};

setState(() {

MovedFig=MovedFig;

});

print("Фигура двинулась вниз: ${MovedFig}");

String audioasset = "lib/sounds/click.mp3";

AssetsAudioPlayer.newPlayer().open(

Audio(audioasset)

);

}

4) Поворот фигуры, как уже писал выше осуществляется переносом фигуры в матрицу, поворот матрицы и обратный перенос фигуры

  // поворачиваем блок
  void RotateFig(context){
    print("До поворота: ${MovedFig}");
    List <int> OldFig=List<int>.from(MovedFig); //запоминаем фигуру и положение до поворота

    // найдем минимальные координаты x и y до поворота
    Coords crd_before_rotare=GetStartXYFigure(MovedFig);
    print("min_x=${crd_before_rotare.x},min_y=${crd_before_rotare.y}");

    // передвинем фигуру в центр
    int center_x=4;
    int center_y=4;

    MovedFig=FigureMove(center_x,center_y,MovedFig);

    for (var i = 0; i < MovedFig.length; i++) {
      Coords crd=Poz2Coors(MovedFig[i]);
      int new_x=(crd.x * cos(3.1415926535897932/2) - crd.y * sin(3.1415926535897932/2)).round();
      int new_y=(crd.x * sin(3.1415926535897932/2) + crd.y * cos(3.1415926535897932/2)).round();
      MovedFig[i]=Coors2Poz(new_x,new_y);
      //print("x=${new_x},y=${new_y}");
    };
    MovedFig=FigureMove(crd_before_rotare.x-2,crd_before_rotare.y,MovedFig);

    print("После поворота: ${MovedFig}");
    // проверяем, а можно ли было поворачивать?
    if (MovedFig[0]==-1){
      MovedFig=OldFig;
    }
    // проверяем, а нет ли наложения элементов на то что уже в стакане?
    for (var i = 0; i < MovedFig.length; i++) {
      Coords crd=Poz2Coors(MovedFig[i] + lw);
      if (MovedFig[i] + lw<=lw*lh) {
        if (LandMatrix[crd.y][crd.x] > 0) {
          MovedFig=OldFig;
        };
      };
    };
  }

// поворачиваем блок

void RotateFig(context){

print("До поворота: ${MovedFig}");

List <int> OldFig=List<int>.from(MovedFig); //запоминаем фигуру и положение до поворота

// найдем минимальные координаты x и y до поворота

Coords crd_before_rotare=GetStartXYFigure(MovedFig);

print("min_x=${crd_before_rotare.x},min_y=${crd_before_rotare.y}");

// передвинем фигуру в центр

int center_x=4;

int center_y=4;

MovedFig=FigureMove(center_x,center_y,MovedFig);

for (var i = 0; i < MovedFig.length; i++) {

Coords crd=Poz2Coors(MovedFig[i]);

int new_x=(crd.x * cos(3.1415926535897932/2) - crd.y * sin(3.1415926535897932/2)).round();

int new_y=(crd.x * sin(3.1415926535897932/2) + crd.y * cos(3.1415926535897932/2)).round();

MovedFig[i]=Coors2Poz(new_x,new_y);

//print("x=${new_x},y=${new_y}");

};

MovedFig=FigureMove(crd_before_rotare.x-2,crd_before_rotare.y,MovedFig);

print("После поворота: ${MovedFig}");

// проверяем, а можно ли было поворачивать?

if (MovedFig[0]==-1){

MovedFig=OldFig;

}

// проверяем, а нет ли наложения элементов на то что уже в стакане?

for (var i = 0; i < MovedFig.length; i++) {

Coords crd=Poz2Coors(MovedFig[i] + lw);

if (MovedFig[i] + lw<=lw*lh) {

if (LandMatrix[crd.y][crd.x] > 0) {

MovedFig=OldFig;

};

}

Исходный код игры можно скачать тут

Оставить комментарий dart, flutter, tetris

Flutter: динамическое количество строк / колонок в виджетах

14.04.2023 Павел Грибов Flutter

Для динамического построения виджетов удобно использовать List.generate, который в качестве параметра принимает количество элементов, а на вход функции-кэлбека — текущий элемент перебора. Использовать можно например как-то так:

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")
                )
            );
        }),
      );
    });
  }

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")

)

);

}),

);

});

}

Оставить комментарий dynamic, flutter, wigets

Flutter: использование тем

11.04.2023 Павел Грибов Flutter

Очень часто в коде тех, кто только начал свой путь в разработке на Flutter встречаются бесконечные однотипные портянки вроде:

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)),
    ),
  );

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, возможно указать «Тему», как то так:

import 'package:me_flutter/inc/theme.dart' as me_theme;
MaterialApp(
  builder: EasyLoading.<em>init</em>(),
  title: 'Приколись!',
  debugShowCheckedModeBanner: false,
  theme: me_theme.createMeTheme(),
...

import 'package:me_flutter/inc/theme.dart' as me_theme;

MaterialApp(

builder: EasyLoading.init(),

title: 'Приколись!',

debugShowCheckedModeBanner: false,

theme: me_theme.createMeTheme(),

...

И оформим отдельный класс с «Темой»:

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;           // цвет текста в трее вверху
}

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; // цвет текста в трее вверху

}

И далее во всех вложенных виджетах, автоматически будут применятся данные цвета. Так-же их можно указать принудительно, например так:

color: Theme.of(context).primaryColor
..
color: Theme.of(context).colorScheme.TrayFontColor //своё собственное свойство

color: Theme.of(context).primaryColor

color: Theme.of(context).colorScheme.TrayFontColor //своё собственное свойство

Оставить комментарий flutter, theme, использование тем

Flutter: Push уведомления firebase

07.04.2023 Павел Грибов Flutter

С PUSH уведомлениями, во Flutter, вроде бы всё и просто, но вот я провозился три дня, чтобы заставить приложение стабильно их показывать. Большая часть проблем вытекает из-за постоянно развивающейся кодовой базы Flutter, в результате чего большая часть примеров в сети — уже не рабочие.

Проблема №1

Пакет flutter_webview_plugin_ios_android, который оказался не совместим с вызовом FirebaseMessaging.onBackgroundMessage, после инициализации которого, перестали работать кэлбеки webview на переходы на другие url (GitHub Issue).

Выход: не бросаться на простой в использовании пакет, а использовать максимально популярный webview_flutter. Хотя и оный у меня заработал, только в самой последней версии — до этого были проблемы с отображением некоторых сайтов с не понятными SSL сертификатами.

Проблема №2

Вызов ensureInitialized:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
...  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
...

Future<void> main() async {

WidgetsFlutterBinding.ensureInitialized();

await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

... FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

...

который у «всех работает а у меня не работает». И вызывает ошибку

Unhandled Exception: [core/duplicate-app] A Firebase App named "[DEFAULT]" already exists

1	Unhandled Exception: [core/duplicate-app] A Firebase App named "[DEFAULT]" already exists

Пришлось обернуть в:

  try {
    await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  } catch (e) {}

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:

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>

dependencies {

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'

}

\android\build.gradle:

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>

buildscript {

ext.kotlin_version = '1.6.10'

repositories {

google()

mavenCentral()

}

dependencies {

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'

}

}

Итак, вот текущая минимальная обвязка для работы с PUSH уведомлениями получилась:

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!');
    });
....
....

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!');

});

....

Оставить комментарий firebase, flutter, push

Flutter: адаптивные шрифты и размеры

06.04.2023 Павел Грибов Flutter

С размерами блоков воFlutter относительно всё в порядке — очень помогает виджет Expanded. Некоторое же неудобство разработки как оказалось — это отсутствие в «из коробки» возможности указывать размер шрифтов в «адаптиве» под разные разрешения экрана.

Что делать? Решений множество. Ниже некоторые варианты:

Вариант 1:

Создать отдельный класс-обертку, через которую пропускать потом все размеры шрифтов:

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),
   ),

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:

Использовать различную отрисовку виджетов в зависимости от размера экранов. Как-то типа:

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(),

  );

}

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, и далее указание во всех нижележащих виджетах относительных размеров. Например так:

   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)),

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)),

Оставить комментарий flutter, адаптивный размер

1 2 3 … 9 »

Март 2025
Пн	Вт	Ср	Чт	Пт	Сб	Вс
					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