Embedded web server in Flutter

Discover how to integrate a web server that allows uploading files in your app for Flutter (or server in Dart).


In an app it is normal to connect to a web page or API to obtain information and/or send a form, telemetry information, etc.

But sometimes, there are projects where a mechanism is required to update the configuration or dynamic content without having direct access to the device (for example via WiFi).

In the case of iOS devices this is usually common in apps such as the VLC media player, where an embedded web server is created so that the user can easily upload its content (MKV, MP3, etc).

In our case, an app needed to be able to modify configuration files remotely.

Solution with http_server

We will use the http_server library developed by the Dart team.

The truth is that it is not well documented with examples but as you will see it is not complicated to put it into operation.

The first thing is to include the library as a dependency in our pubspec.yaml and run flutter packages get to update the dependencies.

dependencies: ... http_server: ^0.9.8+1

Then just include this code snippet in the root part of our main widget and call it from initState() for example.

The code is easy to understand.
The first thing that is done is to create a server in any interface of the system under port 8000.

Then to the stream server we apply a transformation to handle “POST” that preprocesses form and files.

The last part is the handler for the subscription to the stream.
Here by means of a switch the index of the end point of rise is handled directly. For the root page, the static HTML content of a file in assets is loaded (function_loadStatic) and it is used.

In the file upload part, it is expected that the file is in the “file” field and as an example of processing it is saved as “file”.

As you can see, in a few lines of code we have an embedded web server that accepts file uploads easily in Dart/Flutter.

Originally published at https://digitalilusion.com on March 13, 2019.




Beyond-Full-stack developer #go #python #kubernetes #terraform #devops

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Unlock the power of your PowKiddy/PocketGo with the Miyoo Firmware

Solana Season Hackathon Taiwan | 03. Project Ideas List

Priority Queue

Contrasting AWS Instances at a Glance and fixing Up the right one for you !

API Architectures

Tekton on IBM Cloud — Level 2 Parameters

The Web I Want to Use

A taxonomy of components of Web3 from lowest to highest level with example subcategories & projects

{Notes} Python development notes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
JM Robles

JM Robles

Beyond-Full-stack developer #go #python #kubernetes #terraform #devops

More from Medium

Strings in Dart lang | Dart and Flutter

Strings in Dart programming language

Use Flutter in Visual Studio Code

A Framework for Flutter Part 3

Easy Keyboard Shortcuts in Flutter Desktop Apps