My goal is to show a splash screen while app initializes.
So I used this package : flutter_native_splash: 0.1.9
And as per flutter_native_splash documentation on pub.dev, I created this file as required:
flutter_native_splash:
image: assets/images/splash.png
color: "#ffffff"
fill: true
# android_disable_fullscreen: true
and in terminal i ran this command:
flutter pub run flutter_native_splash:create
the package generated me the images in drawable-hdpi, drawable-mdpi, drawable-xdpi, drawable-xxdpi, drawable-xxxhdpi
now i am able to use this splash screen successfully but the problem is that the generated image is very blurry on physical device when i test...
is there any guidelines on how to draw this image from the start?
its just a simple black image with centered text...lets say for examle "Splash Screen"
i use figma for drawing and i export the file as SVG.
so my questions are:
should i specify width and height for the canvas that i draw inside?!
should i specify a fixed font size for the text...if so...suppose that there are two texts...centered one...and a subtitle beneath it.
i manipulated the font size many times but every time the generated image is blurry...
any help would be much appreciated.
Edit:
this is screenshot from figma while i am drawing the image:
figma screenshot
1.) Make a splash screen background image of size 1080*1920, add it into the drawable folder (android/app/src/main/res/drawable).
2.) Add below code into your android's styles.xml
<resources>
<style name="LaunchTheme" parent="#android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">#drawable/splash</item>
</style>
<style name="NormalTheme" parent="#android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">#drawable/splash</item>
</style>
</resources>
3.) Add below code in AndroidManifest.xml inside tag
android:name="io.flutter.app.FlutterApplication"
4.) Add meta-data in your first activity.
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="#style/NormalTheme" />
Related
I am using html-editor-enhanced to compose.
I'm having problems synchronizing the cursor colors with the app's colors. when I focus on Editor, the default color of the cusor is green. while my app has a different color. How do I change the color of this cursor?
Hope to get help from the community.
I have found the answer to my question.
In android native. > Res>value> style.xml
add this line
<item name="android:colorControlActivated">#2F93EF</item>
Full code
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
<style name="LaunchTheme" parent="#android:style/Theme.Light.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">#drawable/launch_background</item>
</style>
<!-- Theme applied to the Android Window as soon as the process has started.
This theme determines the color of the Android Window while your
Flutter UI initializes, as well as behind your Flutter UI while its
running.
This Theme is only used starting with V2 of Flutter's Android embedding. -->
<style name="NormalTheme" parent="#android:style/Theme.Light.NoTitleBar">
<item name="android:windowBackground">?android:colorBackground</item>
<item name="android:colorControlActivated">#2F93EF</item>
</style>
</resources>
I am having trouble removing the white screen that appears before my splash screen. I saw many videos and followed their instructions but still, that white screen don't go away. I am a beginner so I don't have much knowledge to solve it, kindly help!
I am using initState to show the splash screen. I have also put my splash image inside the drawable folder and this is how my launch_background.xml file looks like:
<?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="#android:color/black" />
<!-- You can insert your own image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="#drawable/splash" />
</item>
</layer-list>
Okay, so my problem was solved when I added my splash in styles.xml file:
<item name="android:windowBackground">#drawable/splash</item>
When I swipe from left to right, I don't want it to exit the wearos application (in flutter/wearos). What can I do for this?
actually, this path writes for kotlin and java in androiddevelopers but l can't see for flutter. so l wrote it for flutter. almost everything is same.
you should open styles.xml(android/app/src/main/res/values/styles.xml).Then you should write false this in Launch theme.
so it should looks like this
<style name="LaunchTheme" parent="#android:style/Theme.Light.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">#drawable/launch_background</item>
<item name="android:windowSwipeToDismiss">false</item>
</style>
I have set an image in launch_background.xml file for splash screen. it takes around 5sec to switch to next page. how to reduce display time.
<?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="#android:color/white" />-->
<!-- You can insert your own image assets here -->
<item>
<bitmap
android:gravity="center"
android:src="#mipmap/splash_screen" />
</item>
</layer-list>
Please suggest how to reduce display time?
I think you are running app in debug mode so it will take time. I will suggest you run the app in release mode. by running this command in terminal.
flutter run --release
By default, flutter run compiles to debug mode. Your IDE supports this mode. Android Studio, for example, provides a Run > Debug… menu option, as well as a green bug icon overlayed with a small triangle on the project page.
Read more about Flutter's build modes here
Is it possible to change the color of the radio button in the Android spinner widget. By default it displays the green color for the radio button.
I need to change it to some other color, is it possible, and how?
I know this is an old question now, but here goes...
You will need to create a custom Theme and apply it to the Activity with your spinner.
First, you need to create images for the checked/unchecked states of the 'new' radio, you could just pull the given images btn_radio_on.png and btn_radio_off.png from the sdk's res/drawable-* folder(s). Edit them to look how you want (such as changing color or whatever) and save off to your project.
Next, create a new xml file in your res/values folder, and add the following:
<resources>
<style name="CustomSpinnerRadioTheme" parent="#android:style/Theme">
<item name="android:spinnerDropDownItemStyle">#style/EditedRadio</item>
</style>
<style name="EditedRadio" parent="#android:style/Widget.DropDownItem.Spinner">
<item name="android:checkMark">#drawable/edited_radio</item>
</style>
</resources>
Then, create another xml file in res/drawable named edited_radio.xml, and it should contain the following:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/btn_radio_off" />
<item android:state_checked="true" android:drawable="#drawable/btn_radio_on" />
</selector>
just be sure to reference your edited images for the checked states. Then you just have to apply the CustomSpinnerRadioTheme to your Activity and run!
A good resource I found is Applying Styles and Themes especially the additional reference on Android Styles (styles.xml) and Android Themes (themes.xml)