![]() ![]() Looking at the finished animation at the beginning of this article, we can see that the letter “C” becomes smaller, unveiling the rest of the logo shortly after followed by a short animation of food falling into a bowl. So how do we tie our newly created splash screen into the rest of our launch screen? Tying the launch screen into our splash screen However, it will abruptly change to the app’s opening screen. With this code implemented, the app should open with the image we created. Now, let’s generate all our cross-platform launch screens based on this image by running the following commands at the root of our project: flutter pub getįlutter pub run flutter_native_splash:create ![]() This is because the launch screen color doesn’t contain an alpha channel and has no transparency, and the leading 0xFF defines the transparency of the color. The color here is exactly the same as what we got from the color picker tool in GIMP, meaning there is no 0xFF prefix. To do this, open pubspec.yaml and add the following lines: flutter_native_splash: Then, we must tell flutter_native_splash what image and background color to use for the rest of the available space. Save the opener image at assets/newlogo.png. So, if the color is 9ae79a, the Flutter equivalent is Color(0xFF9ae79a).įirst up, add the flutter_native_splash package to the project, which lets us create native launch screens for Android, iOS, and the web. Note the colors’ hex code by using the hex code, you can add this exact color in Flutter by prefixing the code with 0xFF. You can also use the eyedropper tool to select specific colors. ![]() If you’re pursuing a similar concept in your app, you can (and should) use Google Fonts to find the best font for your app, as there is a google_fonts package for Flutter so you can easily use their fonts in Flutter apps.Īfter choosing a font, load it into the image editor, and play around with colors until you have your desired palette for the font and background color. In our case, we’ll just use the letter “C” with a green background. To create an image that displays immediately after opening the app, we can use a graphics editor tool like GIMP to create a 512×512 image for our opener. Creating the opening splash screen in Flutter Let’s see how we can create these elements.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |