Coding Flutter Apps on your Phone with Flutter, an Experiment

With code to try out at home

Published in

Flutter Community

3 min readDec 30, 2018

Have you ever thought about how cool it would be if you could just make this quick change in your app without opening your laptop? Or you simply thought about the idea of writing Flutter apps on your phone.

I did some experimenting and I might have something for you!

If you want to try it out, head over to this Github repository which has a detailed setup guide.

This article will take a look at the hows and whys.

How does it work?

It’s probably simpler than you thought.

The compilation is still being done by a PC.

What is happening is that there is a server (written in Dart) running on the computer. It manages the files, handles building and reloading.

The app you are developing needs to include the IDE itself. This works by wrapping the topmost widget in an IdeApp.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.red,
     ),
      home: IdeApp(child: new MyHomePage()),
    );
  }
}

The IdeApp manages listing editable files, writing those back to the computer and invoking hot reloads.

Fun fact: because the IDE itself is inside the project, you can modify the phone-IDE through itself.

When pressing the hot-reload button in the app, a request is sent to the server to reload the app. It then performs a Flutter hot-reload and pushes the changes to the device (if it is Android, this goes through ADB).

In the gif there is no cable, how’s that possible?

The answer is simple: ADB over WiFi.

So I’ll have to be in the same private network? What if I want to develop on the go?

You still need to be in a private network with the build server but here is where VPNs (Virtual private networks) come to the rescue.

Using a VPN you can be in a private network anywhere on the earth over the internet.

With a configured build server and a VPN, you can develop apps anywhere.

Be it on the train, while walking through the city or secretly in a lecture. All you need is an internet connection.

Improvements

Well, there are obviously a lot of possible improvements to this. Bear in mind, this was only an experiment I have written in about one day.

A good text editor

Having a good text editor that supports features every IDE needs would, in my opinion, makes this a somewhat viable way to develop in some cases.

Compiling on the device instead of relying on a build server

I think it might be possible, but I haven't looked into that too much.

Not having to include the ide code in the actual app

This should be possible. There are a few ways to achieve this. For example, the server could copy the project on start and inject the necessary classes on start.

Is this actually useful?

Probably not. At least not yet.

Could this be useful?

In my opinion, yes.

Imagine being in a meeting with a client and he wants to see how the app looks like with a tiny change. Let’s be honest, is there any cooler way than taking out the phone and editing that small change right on the spot?

Also, writing code inside a running app and then hot reloading it, is quite satisfying.