DEV Community: kamal bunkar

How to Remove White Splash Screen from Flutter App?

kamal bunkar — Thu, 14 Oct 2021 08:03:00 +0000

Flutter App by Default shows a white screen on app startup. I know you want a custom splash screen on the app start. That’s why I am writing this article to help you out with this problem.
When you work on flutter, the very first thing you will notice is the White Screen on app startup. Flutter is best for app development, app performance and cross-platform development. But by default flutter splash screen background colour is white. The white splash screen will be shown to the user for at least two seconds. I am sure that you don’t want to see that white screen on app startup. So how to remove default splash screen in flutter? You can easily fix the white splash screen on the flutter app. If you will look for the solution to this problem in Flutter & dart only, So you will not find anything. Actual solution lias on native android & iOS development. So you will to just use the same tactic on flutter as well.
Checkout — kamal bunkar to know more about me. Read the Complete Article Here. You can watch it on Youtube as well.
For Android App
If you are a native android app developer, then you definitely know that to show any custom splash screen on app startup, add the splash screen image inside the drawable folder. If you will look into the flutter project & android folder.
app -> src -> main -> res
Inside the drawable folder, you will find launch_background.xml file. Here you can choose from two options. Both are working fine, it is just a matter of writing the code.
Option 1) Edit this launch_background.xml by adding a new item and set the splash screen image as an item value(see below).
<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/custom_color_here" />  <item> <bitmap android:gravity="center" android:src="@drawable/splash_screen" /> </item> </layer-list>
That’s it …… Super Easy
Option 2) — Another way is — don’t make changes on launch_background.xml, Just replace the reference of the launch_background.xml file with the new splash screen file that you want to display on the app startup. I am assuming you already added a new splash screen image into the drawable folder. Now open the AndroidManifest.xml file & look for the meta tag android:name=”io.flutter.embedding.android.SplashScreenDrawable” Just replace the launch_background name with your splash screen image name. ( change meta tag like below)
<meta-data android:name="io.flutter.embedding.android.SplashScreenDrawable" android:resource="@drawable/splashscreen" />
Go inside res –> values folder and here also replace the launch_background name with your splash screen image name. Do this action on both folder values and values-night.
Well Done … Run the Flutter Project on Android
For iOS app
Open flutter project on Xcode for Adding splash screen to flutter ios app. To open the iOS module on Xcode, open android studio and on the top menu select tools. Go to flutter –> open ios module on Xcode.
On Xcode window, Click on Runner-> Runner -> Assets.xcassets folder. Here you can see LaunchImage paste your splash screen image with all three different dimensions in this folder.

Open LaunchScreen.storyboard
Again on the left side menu just below the Assets.xcassets folder, you will see LaunchScreen.Storyboard. Click on view controller scene -> view controller -> view. Note: — select (click on ) view only don’t click on LaunchImage. You already paste the new splash screen in the LaunchImage folder in the previous step. So you will see the same new image here in this window. When you select (click on ) view then on the right side window you can see options to change view settings like content mode, background, alpha etc. change the background colour as you want and set content mode to scale to fill.
Adjust Splash Screen
You can adjust the splash screen position, size & background colour on the same window. Just click on launchImage OR select the image on the preview window. You can resize the image and can adjust the image position. On the Right side window, you can make another setting as well.
iOS App Splash Screen is Ready.
Now flutter white splash screen problem has been resolved successfully for both android and iOS. You can change the flutter splash screen background colour as per your requirements.

You can also watch the video tutorial on my channel — https://www.youtube.com/channel/UC0tb4vuqPimSCWdnJailrTw
Learn Complete Flutter App Development — https://www.dripcoding.com/best-flutter-online-course/
Tweeter — https://twitter.com/kamal_bunkar
Facebook — https://www.facebook.com/dripcoding
Linkedin — https://www.linkedin.com/in/kamal-bunkar/
Telegram — t.me/dricoding
Instagram — https://www.instagram.com/the_kamal_bunkar/
If you have any doubts, Feel Free to contact us.

