Zero, preface,

Recently, I switched to a new Windows. Please share with me the process of setting up the Flutter&Windows application environment.

Flutter supports MacOS very well, because both iOS and MacOS are ultimately built with XCode, making it easy to run on a Mac desktop.

Getting Flutter to run on Windows is a bit of a hassle, which creates some barriers. This article will introduce how to support Windows desktop programs.

My FlutterUnit open source project is being adapted for Windows. Mainly database support adjustments (SQLFlite does not currently support Windows)

1. Run the Flutter initial project

1. Create the FlutterSDK desktop program
  • The current stable version does not support Windows. I can create a folder and download the Master branch of Flutter
  • Modify the computer’s environment variables to point to the Master branch of the Flutter SDK
  • Enable Windows support:flutter config --enable-windows-desktop
  • Create a Flutter project. It is recommended to create a Flutter project on the command line.
[· git clone - b master https://github.com/flutter/flutter.git - [flutter, version flutter 1.20.0-3.0. The pre. 124 The channel master, https://github.com/flutter/flutter.git Framework, revision ec3368ae45 (17 hours a line), 2020-07-02 Tools • Dart 2.9.0 (build 2.9.0-20.0.dev f8FF12008e) --[· Flutter Channel Flutter channels: * master dev beta stable --[· Flutter config --enable-windows -- desktop --[· E: --[· CD Projects\Flutter\Desk --[· Flutter create toly_flutterCopy the code
  • You can see the Windows directory, which is the Windows application project

2. Run Flutter’s Windows project

After Windows support is enabled and the AS is restarted, the following drop-down options are displayed

Running it directly can be an error, because Windows applications require Visual Studio tools to compile, just as MacOS requires Xcode

You can execute the Flutter doctor to see what happens

3. Installed VisualStudio

After downloading,flutter Doctor, as follows. And then it’s ready to run.

The official desktop project and some desktop plug-ins

1. Run the official desktop example

Google’s Webflutter -desktop-embedding is an official desktop support project on Github.

There are a lot of official utility plug-ins, you can download and have a look.

 git clone https://github.com/google/flutter-desktop-embedding.git
Copy the code

If the main. Dart file has a cross, the SDK is not configured properly. Languaes &Frameworks–> The Flutter panel configuration

As you can see, this project references many native plug-ins, which are a valuable resource for desktop development today.

After the flutter pub get, you can run the sample project

If your computer is not in developer mode, using plug-ins will cause an error. You can go to Settings > Updates and Security > Developer options

Building with plugins requires symlink support. Please enable Developer Mode in your system settings

Then run, the project running effect is as follows:

2. Several plug-ins for the sample project
  • window_sizeScreen size plug-in

This plugin is very useful, desktop is different from mobile. There is the concept of a window, so it is necessary to define the window size of the program.

import 'package:window_size/window_size.dart' as window_size;

void main() {
  // Try to resize and reposition the window to be half the width and height
  // of its screen, centered horizontally and shifted up from center.
  WidgetsFlutterBinding.ensureInitialized();
  // Get window information, then set window information
  window_size.getWindowInfo().then((window) {
    if (window.screen ! =null) {
      final screenFrame = window.screen.visibleFrame;
      final width = math.max((screenFrame.width / 2).roundToDouble(), 800.0);
      final height = math.max((screenFrame.height / 2).roundToDouble(), 600.0);
      final left = ((screenFrame.width - width) / 2).roundToDouble();
      final top = ((screenFrame.height - height) / 3).roundToDouble();
      final frame = Rect.fromLTWH(left, top, width, height);
      // Set window information
      window_size.setWindowFrame(frame);
      // Set the top title of the window
      window_size
          .setWindowTitle('Flutter Testbed on ${Platform.operatingSystem}');

      if (Platform.isMacOS) {
        window_size.setWindowMinSize(Size(800.600));
        window_size.setWindowMaxSize(Size(1600.1200)); }}}); runApp(new MyApp());
}
Copy the code
  • color_panelColor selection plug-in

In the External Libraries#Flutter Plugin you can see that color_panel Plugin does not support Windows.

When I click on the upper left corner to select a color, there’s no extra processing, so I get an error, which is not good. I think I could give you a hint or something.

  • file_chooserFile selection plug-in

Very useful plug-in, support open file selection panel and file save panel

FlatButton(
      child: const Text('OPEN'),
      onPressed: () async {
        String initialDirectory;
        if (Platform.isMacOS || Platform.isWindows) {
          initialDirectory =
              (await getApplicationDocumentsDirectory()).path;
        }
        // Open the file selection panel
        final result = await showOpenPanel(
            allowsMultipleSelection: true, initialDirectory: initialDirectory); Scaffold.of(context).showSnackBar(SnackBar( content: Text(_resultTextForFileChooserOperation( _FileChooserType.open, result)))); },)Copy the code

FlatButton(
  child: const Text('SAVE'),
  onPressed: () {
    // Open the file save panel
    showSavePanel(suggestedFileName: 'save_test.txt').then((result) { Scaffold.of(context).showSnackBar(SnackBar( content: Text(_resultTextForFileChooserOperation( _FileChooserType.save, result)), )); }); },),Copy the code

In addition, you can specify the filter type

FlatButton(
  child: const Text('OPEN MEDIA'),
  onPressed: () async {
    final result =
        await showOpenPanel(allowedFileTypes: <FileTypeFilterGroup>[
      FileTypeFilterGroup(label: 'Images', fileExtensions: <String> ['bmp'.'gif'.'jpeg'.'jpg'.'png'.'tiff'.'webp',
      ]),
      FileTypeFilterGroup(label: 'Video', fileExtensions: <String> ['avi'.'mov'.'mpeg'.'mpg'.'webm',]]); Scaffold.of(context).showSnackBar(SnackBar( content: Text(_resultTextForFileChooserOperation( _FileChooserType.open, result)))); },),Copy the code
  • Url_launcher, url_launcher_fdeThe plug-in

You’ll see some plugins with the FDE ending in plugins\flutter_plugins, which have Windows support in their packages.

As before, the url_launcher is used to jump from one link to another.

FlatButton(
  child: const Text('OPEN ON GITHUB'),
  onPressed: () {
    url_launcher
        .launch('https://github.com/google/flutter-desktop-embedding'); },),Copy the code
  • Path_provider, path_provider_fdeThe plug-in

Used to get folders, this is very useful.

void _showDir() async{
  Directory tempDir = await getTemporaryDirectory();
  Directory appDir = await getApplicationSupportDirectory();
  Directory appDocDir = await getApplicationDocumentsDirectory();
  print('----getTemporaryDirectory-----${tempDir.path}-- -- -- -- -- - ');
  print('----getApplicationSupportDirectory-----${appDir.path}-- -- -- -- -- - ');
  print('----getApplicationDocumentsDirectory-----${appDocDir.path}-- -- -- -- -- - ');
}
Copy the code

Third, the end

1. Describe the difference between package and plugin:

Flutter is a plugin for platform-level packages such as path_provider and SQLFILte.

The package developed with pure Dart is package, which is platform-independent and can be used across platforms, such as Bloc, provider, and Flutter_star

Moor_ffi is used for SQLite database plug-ins that support Windows

2. About Windows Project:

I always thought that Flutter was just an intermediary and that each platform project was independent.

Not “One For All”, but “All By One”, e.g

If you want to make DIY changes to Android code, open the Android folder in AndroidStudio

If you want to DIY your iOS code, open the iOS folder with XCode

If you want to DIY your MacOS platform code, open the MacOS folder with XCode

If you want to DIY modify Windows platform code, use VS to open the Windows folder

Each one is a complete project, but Flutter connects them together, giving them UI performance and operation with Dart.

3. The end

@Zhang Fengjietele 2020.07.03 not allowed to transfer my public number: the king of programming contact me – email :[email protected] – wechat :zdl1994328 ~ END ~