Попрощайтесь со встроенным заставкой во Flutter: раскрываем возможности настройки!

Когда дело доходит до создания красивых и привлекательных мобильных приложений с помощью Flutter, первое, с чем сталкиваются пользователи, — это встроенный экран-заставка по умолчанию. Хотя встроенный экран-заставка выполняет свою функцию, он может не соответствовать брендингу и дизайну вашего приложения. Не бойтесь: в этой статье вы узнаете о различных методах удаления встроенного экрана-заставки во Flutter и замены его индивидуальным решением, которое идеально соответствует эстетике вашего приложения.

Метод 1. Использование прозрачной встроенной заставки
Один из способов удалить встроенную заставку — создать прозрачную встроенную заставку, которая плавно переходит в пользовательский интерфейс вашего приложения. Этот метод включает в себя изменение собственного кода для каждой платформы (Android и iOS), чтобы сделать заставку прозрачной. Вот фрагмент кода для Android:

// MainActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        getWindow().setStatusBarColor(Color.TRANSPARENT);
        getWindow().getDecorView().setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
    }
// Rest of your code...
}

Для iOS можно добиться аналогичного эффекта, изменив файл LaunchScreen.storyboardи установив прозрачный цвет фона.

Метод 2: использование сторонних пакетов
Богатая экосистема Flutter предлагает несколько сторонних пакетов, которые упрощают процесс настройки заставки. Один из популярных пакетов — flutter_native_splash. Он позволяет заменить встроенный экран-заставку виджетом Flutter, предоставляя вам полный контроль над дизайном и анимацией. Вот пример использования flutter_native_splash:

  1. Добавьте пакет в файл pubspec.yaml:

    dependencies:
    flutter_native_splash: ^1.3.0
  2. Запустите flutter pub get, чтобы установить пакет.

  3. Создайте файл flutter_native_splash.yamlв корне вашего проекта и определите желаемую конфигурацию заставки:

    image: assets/images/splash.png
    color: "42a5f5"
  4. Запустите flutter pub run flutter_native_splash:create, чтобы сгенерировать необходимые файлы для конкретной платформы.

Метод 3: создание собственного виджета заставки
Если вы предпочитаете более детальный контроль над заставкой, вы можете создать собственный виджет заставки в своем приложении Flutter. Этот подход позволяет вам проектировать и анимировать заставку, используя мощную инфраструктуру пользовательского интерфейса Flutter. Вот простой пример:

class CustomSplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white, // Customize the background color
      body: Center(
        child: Text(
          'My Awesome App',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: CustomSplashScreen(), // Set your custom splash screen as the home widget
    // Rest of your code...
  ));
}

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