Creating a simple URL shortener using Flutter and Firebase

Simple and easy to use URL shortener using Firebase and Flutter. It creates a shortest URL with your own custom domain if needed, here we are going to host the web app in Firebase hosting service.

We are going to use the following Google Technologies:

• Cloud Firestore
• Firebase Hosting
• Flutter

How it works?

We are going to build a 2 pages web app that gets the URL from the user and sends it to the Firestore database with an unique key. Then the unique key will be used to redirect to the original URL.

Link to GitHub repo here.

Here is how the app looks at different stages:

Web app at different stages

Let’s start with the Firebase Hosting. Create a Firebase project. Then enable Firestore Database.

Here I’m going to use the database in this pattern.

I’ve create a collection named links , then a random document name.

Hence the second step is creating a flutter project. Then configure the project for Cloud Firestore.

Import needed dependencies:

Dependencies: Cloud Firestore from flutter packages(pub.dev)

dependencies:
 flutter:
   sdk: flutter
 flutter_web_plugins:
   sdk: flutter
 firebase_core: ^1.12.0
 cloud_firestore: ^3.1.8

We are going to use Deep linking for this app to work with the shorten link (eg: https://dwarfurl.web.app/xxx765)

This is how the route is configured using onGenerateRoute:

Then create a lib>screen>link_screen.dart for making the redirection happen which is the main feature of this app.

That’s all for creating an link shrinker app with Flutter and Firebase Cloud Firestore.

Here’s a GitHub repo with the working code for your reference.

Happy fluttering!