Flutter Splash screens for dark and light mode without using packages.

-


Flutter Splash screens for dark and light mode without using packages.

  Flutter Tutorials

To support the phone system’s light/dark mode, You have to add this line of code in the Materialapp widget of main.dart file. It changes your App UI not splash Screen theme based on the system light/dark mode. 

main.dart
darkTheme: ThemeData(brightness: Brightness.dark,),

android/app/src/main/res/mipmap-hdpi

Go to your Flutter project, past your image in the
android/app/src/main/res/mipmap-hdpi folder.

If your Flutter application is created using
an older version of the Android then replace these
codes in android/app/src/main/res/drawable
/launch_background.xml
otherwise replace codes in
android/app/src/main/res/drawable-v21
/launch_background.xml

android/app/src/main/res/drawable-v21/launch_background.xml
<?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:state_checked="true"
          android:drawable="@color/lightColor" />
   <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/screen_splash" />
    </item>
</layer-list>

Now in android/app/src/main/res/values/ make a file name it colors.xml .

and inside it paste these codes.

android/app/src/main/res/values/colors.xml
<resources>
    <color name="darkColor">#000000</color>
    <color name="lightColor">#ffffff</color>
</resources>

Now in android/app/src/main/res/
create a new folder called drawable-night.
And then inside it create a new file called
launch_background.xml and then paste the following code inside it.

android/app/src/main/res/drawable-night/launch_background.xml
<?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:state_checked="true"
          android:drawable="@color/darkColor" />
    <item>
        <bitmap
                android:gravity="center"
                android:src="@mipmap/screen_splash" />
    </item>
</layer-list>

Now we added Splash Screen for Dark and light mode successfully!

Popular posts from this blog

In-App Purchase with null safety in Flutter 2.5.

-
Image
  toobay   Flutter Tutorials In this guide, we will explain how to Implement Consumables Non-Consumables and Subscriptions using the in_app_purchase plugin in your flutter App. 1- Add these permissions to android/app/src/main/AndroidManifest.xml <uses-permission android :name ="com.android.vending.BILLING" /> <uses-permission android :name ="android.permission.INTERNET" /> 2- Make sure you are using your own product IDs. 3- Add these to your package’s pubspec.yaml file: in_app_purchase : ^1.0.9 provider : ^6.0.1 shared_preferences : ^2.0.8 NOTE :  If you want to use in_app_purchase 2.0.0 version or above follow the below instructions. # Rename in_app_purchase_ios to in_app_purchase_storekit. # Rename InAppPurchaseIosPlatform to InAppPurchaseStoreKitPlatform. # Rename InAppPurchaseIosPlatformAddition to InAppPurchaseStoreKitPlatformAddition. This is our file: main.dart import 'package:flutter/foundation.dart' ; import 'package:flutter/material...
Read more

How to add In-App Purchase subscription in Flutter.

-
Image
How to add In-App Purchase subscription in Flutter.   toobay   Flutter Tutorials In this tutorial we will teach you how to implement subscription in your app. For this we will use the in app purchases package. In addition we will have to create a product ID for subscription in our Google Play Console which we will use in our project. 1- Add these permissions to android/app/src/main/AndroidManifest.xml 1 2 <uses-permission android:name="com.android.vending.BILLING" />    <uses-permission android:name="android.permission.INTERNET"/> 2- Add this line in the dependencies block android/app/build.gradle inside dependencies block dependencies { implementation 'com.android.billingclient:billing:3.0.2' } 3- Make sure you are using your own product ID  4- Add this to your package’s pubspec.yaml file: 1 in_app_purchase: ^0.5.2 This is our file: main.dart 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ...
Read more

Flutter Native Ad Templates Implementation

-
Image
The native ad is that matches our website theme where we can change the color and font according to our website. Here we will implement it with templates which you can also use in your application. Add the Google Mobile Ads plugin as a dependency  to the  pubspec.yaml  file. /pubspec.yaml google_mobile_ads : ^1.0.1 AdMob app ID Add the Highlighted  lines to the  AndroidManifest.xml  file with your own  AdMob app ID. android/app/src/main/AndroidManifest.xml <manifest>     ...     <application>        ...         <meta-data             android:name = "com.google.android.gms.ads.APPLICATION_ID"             android:value = " ca-app-pub-3940256099942544~3347511713 " />     </application> </manifest> Change minSdkVersion to 19 android/app/build.gradle defaultConfig { // TODO: Specify your own uni...
Read more