Since the release of Flutter 2 in March, it has opened up the ability to publish on mobile, Web and desktop. I have been developing mobile applications with Flutter before, but have not dared to do Web projects with Flutter. Recently, I had time to do some research on my own and encountered some problems. Create a Flutter project as a Demo that integrates some plugins: project address

Current problems encountered (constantly updated…)

Cross-domain 2. Multi-device debugging 3. Title 4

First, cross-domain issues

Mainly use the cached_network_image to load the pictures to show on the network cross-domain problem, directly through Image.net also can work, grab a picture via.placeholder.com/350×150 to on the Internet

PS: Generally looking at which platforms a plugin supports, can be inpub.devTake a look at the platforms listed below, but cached_network_image oddly does not support the Web, but it does load images when the browser is up and running.

1. I am used to develop the Flutter Web project with VSCode. The first device I choose to run the Flutter Web project is Chrome

2. Then select Debug and click the triangle symbol to run

3. Not surprisingly, after a successful run, Chrome now displays the project, using a third party framework on its home page:gesture_password_widgetBecause I also want to see how this gesture password behaves on the Web

4. Slide the correct gesture sequence according to the above prompts to enter the feature list page

5. Click Cached Network Image Demo to go to the test Image loading page. The Image loading fails and the console displays an error

6. Obviously, the requested picture server and the page running address are not compatible, resulting in a cross-domain problem

7. The solution is described in detail in this article: I used the third method, which is similar to starting a proxy service. In the lib/server/ cers. dart file of the Demo project, configure the destination server address and proxy address and port, and then run the file through the terminal. Start a proxy service.

dart xxx/xxx/xxx/cors.dart
Copy the code

8, here I set the proxy service localhost:4040, now open localhost:4040/350×150, image load successfully

9, then change the Demo project loading image address

// imageUrl: "http://via.placeholder.com/350x150",
imageUrl: "http://localhost:4040/350x150".Copy the code

10. As you can see, the image is ready to load

P.S. : I saw it laterThis articleCross-domain problems can also be bypassed in this way during debugging.

Second, debugging problems

Next, after the cross-domain problem is solved, I want to check on the mobile phone through the browser. The current project launch address on the computer ishttp://localhost:52754/#/. After confirming that the computer and the mobile phone are in the same network segment, I opened the Safari browser of the mobile phone and changed the localhost of the address to the IP of the computer, but found that it could not be opened

Tried different boot modes such as

flutter run -d chrome
Copy the code

It doesn’t work

I searched the Internet and found people asking similar questions: Access the Flutter localhost from a real mobile browser. The answer explains why the Web project that Flutter runs cannot be accessed as a server. The solution is to compile the Web project and deploy it locally. It can be accessed from other devices.

Although this method can be solved, but it is not convenient to develop and debug at the same time, so I looked for a solution, and found that someone provided such a command

flutter run -d chrome --web-hostname xxx.xxx.xxx.xxx --web-port xxxx
Copy the code

Tried, through the terminal to enter the IP address of the computer, and then add a port number, after running, found that you can access through external devices

Then we modify the code content and find that the page does not refresh automatically. In the console, we see the following prompt, which means that after the change, we need to enter the command r in the terminal to refresh

PS: This will cause a new problem, that is, the above cross-domain problem configuration, need to change the localhost to the same IP address, so that the external device can also access the configured external server address

Iii. Title

The title on the web page TAB can be set through the outermost MaterialApp

MaterialApp(
  title: 'title aaa'...).Copy the code

However, there is a problem with this, no matter how the page switches, it will always show the title, normal development thinking, must be switched to the login page, the title will show ‘login’, the Settings page will show ‘Settings’ and so on.

There are two solutions:

1. Create a Title layer directly outside the page

@override
Widget build(Context context) {
  return Title(
    label: 'Title of current page',
    primaryColor: Theme.of(context).primaryColor,
    child: ..,
  );
}
Copy the code

2, use SystemChrome. SetApplicationSwitcherDescription

@override
Widget build(BuildContext context) {
    SystemChrome.setApplicationSwitcherDescription(ApplicationSwitcherDescription(
      label: 'Title of current page',
      primaryColor: Theme.of(context).primaryColor.value,
    ));


  returnContainer(...) ; }Copy the code

Personally prefer to use the second, the first need to nest a layer of feeling is not very cool.

Obtain the version number of the application

I used to use the package_info plugin to get the version number, package name, and so on, but saw that the package_info plugin did not support the Web, so I changed to another package_info_plus plugin, which supported the Web.

To be continued…