Fullstack Flutter and MongoDB Cloud Mini-Course

After numerous requests to produce a Flutter and MongoDB combo, I’ve devoted the time to produce a fullstack Flutter and MongoDb Cloud mini-course. We will build a contacts list application that manages contacts in MongoDB Cloud Atlas database. We will also implement a Dart backend server for talking to MongoDB datastore. This app will be built for both Flutter mobile and web platforms.

Getting started

You will need a MongoDB Cloud Account to create a Project and Cluster. This will give us an environment with MongoDB installed and a user to connect to that MongoDB instance.

The contents of the mini-course are as follows:

• 00:00 Intro
• 00:07 App Demo
• 02:08 Setup MongoDB Cloud Atlas Project and Cluster
• 03:18 Connect to MongoDB Cluster via Terminal
• 04:32 Examine codebase and dependencies
• 05:13 Connect to MongoDB from codebase
• 06:14 Create server and initial route
• 07:30 Add POST and DELETE endpoints
• 09:59 Implement initial contacts screen
• 11:44 Implements “No contacts” view
• 13:41 Implement contact addition functionality
• 14:59 Style ListTile widget
• 16:22 Refactor NoContacts widget
• 17:01 Create ContactListing widget
• 18:20 Using the Faker package
• 18:53 Adding contact deletion functionality
• 20:07 Implements ContactsApi class
• 23:26 Create Contact PODO
• 28:21 Implement contact creation method on api class
• 29:51 Running app on Flutter Web
• 37:04 Outro

Clone and check out the starter branch on the Github repo. This will provide the correct setup to follow along in the Fullstack Flutter and MongoDB Cloud mini-course.

The Dart packages included in this mini-course are:

1. sevr – a Dart library inspired by ExpressJS for writing HTTP servers. We use this to write a server that communicates with our MongoDB Cloud Cluster.
2. dio – a powerful HTTP client for Dart. We use this to make requests to our Dart backend server.
3. faker – a library that generates various fake data. We use this to generate the contact names of our Fullstack Flutter app.
4. mongo_dart – a library for communicating with MongoDB databases. This allows us to talk to MongoDb Cloud Atlas.

Implementing the server

In server/lib/server.dart initiate a connection to MongoDB Cloud Atlas:

import 'package:mongo_dart/mongo_dart.dart';
import 'package:sevr/sevr.dart';

void start() async {
  // Log into database
  final db = await Db.create(
      'mongodb+srv://<user>:<password>@cluster0.xpkap.mongodb.net/<dbname>?retryWrites=true&w=majority');
  await db.open(); // Initiate the connection
  final coll = db.collection('contacts'); // Define a handle to the contacts collection
}

The database connection string can be found by clicking the “CONNECT” button on your cluster and then selecting “Connect your application” as the connection method.

Opening a connection to our MongoDB Cloud Cluster means we can create a server that acts as a gateway to our database:

void start() async {
  // Log into database
  ..
  // Create server
  const port = 8081;
  final serv = Sevr();
}

Our HTTP server is contained within the sevr variable which allows us to go ahead and define our first route:

void start() async {
  // Log into database
  ..
  // Create server
  const port = 8081;
  final serv = Sevr();

  // Define routes
  serv.get('/', [
    (ServRequest req, ServResponse res) async {
      final contacts = await coll.find().toList();
      return res.status(200).json({'contacts': contacts});
    }
  ]);
}

Our first route describes a path and the data to be returned for any client that makes a request to it, in this case being a GET request to the root route of our server. We are returning the list of contacts in our MongoDb collection.

To activate our server and routes we need to listen to incoming connections:

void start() async {
  // Log into database
  ..
  // Create server
  ..
  // Define routes
  ..
  // Listen for connections
  serv.listen(port, callback: () {
    print('Server listening on port: $port');
  });
}

Running this in the terminal will give you the output below:

Learn more from the full mini-course.

Related mini-courses

• Google Cloud and Flutter Mini-Course released

Sharing is caring

If you enjoyed reading this post, please share this through the various social buttons hovering on the left/top side of the screen . Also, check out and subscribe to my YouTube channel (hit the bell icon too) for videos on Dart.

Subscribe to the newsletter for my free 35-page Get started with Dart eBook and to be notified when new content is released.

Like, share and follow me for more content on Dart.