1

How can I add a splash screen that contains an image and text widget to this pre-existing project?

import 'package:flutter/material.dart'; import 'package:Travel/screens/home_screen.dart';

void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Safiri', debugShowCheckedModeBanner : false, theme: ThemeData( primaryColor: Color(0xFF3EBACE), accentColor: Color(0xFFD8ECF1), scaffoldBackgroundColor: Color(0xFFF3F5F7), visualDensity: VisualDensity.adaptivePlatformDensity, ), home: HomeScreen(), ); } } 

1 Answer 1

2

On Android you can just change the android manifest to add a splash screen Android > app > src > main > AndroidMainfets.xml

<meta-data android:name="io.flutter.embedding.android.SplashScreenDrawable" android:resource="@drawable/launch_background" /> <!-- Theme to apply as soon as Flutter begins rendering frames --> 

then you create a file launch_background (I think it exists when you create a flutter project the first time) in Android > app > src > main > res > drawable > launch_background.xml

And it should look like this

<?xml version="1.0" encoding="utf-8"?> <!-- Modify this file to customize your launch splash screen --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/red" /> <!-- You can insert your own image assets here --> <item> <bitmap android:gravity="center" android:src="@drawable/splash" /> </item> <item android:bottom="25dp"> <bitmap android:gravity="center" android:src="@drawable/myText" /> </item> </layer-list> 

Where splash is an image in your drawable folders (hdpi, mdpi, etc) or you can change it to @mipmap/ic_launcher if you want to use the same image as your launcher. The @color/red is created in android/app/src/main/res/values/colors.xml where you can define all the colors you want to use as HEX

<?xml version="1.0" encoding="utf-8"?> <resources> <color name="red">#F44336</color> <color name="white">#FFFFFF</color> <color name="yellow">#FFFF00</color> <color name="blueGrey">#37474F</color> <color name="NightBlue">#233446</color> <color name="grey">#212121</color> <color name="dark">#000000</color> </resources> 

For the text I believe there is no normal way to add text to splash screen, so maybe just create an imagge with a text and do the same as the icon @drawable/myText

For more information about splash screen in flutter check Flutter Splash Screen

Sign up to request clarification or add additional context in comments.

2 Comments

Thank you that solved the problem. However I was not able to resize images I added. Images displayed on the splash screen were overly large.
Did you make multiple folders and sizes of that images to support different dpi? developer.android.com/training/multiscreen/screendensities

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.