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.
Watch full mini course
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:
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.
dio – a powerful HTTP client for Dart. We use this to make requests to our Dart backend server.
faker – a library that generates various fake data. We use this to generate the contact names of our Fullstack Flutter app.
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:
