How to Run a Flutter Application on Localhost with HTTPS

How to Run a Flutter Application on Localhost with HTTPS

How to Run a Flutter Application on Localhost with HTTPS

Running a Flutter application on localhost is a common practice during the development phase. However, by default, Flutter runs applications over HTTP, which may not suffice for certain scenarios that require a secure connection. In this article, we will explore how you can run your Flutter application on localhost with HTTPS, ensuring a secure connection for your local development environment.

Why Use HTTPS on Localhost?

Running your Flutter application on localhost with HTTPS provides several benefits. Firstly, it allows you to test and develop features that require a secure connection, such as making API requests over HTTPS. Additionally, it mirrors the behavior of running your application in a production environment that uses HTTPS, ensuring your application works seamlessly when deployed.

Using a Self-Signed Certificate

To enable HTTPS on localhost, you will need to generate a self-signed SSL certificate. A self-signed certificate is useful for local development as it doesn’t require any additional cost or complex setup. However, it is important to note that self-signed certificates are not trusted by default on most platforms or browsers.

Generating the Certificate

To generate a self-signed SSL certificate, you can use the mkcert tool which simplifies the process. Follow the steps below to generate the certificate:

  1. Install mkcert by following the instructions for your operating system: https://github.com/FiloSottile/mkcert#installation
  2. Open your terminal or command prompt and navigate to your project directory.
  3. Run the following command to generate the certificate files:
mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1

This command will create two files, key.pem and cert.pem, containing the private key and certificate respectively.

Configuring Flutter to Use HTTPS

Now that you have the SSL certificate files, you need to configure your Flutter application to use HTTPS when running on localhost. Follow the steps below:

  1. Copy the generated cert.pem and key.pem files to your project’s directory.
  2. Open your main.dart file and import the dart:io package by adding the following line at the top:
import 'dart:io';
  1. Add the following code at the beginning of your main() method:
void main() async {
  SecurityContext securityContext = SecurityContext();
  securityContext.useCertificateChain('cert.pem');
  securityContext.usePrivateKey('key.pem');

  HttpServer server =
      await HttpServer.bindSecure('localhost', 443, securityContext);

  ...
}

In this code, we create a SecurityContext object and load the certificate and key files using the useCertificateChain and usePrivateKey methods respectively. Next, we bind the HttpServer to the localhost address and port 443 (the default port for HTTPS).

Trusting the Self-Signed Certificate

To avoid any SSL errors when running your Flutter application, you need to trust the self-signed certificate on your development machine. This step may vary depending on your operating system and browser.

How to Organize Your Flutter Code for Better Maintainability

Here are the general steps to trust the certificate on common platforms:

macOS

  1. Open Keychain Access.
  2. Drag and drop the cert.pem file into the “System” keychain.
  3. Double-click the certificate in Keychain Access and set “Always Trust” for SSL.

Windows

  1. Open the cert.pem file in Windows.
  2. Click “Install Certificate” and select “Local Machine” for the Certificate Store.
  3. Choose “Place all certificates in the following store” and select “Trusted Root Certification Authorities”.

Linux

  1. Copy the cert.pem file to the /usr/local/share/ca-certificates/ directory.
  2. Run sudo update-ca-certificates.

Once you have trusted the certificate, you can run your Flutter application on localhost with HTTPS without encountering SSL errors.

Running your Flutter Application on Localhost with HTTPS

To run your Flutter application on localhost with HTTPS, execute the following command in your project directory:

flutter run --release -d chrome --web-port 443 --web-secure

This command runs your application in release mode (--release) on Chrome (--d chrome) using port 443 with SSL enabled (--web-secure). Depending on your project setup, you may need to adjust the command accordingly.

Now, when you access your Flutter application on https://localhost, it will be served over HTTPS, allowing you to test and develop securely.

Conclusion

Running your Flutter application on localhost with HTTPS is crucial for testing and developing features that require a secure connection. By following the steps outlined in this article, you can easily generate a self-signed SSL certificate and configure your Flutter application to use HTTPS during local development. Remember to trust the self-signed certificate on your development machine to avoid SSL errors.

Mastering In-App Purchases in Flutter
Tags: , , , , , , ,