Flutter Dart Server Framework – Angel Server in Flutter with Example

Hi Guys, Welcome to Proto Coders Point , In this Flutter Tutorial we will implement a Dart Server Framework using Angel Server.

What is Angel Server in Dart ?

An Angel server is an Backend framework in dart language that we can user for geting or putting data from/to server. A polished, production-ready backend framework in dart.

The angel framework comes with various features such as Hot Reloading , GraphQL and ORM, Angel is one of the perfectly built backend dart to give power to build super production apps.

This server also provides supports for server-side templating, webSockets,authentication and much more.

let’s start implementing Angel dart server in our flutter project.

Flutter Dart Server Framework – Angel Server in Flutter with Example

Open the Existing Flutter project or just create a new Flutter project

Step 1 : Adding Required dependencies

Open pubspec.yaml file and add this 3 dependencies under dependencies section

angel_framework: ^2.1.1

angel_hot: ^2.0.6

dio: ^3.0.8

Brief intro to above dependencies

angel_framework : A high-powered HTTP server with support for dependency injection, sophisticated routing and more.

angel hot : Supports hot reloading of Angel servers on file changes. This is faster and more reliable than merely reactively restarting a Process.

dio : A powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout etc.

Then, just click on Packages get to import all the required packages into our project.

Step 2 : Create a folder and then create a server.dart file

once you add the required dependencies, now it time to create a server.dart file where all the server side coding will be done

Right Click on project > New  > Directory ( name it )

i have created a directory with name angel_backend,

Then, in angel_backend directory create a dart file name ” server.dart “

Snippet Code from Server.dart

import 'package:angel_framework/angel_framework.dart';
import 'package:angel_hot/angel_hot.dart';

import the angel framework and angel hot package to get access to use those classes in server.dart.

Future<Angel> createServer() async {
  var app = Angel();

  app.get("/", (req, res) {
    res.write("Hi Guys, Welcome to Proto Coders Point");
  });

  return app;
}

In the above code createServer is a function which handles certain task in angel server.

app.get(“/”,(req,res) { } : is a Index route that return data in a JSON format, and Here req is request , res is response.

res.write : with send the data to the caller.

main() async {
  var hot = HotReloader(createServer, [
    "/home/rajat/AndroidStudioProjects/flutter_angel_backend/angel_backend"
  ]);

  await hot.startServer("172.20.10.5", 8383);
}

Hot Reloader class comes from Angel_hot library, it accept 2 parameters a function, and a path which need to be reloaded when changed using Flutter HotReload.

Here replace the IP address  with your wifi ip address that you are connected with, In my case its “172.20.10.5” 

Complete Code of Server.dart

server.dart

just copy paste the below lines of code in server.dart file

import 'package:angel_framework/angel_framework.dart';
import 'package:angel_hot/angel_hot.dart';

main() async {
  var hot = HotReloader(createServer, [
    "/home/rajat/AndroidStudioProjects/flutter_angel_backend/angel_backend"
  ]);

  await hot.startServer("172.20.10.5", 8383); // Replace IP Address with yours
}

Future<Angel> createServer() async {
  var app = Angel();

  app.get("/", (req, res) {
    res.write("Hi Guys, Welcome to Proto Coders Point");
  });

  return app;
}

Step 4 : How to start angel server ?

Here is how can we start the angel server

#moving to directory where server code is
/AndroidStudioProjects/flutter_angel_backend$ cd angel_backend  

#start the server
~/AndroidStudioProjects/flutter_angel_backend/angel_backend$ dart --observe server.dart

Result on Successful start the server

Observatory listening on http://127.0.0.1:8181/bE8mdqBRUY8=/

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
Your Angel server is listening at: http://172.20.10.5:8383

Once you have done coding in server side using Flutter angel server now it’s time to UI design

Step 3 : Designing Flutter UI to show Data from Angel Server

How to request angel server for data ?

Here using initState() method i have called my function to get data from server.

I have made use of Dio library to make http call to get data from server

Here the respense data will be stored in String vairable result that we can used to show data in Text Field in out flutter application.

fetchAngelData() async {
    Response response = await Dio().get("http://172.20.10.5:8383");

    setState(() {
      result = response.data;
    });
  }

Open main.dart file  and Copy paste below dart code

main.dart

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String result;

  String text;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    fetchAngelData();
    text = "Above Text is from Angel Server !!!!!!";
  }

  fetchAngelData() async {
    Response response = await Dio().get("http://172.20.10.5:8383"); // replace IP address with yours

    setState(() {
      result = response.data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Angel server Example"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: Text(
              result?.toString() ?? "No Data",
              style: TextStyle(
                  fontStyle: FontStyle.italic,
                  fontWeight: FontWeight.w900,
                  fontSize: 20.0),
            ),
          ),
          Center(
            child: Text(text),
          )
        ],
      ),
    );
  }
}

Their you go now your flutter project is ready to get data from Angel Dart Server Framework.

NOTE : JUST KEEP IN MIND YOU NEED TO REPLACE THE IP ADDRESS WITH YOU IP ADDRESS YOU ARE CONNECTED WITH.

Final Result of this project example