Flutter Open WhatsApp & send Text Message to Specific WhatsApp

kamal bunkar — Sun, 11 Jul 2021 13:59:13 +0000

In Flutter Open Whatsapp and send text message is very easy. You can do it without using Flutter Share Plugin. If You want to launch Whatsapp application from Flutter code with predefine text message then you should follow this tutorial How Flutter Open WhatsApp And Send Text Message. You can dynamically change the WhatsApp number as well. Just get the working WhatsApp number from server api call and use it on flutter code given below as dynamic variable.
This Flutter Code is working on Both Android & iPhone. So I will suggest you to run this code on Real Mobile phone not on emulator. WhatsApp Must installed on your mobile phone. Otherwise you will get an error “whatsapp is not installed”.
Create a button
I am going to Create a simple text button in Stateful widget and on Button Click whatsapp app will be open. If you have confusion about stateless and stateful widget, so Please read my article. To make text as clickable widget, wrap Text widget with a GestureDetection Widget. Once use will click on button, we will call a function name as “openwhatsapp()“. You can choose other name as well. Below is the code for build method. You can follow this tutorial How Flutter Open WhatsApp And Send Text Message for complete code.


@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: GestureDetector(
        onTap: (){
          openwhatsapp();
        },
        child: Container(
          padding: EdgeInsets.all(40),
          child: Text(" contact US"),
        ),
      ),

    ),
  );
}

Create Function
Now we need to write code in openwhatsapp function. We need to write separate code for android and iphone. The only difference is on URL string only , rest of the code is same. Below is the code for open whatsapp and send text predefine text message.


openwhatsapp() async{
  var whatsapp ="+919144040888";
  var whatsappURl_android = "whatsapp://send?phone="+whatsapp+"&text=hello";
  var whatappURL_ios ="https://wa.me/$whatsapp?text=${Uri.parse("hello")}";
  if(Platform.isIOS){
    // for iOS phone only
    if( await canLaunch(whatappURL_ios)){
       await launch(whatappURL_ios, forceSafariVC: false);
    }else{
      ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: new Text("whatsapp no installed")));

    }

  }else{
    // android , web
    if( await canLaunch(whatsappURl_android)){
      await launch(whatsappURl_android);
    }else{
      ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: new Text("whatsapp no installed")));

    }


  }

}

Now run the code on real mobile phone. How Flutter Open WhatsApp And Send Text Message.
If you have any questions please feel free to contact me at www.dripcoding.com

How to Convert JSON into Dart Class

kamal bunkar — Tue, 06 Jul 2021 08:23:04 +0000

After a lot of Research I find a Amazing Tool which can save my 40 Minutes to convert JSON into Dart class manually. Here is one Online Tool JSON to Dart Convert which can convert json response into dart class on button click. It is really very simple to use.
I am Getting JSON response from the Server. The JSON response is very complex. I want to access the value of "min" and "max" inside the "RIFUSD" List. Below is the JSON response which I am getting from server.


{
  "RIFUSD": [
    {
      "timestamp": "2021-02-13T16:00:00.000Z",
      "open": "0.3257370",
      "close": "0.3257370",
      "min": "0.3257370",
      "max": "0.3257370",
      "volume": "49",
      "volumeQuote": "15.9611130"
    },
    {
      "timestamp": "2021-02-13T12:00:00.000Z",
      "open": "0.3015120",
      "close": "0.3216128",
      "min": "0.3015120",
      "max": "0.3216768",
      "volume": "4079",
      "volumeQuote": "1298.0319504"
    }
  ],
  "BERRYUSD": [
    {
      "timestamp": "2021-02-13T04:00:00.000Z",
      "open": "0.00061800",
      "close": "0.00061780",
      "min": "0.00061000",
      "max": "0.00071783",
      "volume": "10460",
      "volumeQuote": "6.89477840"
    },
    {
      "timestamp": "2021-02-12T20:00:00.000Z",
      "open": "0.00060489",
      "close": "0.00061800",
      "min": "0.00048829",
      "max": "0.00061800",
      "volume": "466690",
      "volumeQuote": "228.12405820"
    }
  ]
}

