Пользовательские файлы

Мы позволяем вам добавлять пользовательский код непосредственно в файл main.dart вашего приложения. Это означает, что вы можете легко реализовывать определенные функциональности и настраивать свое приложение в соответствии с вашими требованиями, не загружая всю структуру проекта и не изменяя файл вручную.

По умолчанию файл, который вы хотите изменить, находится в режиме "только для чтения". Однако, используя наш редактор, вы можете добавить сниппет кода в форме Пользовательских действий.

Обратите внимание

Вы можете добавлять только пользовательские действия без аргументов (включая BuildContext).

Редактировать main.dart

Файл main.dart является ключевым в вашем проекте, так как он служит точкой входа для приложения. В этом файле содержится функция main(), которая отвечает за запуск приложения путем выполнения кода, который создает пользовательский интерфейс и инициализирует необходимые компоненты.

Вы можете изменить файл main.dart, чтобы включить что-то в функцию main(), чего мы пока не поддерживаем. Например, инициализацию сторонних плагинов или библиотек и настройку конфигураций на уровне системы, такие как изменение цвета статус-бара или ориентации.

Давайте рассмотрим пример того, как вы можете добавить код в файл main.dart, чтобы изменить цвет статус-бара в мобильном приложении. Вот как это выглядит:

Изменение цвета статус-бара для мобильного устройства

Для этого необходимо отредактировать файл main.dart, следуя указанным ниже шагам:

1. Создайте Пользовательское действие для кода, который вы хотите включить в файл main.dart. Например, вот код в пользовательском действии с именем 'setStatusbarColor'.

// Автоматический импорт FlutterFlow
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Импорт других пользовательских действий
import '/flutter_flow/custom_functions.dart'; // Импорт пользовательских функций
import 'package:flutter/material.dart';
// Начало пользовательского кода действия
// НЕ УДАЛЯЙТЕ ИЛИ НЕ МЕНЯЙТЕ КОД ВЫШЕ!

import 'package:flutter/services.dart';

Future setStatusbarColor() async {
  // Добавьте свой код функции здесь!

  // Установка цвета статус-бара
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.redAccent, // <-- здесь
      statusBarIconBrightness:
          Brightness.dark, //<-- Для Android здесь (темные иконки)
      statusBarBrightness: Brightness.light, //<-- Для iOS здесь (темные иконки)
    ),
  );
}

1. Теперь нажмите на Пользовательские функции в Меню навигации и откройте Пользовательские файлы > main.dart.
2. Определите, куда поместить код (т.е. Начальное действие или Финальное действие), нажмите кнопку + и выберите пользовательское действие.
3. Нажмите Сохранить.

Дополнительные примеры

Давайте рассмотрим еще несколько примеров добавления кода в файл main.dart, чтобы укрепить понимание и использовать его в реальных сценариях.

Пример 1: Закрепление ориентации устройства

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

Чтобы установить ориентацию устройства только в альбомном режиме, создайте пользовательское действие с следующим кодом и добавьте его в файл main.dart.

// Автоматический импорт FlutterFlow
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Импорт других пользовательских действий
import '/flutter_flow/custom_functions.dart'; // Импорт пользовательских функций
import 'package:flutter/material.dart';
// Начало пользовательского кода действия
// НЕ УДАЛЯЙТЕ ИЛИ НЕ МЕНЯЙТЕ КОД ВЫШЕ!

import 'package:flutter/services.dart';

Future setLandscapeMode() async {
  // Добавьте свой код функции здесь!
  await SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
}

Изменение файла main.dart для закрепления ориентации устройства

Пример 2: Получение обратного вызова жизненного цикла приложения

Если вы хотите гарантировать, что ваше приложение правильно управляет своим жизненным циклом и обрабатывает необходимые действия при переходе между различными состояниями, такими как 'возобновлено' и 'приостановлено', вы можете добавить AppLifecycleObserver в файл main.dart.

Для этого создайте пользовательское действие с следующим кодом и добавьте его в файл main.dart.

// Автоматический импорт FlutterFlow
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Импорт других пользовательских действий
import '/flutter_flow/custom_functions.dart'; // Импорт пользовательских функций
import 'package:flutter/material.dart';
// Начало пользовательского кода действия
// НЕ УДАЛЯЙТЕ ИЛИ НЕ МЕНЯЙТЕ КОД ВЫШЕ!

Future onAppBackground() async {
// Добавьте свой код функции здесь!
   WidgetsBinding.instance.addObserver(AppLifecycleObserver());
}

class AppLifecycleObserver with WidgetsBindingObserver {
@override
   void didChangeAppLifecycleState(AppLifecycleState state) {
      if (state == AppLifecycleState.resumed) {
// Выполнить что-то при восстановлении приложения
         print('Приложение на переднем плане');
      } else if (state == AppLifecycleState.paused) {
// Выполнить что-то при приостановке приложения
         print('Приложение на заднем плане');
      }
   }
}

Изменение файла main.dart для получения обратного вызова жизненного цикла приложения