Flutter development of desktop applications - App migrate existing applications to the desktop version

Foreword

Recently do with the flutter of a App, it has released a version of Android and iOS, since there are plans to support all platforms. So start trying flutter desktop solutions. On github we can find two options, one is the official program flutter flutter-desktop-embedding there is a go and use glfw development of go-flutter

Contrast two schemes

Before choosing to use flutter-desktop or go-flutter, let's do some introduction and comparison of the two schemes.

Project structure in two ways:

Flutter Desktop Embedding:

In flutter desktop, we can see the directory structure and development of mobile App flutter structure is similar, each platform has a housing project next major project (there may also contain Android and iOS), then by a shell rendering engineering integration flutter engine. flutter code written in the lib directory.

If we know something macOS development or windows development, you can modify the native code directly in the project, for example, you want to change the window style of the entire program is straightforward to modify the original project, another example macOS you want to integrate Apple's IAP, directly in Primordial project can be realized.

The disadvantage is the development of three platforms you have to know some of the best

Go Flutter:

Go Go Flutter because of their language is cross-platform, all it is only a desktop directory, represents the desktop version, compared to flutter desktop it allows developers to completely do not need to be concerned about the development of macOS or windows, desktop written in all languages ​​go content, and finally can be compiled into three desktop platform in an executable file. Developers will only need to Go to language.

The disadvantage is that if you win or mac or linux to do some special features or interfaces on different platforms, will be particularly troublesome, you can not achieve in Flutter desktop directly in the host project.

How to select the comparison results

First, we must be clear, both scenarios are not very mature, but if you want to develop, nor is it does not take. When you choose can be selected according to their own technology stack, as well as characteristics of the product.

Go if you understand the language, while your program is reading class, business class or partial, the basic need and itself Native interaction, choose Go Flutter really cool.

If you know a little macOS or windows development, while three of your desktop programs often have their own characteristics, but also need to modify some styles itself the entire window, then select Flutter desktop embedding.

Go Flutter actual use

It says so much, we have to actually experience the Go flutter. Let me talk about the background, I've used flutter developed an App, and now I want to become App can run to the desktop version. I write software, called Everything is a record class software, where you can download to everythings.app we can look at the results.

1. Go installation, use the Go Go flutter due to write, so you need to install Go Kit. You can download and install the official website

2. Installation hover, hover Go Flutter is a command-line tool that simplifies the steps to initialize and run the project and so on.

   Use the following command to install

   go get -u github.com/go-flutter-desktop/hover
   复制代码

   Note that if the above command stuck downloading is not down, we can set about proxy, proxy settings can be turned ss command line or v2ray, then enter the command set in the command line

   export http_proxy="http://127.0.0.1:8001"; export HTTP_PROXY="http://127.0.0.1:8001"; export https_proxy="http://127.0.0.1:8001"; export HTTPS_PROXY="http://127.0.0.1:8001"
   //8001改成你的ss或者v2ray监听的端口
   复制代码

   ⚠️ Note: After installing the hover, the official website says you can use the hover command, but you could knock on the command line hover may still get a command not found. Here I use mac system, after installed, the home directory more than a directory of go, what needs to be added in your path environment variable in the package go of.

   export PATH=$PATH:/usr/local/go/bin
   export PATH=$PATH:/Users/{你的用户名}/go/bin
   //可以检查一下你的home目录是否有了go的目录，里面有个bin，将那个目录加入到环境变量即可
   复制代码

3. App access to your previously developed a flutter project, execute the command to initialize the project

   hover init github.com/my-organization/simpleApplication
   //后面这个github.com xxxx就是你的项目仓库地址。没有的话随便写也行
   复制代码

   After initializing the project is completed, you will find a desktop directory in your project, and previous iOS and Android is the same level. The desktop is the desktop version of the catalog project.

4. Put your name to a copy of main.dart main_desktop.dart, Go flutter there is a special place, is the entrance to the program is not used main.dart, but with the main_desktop.dart.

   Modify main_desktop.dart to use the desktop version runs

   void main() {
     // 关键是下面这一句
     debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
     runApp(new MyApp());
   }
   复制代码

5. We're done, run the project now.

   hover run
   //执行 hover run 可以运行项目
   复制代码

Let's look at the operational effect of the run effect is the effect of running App and desktop version.

Supply itself effects:

Go Flutter run desktop effects:

FAQ：

1. According to the above procedures as migration is complete you can run?

Of course not, we all know that we use a lot of plug-ins, in fact, is the only support Android or iOS, if you used more than this plug-in, then you may end up migrating to the desktop will be more trouble. My overall migration time it only took about 2-3 hours, I used sqflite and shared preference, two plug-ins Go flutter has been achieved, so it is easy to replace.

2. Go flutter how to use plug-ins

We know all of our communication is through native and define a method channel to communicate. If you use the plugin only supports Android or iOS, then you need to go in a desktop all methods to achieve this method channel plug. Go flutter currently only three plug-ins can be used, can be found here. github.com/go-flutter-... click on a plug-in, you can see the use of methods, is to paste the code corresponds to, desktop inside option file, but do not find the wrong place, the official website did not say too clearly.

At last

Thank you for reading, I developed a small flutter App also welcome to try:

Everything the accounting diary, travel, etc. are put into a to-do App years.

everythings.app/