Dart Server with Flutter: A Deep Dive into Serverpod

peace upon you …
As Flutter continues to grow in popularity for building cross-platform mobile, web, and desktop applications, the need for a backend solution that seamlessly integrates with Dart has become more apparent. **Serverpod** is a modern, open-source server-side framework specifically designed for Dart, making it a perfect match for Flutter developers who want a powerful and unified stack for both frontend and backend development. In this article, we will explore how Serverpod works, why it is a great choice, and how to get started using it to create a backend for your Flutter apps.

What is Serverpod?

Serverpod is a backend framework written in Dart that allows developers to build scalable server-side applications easily. It is designed to work seamlessly with Flutter, offering a full-stack Dart experience. With Serverpod, you can create APIs, manage databases, handle authentication, and provide real-time capabilities — all while writing code in Dart.

Some key features of Serverpod include:

• Dart-based backend: Uses Dart for server-side development, making it a natural fit for Flutter developers.
• ORM (Object-Relational Mapping): Provides an easy way to interact with databases using Dart objects.
• Authentication: Built-in support for user authentication.
• Real-time communication: Offers tools to create real-time applications using WebSockets.
• Generated APIs: Automatically generates client code to communicate between Flutter and your server.

Why Use Serverpod?

Serverpod offers a number of advantages for Flutter developers:

• Full-Stack Dart: Using Dart for both the client (Flutter) and server (Serverpod) allows developers to use a single language throughout the entire development process, reducing complexity.
• Automatic Code Generation: Serverpod automatically generates code for API clients, making the integration between frontend and backend effortless.
• Scalable Architecture: Serverpod is designed to handle both small projects and larger applications that require scalability.
• Developer Productivity: It offers an integrated development environment and built-in features like logging, monitoring, and debugging tools.

Setting Up Serverpod

To start with Serverpod, you need to set up both the server and client components. Let’s go through the setup process step by step.

Step 1: Install Serverpod CLI

First, you need to install the Serverpod Command Line Interface (CLI) to create and manage your Serverpod projects. You can install it using Dart’s pub command:

dart pub global activate serverpod_cli

Make sure to add Dart’s bin directory to your system's PATH so that the serverpod command is available globally.

Step 2: Create a Serverpod Project

Once the CLI is installed, you can create a new Serverpod project by running the following command:

serverpod create my_project

This command will create a new folder called my_project containing both the server and Flutter client components.

Step 3: Configure the Database

Serverpod uses PostgreSQL as its database. You need to have PostgreSQL installed and configured on your system. Once PostgreSQL is ready, update the config/development.yaml file in the server project to include your database settings:

database:
  host: localhost
  port: 5432
  user: postgres
  password: your_password
  name: serverpod_db

After configuring the database, you can run the migration command to create the necessary tables:

Step 4: Running the Server

To run the server, navigate to the server directory and use the following command:

dart bin/main.dart

The server should now be running on http://localhost:8080.

Defining Endpoints

Serverpod makes defining API endpoints easy. Endpoints are defined in the lib/src/endpoints folder. Let’s create a simple example_endpoint.dart:

import 'package:serverpod/serverpod.dart';

class ExampleEndpoint extends Endpoint {
  Future<String> sayHello(Session session, String name) async {
    return 'Hello, $name!';
  }
}

Next, add the new endpoint to the protocol.yaml file so that it is recognized by Serverpod. Run the serverpod generate command to regenerate the necessary files:

serverpod generate

This command will automatically generate Dart code for the server and the client, including type-safe methods for calling the API from your Flutter app.

Connecting Flutter to Serverpod

In your Flutter project, you need to add the Serverpod client as a dependency. Open pubspec.yaml in your Flutter client and add:

dependencies:
  serverpod_client: ^0.9.0
  serverpod_flutter: ^0.9.0

Then, import the generated client code and set up the client in your Flutter app:

import 'package:my_project_client/my_project_client.dart';

late Client client;

void main() {
  client = Client('http://localhost:8080/');
  runApp(MyApp());
}

You can now call your server methods from Flutter:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Serverpod Example'),
      ),
      body: Center(
        child: FutureBuilder<String>(
          future: client.exampleEndpoint.sayHello('World'),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text(snapshot.data ?? 'No response');
            }
          },
        ),
      ),
    );
  }
}

Detailed Example: Let’s consider a more detailed example where we implement a user registration feature. We’ll create an endpoint to register users and save their information in the database.

1. Define the Endpoint

Create a new endpoint called user_endpoint.dart in the lib/src/endpoints directory:

import 'package:serverpod/serverpod.dart';
import '../generated/protocol.dart';

class UserEndpoint extends Endpoint {
  Future<String> registerUser(Session session, String username, String email) async {
    // Insert user data into the database
    var user = User(username: username, email: email);
    await session.db.insert(user);
    return 'User registered successfully!';
  }
}

2.Define the User Table

Define the User class in protocol.yaml to represent the user table:

class: User
fields:
  id: int, autoIncrement, primaryKey
  username: String
  email: String

Run serverpod generate to generate the necessary files for the User class and endpoints.

3.Add Database Migration

You need to create a migration to add the User table to the database:

serverpod migrate

4.Connect to the Endpoint in Flutter

Add the UI to call the registerUser method in the Flutter app:

class RegisterScreen extends StatelessWidget {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Register User'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                String username = _usernameController.text;
                String email = _emailController.text;
                String response = await client.userEndpoint.registerUser(username, email);
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(response)));
              },
              child: Text('Register'),
            ),
          ],
        ),
      ),
    );
  }
}

In this example, the Flutter app collects a username and email, then calls the registerUser method on the UserEndpoint to save the data in the database. The response is displayed as a snack bar message.

Real-Time Features with Serverpod

Serverpod also supports real-time communication through WebSockets. This feature is useful for applications that need real-time updates, such as chat apps or live notifications. You can set up listeners for WebSocket events in both your server and client to send and receive updates instantly.

To use WebSockets, simply define a method in your endpoint to broadcast messages, and set up a listener in your Flutter client to handle those messages.

Monitoring and Debugging

Serverpod comes with a built-in dashboard that provides a visual overview of your server, including logs, active sessions, and database performance. You can access the dashboard at http://localhost:8080/dashboard. This makes monitoring and debugging your server straightforward, allowing you to identify issues and optimize performance easily.

Conclusion

Serverpod is a powerful tool for Flutter developers who want to create a backend in Dart, maintaining a consistent language across the entire stack. It simplifies database interactions, API creation, and real-time communication while providing useful tools for debugging and scaling your server. By using Serverpod, you can create a seamless development experience that helps you focus on building features rather than dealing with complex configurations.

Whether you’re building a small app or a large-scale project, Serverpod offers the flexibility and power you need to create efficient backend solutions for your Flutter applications.

References

https://serverpod.dev/

Originally published on Medium on November 3, 2024.