Когда дело доходит до создания красивых и привлекательных мобильных приложений с помощью 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:
-
Добавьте пакет в файл
pubspec.yaml:dependencies: flutter_native_splash: ^1.3.0 -
Запустите
flutter pub get, чтобы установить пакет. -
Создайте файл
flutter_native_splash.yamlв корне вашего проекта и определите желаемую конфигурацию заставки:image: assets/images/splash.png color: "42a5f5" -
Запустите
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 и получить свободу настройки экрана-заставки вашего приложения. Независимо от того, решите ли вы сделать нативную заставку прозрачной, использовать сторонние пакеты или создать собственный виджет заставки, теперь у вас есть инструменты для создания уникального и увлекательного процесса адаптации, который идеально соответствует бренду вашего приложения.