DEV Community

Cover image for Dart on Ubuntu: Installation, Setup, and First Steps
Javier Jimenez
Javier Jimenez

Posted on

Dart on Ubuntu: Installation, Setup, and First Steps

Dart Logo

I recommend seeing first – installation of Homebrew and asdf on Ubuntu (it’s short, only 5 commands)

📘 Official Documentation

⭐ Popular Frameworks (learning curve low → high):

  • Shelf — Simple for APIs.
  • Dart Frog — A fast, minimalistic backend framework for Dart
  • Angel — Express-style, more complete.
  • Serverpod — Larger, microservices-oriented.

Note: Let’s not forget that the most important thing Dart has today is Flutter, although it almost needs its own section.


🛠️ Installing Dart on Ubuntu

Via APT (official repository)

sudo apt update
sudo apt install apt-transport-https

sudo sh -c 'wget -qO- https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
sudo sh -c 'wget -qO /etc/apt/sources.list.d/dart_stable.list https://storage.googleapis.com/dart-archive/channels/stable/release/latest/linux_packages/dart_stable.list'

sudo apt update
sudo apt install dart
Enter fullscreen mode Exit fullscreen mode

🍺 Installation with Homebrew

brew install dart
Enter fullscreen mode Exit fullscreen mode

📦 Package Manager: pub (built into Dart)

dart pub add <package>
dart pub get
Enter fullscreen mode Exit fullscreen mode

🟩 ASDF for Dart

System dependencies

sudo apt update
sudo apt install curl git unzip
Enter fullscreen mode Exit fullscreen mode

Install plugin + version

asdf plugin add dart https://github.com/patoconnor43/asdf-dart.git

asdf list-all dart
asdf install dart 3.4.0
asdf global dart 3.4.0
Enter fullscreen mode Exit fullscreen mode

Example .tool-versions

dart 3.4.0
Enter fullscreen mode Exit fullscreen mode

📝▶️ Create and run a Dart file

Create file

mkdir app && cd app
touch hola.dart
Enter fullscreen mode Exit fullscreen mode

Code hola.dart

void main() {
  print('Hola Mundo desde Dart!');
}
Enter fullscreen mode Exit fullscreen mode

Run

dart run hola.dart
Enter fullscreen mode Exit fullscreen mode

would you like to know more?


🟦 Basic examples in Dart

NOTE: both codes are compatible with Dart 3.9

EX: 1 Static file web server.

What it does:

  1. Defines the name of the query parameter
  2. Gets the value of the query parameter from the URL
    • htmlEscape sanitizes the received text by removing special characters like < and > into HTML entities.
  3. Renders the value received from the query parameter inside the <H1> tag

📝 Create file: touch server.dart

▶️ Content of server.dart

import 'dart:convert';
import 'dart:io';

void main() async {
  final server = await HttpServer.bind(InternetAddress.loopbackIPv4, 9000);
  print('Servidor corriendo en http://localhost:9000');

  await for (HttpRequest request in server) {
    final params = request.uri.queryParameters;
    final username = params['username'] ?? 'invitado';

    final escaped = htmlEscape.convert(username);

    final htmlContent = """
      <!DOCTYPE html>
      <html lang="es">
      <head>
          <meta charset="UTF-8">
          <title>Hola</title>
      </head>
      <body style="text-align:center">
          <img src="https://dev.to/oscarpincho/mejora-ubuntu-con-homebrew-y-asdf-gestor-de-versiones-multiples-4nka" />
          <h1>Hola, $escaped</h1>
      </body>
      </html>
    """;

    request.response.headers.contentType = ContentType.html;
    request.response.write(htmlContent);
    await request.response.close();
  }
}
Enter fullscreen mode Exit fullscreen mode

run the project / start the server

dart run server.dart
Enter fullscreen mode Exit fullscreen mode

👉 visit:
http://localhost:9000/?username=Homero

To test URL sanitization:
http://localhost:9000/?username=<h1>--Homer--</h1>


EX: 2 JSON REST API

What it does:

  1. Reads the data from a data.json file
  2. Exposes 1 endpoint with that data
  • A list of characters at /characters
  • And the data of a character by id /characters/:id

Example file: data.json

[
    {
        "id": 1,
        "age": 39,
        "name": "Homer Tompson",
        "portrait_path": "https://cdn.thesimpsonsapi.com/500/character/1.webp"
    },
    {
        "id": 2,
        "age": 39,
        "name": "Marge Simpson",
        "portrait_path": "https://cdn.thesimpsonsapi.com/500/character/2.webp"
    },
]
Enter fullscreen mode Exit fullscreen mode

📝 Create file: touch api.dart

▶️ Content of api.dart

import 'dart:convert';
import 'dart:io';

void main() async {
  final server = await HttpServer.bind(InternetAddress.loopbackIPv4, 9001);
  print("Servidor JSON en http://localhost:9001");

  await for (HttpRequest request in server) {
    final path = request.uri.path;

    final characters = await loadCharacters();

    if (request.method == 'GET' && path == '/characters') {
      _sendJson(request, characters);
      continue;
    }

    if (request.method == 'GET' && path.startsWith('/characters/')) {
      final idStr = path.split('/').last;
      final id = int.tryParse(idStr);

      if (id == null) {
        _sendJson(request, {"error": "ID inválido"}, status: 400);
        continue;
      }

      final character = findById(characters, id);

      if (character == null) {
        _sendJson(request, {"error": "Personaje no encontrado"}, status: 404);
      } else {
        _sendJson(request, character);
      }
      continue;
    }

    _sendJson(request, {
      "error": "Ruta no encontrada",
      "url_lista": "http://localhost:9001/characters",
      "url_personaje": "http://localhost:9001/characters/1"
    }, status: 404);
  }
}

Future<List<Map<String, Object?>>> loadCharacters() async {
  final file = File('data.json');
  final content = await file.readAsString();
  final List<dynamic> jsonData = jsonDecode(content);

  return jsonData.cast<Map<String, Object?>>();
}

Map<String, Object?>? findById(List<Map<String, Object?>> list, int id) {
  for (final item in list) {
    if (item["id"] == id) return item;
  }
  return null;
}

void _sendJson(HttpRequest request, Object data, {int status = 200}) {
  request.response.statusCode = status;
  request.response.headers.contentType = ContentType.json;
  request.response.write(jsonEncode(data));
  request.response.close();
}
Enter fullscreen mode Exit fullscreen mode

run the project / start the server

dart run api.dart
Enter fullscreen mode Exit fullscreen mode

👉 visit:
http://localhost:9001/characters

To test URL sanitization:
http://localhost:9001/characters/1


Top comments (0)