CODEWITHSUNDEEP
androidflutterandroid-studiosplash-screen
Prodromos Sarakinou
Prodromos Sarakinou

Reputation: 921

Flutter(Android) splash screen with two logos

I would like to create a splash screen for an application created with flutter. I already have tried the flutter_native_splash package, but the problem is that I need two logos in the splash.

The first one should centered, and it will be the original logo of the application, while the second one will be a Text something like Powered by someone.

You can see an example here:

enter image description here

I know that I can create the whole Image as splash screen but I don't see it as the most proper way to do it.

Are there any ideas?

Upvotes: 1

Views: 3193

Answers (3)

Prodromos Sarakinou
Prodromos Sarakinou

Reputation: 921

Finally,

I saw that the flutter_native_splash package added a feature that gives you a way to add a branding in your launch theme.

You can follow their documentation to achieve the exact same result as the uploaded screenshot in the question.

Their steps:

  1. Add a flutter_native_splash.yaml file under your app's folder

  2. Add the logo and the branding(Powered by) images inside your assets

  3. Add the following code inside your flutter_native_splash.yaml file

flutter_native_splash:
  color: "#ffffff"
  image: assets/logo.png
  branding: assets/branding.png

  android_12:
    image: assets/logo.png
    icon_background_color: "#ffffff"

  web: false
  1. You can also follower their whole example and to add a splash screen for your dark theme

Upvotes: 3

user18309290
user18309290

Reputation: 8340

Splash screen is naturally implemented in native side, so the modifications will be done there too.

iOS / Apple

All apps submitted to the Apple App Store must use an Xcode storyboard to provide the app’s launch screen.

Android

The default Flutter project template includes a definition of a launch theme and a launch background. You can customize this by editing xml.

See Adding a splash screen to your mobile app for details.

Upvotes: 0

Prashant Vaddoriya
Prashant Vaddoriya

Reputation: 615

Try this

Stack(
      children: [
        Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: //background image,
        ),
        Align(
          alignment: Alignment.center,
          child: //first logo,
        ),
        Positioned(
          left: 0,
          right: 0,
          bottom: 50.0,
          child: //second logo,
        )
      ],
    )

Upvotes: 1

Related Questions