It looks very hard to get the value of "min" from this JSON. So using the tool JSON to Dart I got the Dart file on button click. It save my all most 40 Minutes ...
Here is Generated Dart File


class Model_Candle {
  List<RIFUSD> rIFUSD;
  List<BERRYUSD> bERRYUSD;

  Model_Candle({this.rIFUSD, this.bERRYUSD});

  Model_Candle.fromJson(Map<String, dynamic> json) {
    if (json['RIFUSD'] != null) {
      rIFUSD = new List<RIFUSD>();
      json['RIFUSD'].forEach((v) {
        rIFUSD.add(new RIFUSD.fromJson(v));
      });
    }
    if (json['BERRYUSD'] != null) {
      bERRYUSD = new List<BERRYUSD>();
      json['BERRYUSD'].forEach((v) {
        bERRYUSD.add(new BERRYUSD.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.rIFUSD != null) {
      data['RIFUSD'] = this.rIFUSD.map((v) => v.toJson()).toList();
    }
    if (this.bERRYUSD != null) {
      data['BERRYUSD'] = this.bERRYUSD.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class RIFUSD {
  String timestamp;
  String open;
  String close;
  String min;
  String max;
  String volume;
  String volumeQuote;

  RIFUSD(
      {this.timestamp,
      this.open,
      this.close,
      this.min,
      this.max,
      this.volume,
      this.volumeQuote});

  RIFUSD.fromJson(Map<String, dynamic> json) {
    timestamp = json['timestamp'];
    open = json['open'];
    close = json['close'];
    min = json['min'];
    max = json['max'];
    volume = json['volume'];
    volumeQuote = json['volumeQuote'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['timestamp'] = this.timestamp;
    data['open'] = this.open;
    data['close'] = this.close;
    data['min'] = this.min;
    data['max'] = this.max;
    data['volume'] = this.volume;
    data['volumeQuote'] = this.volumeQuote;
    return data;
  }
}

If you need my Help on Native App Development, Flutter App Development, OR Website Development. Please feel Free to contact me www.DripCoding.com

How to Build & Release Flutter app for iOS

kamal bunkar — Sun, 20 Jun 2021 08:08:56 +0000

If you have build flutter app and ready to release on Apple Store, So you are on right place. In this tutorial, you will learn step by step process how to Release flutter iOS app on Apple store. There is some important points that you should be aware before uploading the app on Apple store. You may have heard that apple is very restrict about user privacy & design UI. But don’t worry, I am going to cover the common mistakes that a new developer do during release of first iOS app.

Official flutter document also listed step by step process, that you can follow. You can know more about how to publish flutter app apple store from www.dripcoding.com

Can i release flutter app on ios without mac? clear answer is no. You can’t release the ios app without mac. if you don’t have macbook then you can test the ios app using emulator only. You should have a macbook to publish the ios app on apple connect.

Flutter app release size? Yes the flutter app size is bigger than native android or ios app size. I will cover this topic how to reduce flutter app size on my next tutorial on www.dripcoding.com

Release Flutter App for iOS Steps by Step guide
Create Apple Developer Account
Register Bundle Identifier
Get App icon & App screenshot ready
App Store Connect Listing Process
Open Project on Xcode & Build
Create Apple Account
Please go to https://developer.apple.com/account and Create apple developer account. Remember apple developer account is associated with your email ID only. So choose right email ID and keep it safe. Apple developer account account cost is $99 per year.

Suppose you are going to release app for your client, it is good practice to create separate account for them to avoid dispute in future.

Register Bundle Identifier
After you signup on developer program, first thing you need to do is Register a Bundle ID for your app. Every iOS application is associated with a Bundle ID, a unique identifier registered with Apple.

On https://developer.apple.com/account/#/overview page click on “Certificates Identifiers & Profiles” OR you can directly visit the https://developer.apple.com/account/resources/certificates/list. On left side menu click on “Identifiers” (Screen 1 below).
Click + to create a new Bundle ID. Select “App ID” on next page & click continue.
Select App type – “App” & click continue.
Next page “Register an App ID” – Add short description about app and select Bundle ID as Explicit and enter an “App Package Name” (Screen 2 below).
On the next page, confirm the details and click Register to register your Bundle ID.
Screen 1 : –

release flutter app for ios

Screen 2 :-

flutter release ios app for testflight

Create App Icon & ScreenShots
Now you have bundle ID, it’s time to prepare flutter project to fulfilled apple guide lines. We need to create multiple app icons for multiple devices. There is so many online tools available to generate iOS icons. My favourite is https://appicon.co. Just upload 1024×1024 px image & it will generate the all apple icons for you. Download the zip file and extract it. There you can see the folder name as “AppIcon.appiconset” inside “Assets.xcassets” folder. copy this folder and Open flutter project on android studio. Click on iOS folder in project directory your_project_name/ios/Runner/Assets.xcassets/AppIcon.appiconset. Paste & Replace the copied folder here.

You can also change the splash screen by replacing “LauncherImage” inside “LaunchImage.imageset”. Apple has provided the App Review Guidelines, Please have a look on it, But Don’t go too deep into it.

App Store Connect Listing Process
Now go to Apple Store Connect & go to my App. Click on + icon to create new App. On popup window, write App name, select language , select Bundle ID that we have created in last step and write SKU. Please select full access radio button and click on “Create”.

build flutter app

Now on next page, filled all the details. Please be careful when uploading screenshot. Below are the screenshot image dimension.

app screenshot 6.5 display – 1242×2688, 2688×1242, 1284x 2778,
app screenshot 5.5 display – 1242x 2208, 2208x 1242
app screenshot 12.9 3rd. – 2048×2732, 2732x 2048
app screenshot 12.9 2nd. – 2048×2732, 2732x 2048

Please Remember screenshot images should not contains “flutter debug” tag on right top corner. You can disable flutter debug tag by writing below code in materialApp.

MaterialApp( debugShowCheckedModeBanner: false,)
Open Project on Xcode & Build
Now it is time to upload app on Apple Connect. Open flutter project in android studio, Go to tool/firebase/ open ios module on XCode. Your flutter project has successfully export into XCode. First test app is running successfully or not in xcode. Connection your iPhone device via USB cable and click on RUN button on top in XCode window. If there is any error in xcode run then close the xcode window and run it on android studio to make the correction in code.

Once you have run the code successfully, On Xcode window, first open is folder icon, click on it. Navigate to your target’s settings in Xcode:

in the main view sidebar, select the Runner target.
Select the General tab. there you can change app Display name. Remember bundle identifier should be the same that you have created in early stage.
Deployment info section- select device
Signing & Capabilities tab – if you are using xcode first time then it will promote you to login with your Apple Developer id. Just signin it then select TEAM as your developer account. Please checked automatically manage signin.
Rest options are automatically filled for you. Don’t need to make change on it.
Toolbar – Go to Product/Destination/Build (any ios device arm64, armv7)
Toolbar – Go to Product/Archive. Again you will see popup window, click on validate app and keep continue untill you go successful message.
Once app get validated click on Distribute App and again same popup window will appear. Once you go successful upload app on apple store, that means your build is ready to publish.
Note – it will 10-20 minutes to appear build on apple store connect as build. So wait until you can see it.
Now you are ready to “Submit for review”. Click on it, if you missed any field to be filled then one message will be appear on top beside the “submit for review” button. Filled all the necessary details and again submit the app.
You will get email alert whenever the review status will change by apple team. Note – ios app review process is not machine oriented like android app.

I hope you have followed all my instructions carefully, but if suppose you stuck at any point please let me know. Please whatsapp me at +91-9144040888 or email me at kamal.bunkar@dripcoding.com. I am available for help.