Freadhub for Mac here it comes

Write an App with Flutter to Readhub

Readhub is open source for Flutter

Related article 3: Documentation of Flutter iOS debugging and packaging process

Related article 4: Summary of the packaging process of Flutter iOS and the approval process of the build launch

Freadhub has finally updated Flutter2.0

Freadhub for Mac It’s coming

preface

Freadhub is an unofficial product of ReadHub, an open source Flutter project developed and maintained by AriesHoo.

With the release of Flutter2.0, Flutter has entered the era of all-platform stable. After a period of platform and screen adaptation, the MacOS version has finally arrived, as if someone was expecting 😭.

• Town building figure1024 * 768The default size

Download the MacOS zip package and unzip it. Click the icon to open it.

A tip from an unidentified developer appears. System Preferences -> Security & Privacy -> General Unlock and allow application installation.

Preparations for the Mac version

1. Get the MacOS code

In accordance with the principle of Flutter-Write Once Run Anywhere, the MacOS version also does not open a new branch in the Master branch.

• You just have to have the original codeUpdateOnce, and thenflutter pub getJust one.
• No original code is available inGithuborGiteeoncloneOnce, and thenflutter pub getJust one.

2. Enable MacOS support

The Flutter 2.0 Stable currently supports MacOS. You only need to enable MacOS support.

• Environment:Flutter SDK Flutter stable 2.0+
• openMacOSSupport:flutter config --enable-macos-desktop
• createMacOSEnvironment configuration:flutter create --platforms=macos .

% flutter - version flutter 2.2.0, channel stable, https://github.com/flutter/flutter.git Framework, revision B22742018b (12 days ago) • 2021-05-14 19:12:57-0700 Engine • A9D88A4D18 Tools • Dart 2.13.0% FLUTTER config --enable-macos-desktop Setting "enable-macos-desktop" value to "true". % flutter create --platforms=macos . Recreating project .... flutter_readhub_github.iml (created) macos/Runner.xcworkspace/contents.xcworkspacedata (created) macos/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist (created) macos/Flutter/Flutter-Debug.xcconfig (created) macos/Flutter/Flutter-Release.xcconfig (created) .idea/runConfigurations/main_dart.xml (created) .idea/libraries/KotlinJavaRuntime.xml (created) Running "flutter pub get" in flutter_readhub_github... 1078 ms Wrote 7 files. All done!Copy the code

3. Basic configuration -icon, name, network, etc

• To prepareMacOSAll sizes of icon are recommendedImage Asset Icon Resizer LiteYou can crop out ICONS, launch images of various sizes — includingAndroid,iOS,MacOSAnd so on.

Copy the icon resource and configuration file to the corresponding folder

It is recommended that the file name be the same as that generated by the Flutter default, which can be set in Image Asset Icon Resizer Lite. The diagram below:

• Set App information: Enter in sequencemacos->Runner->ConfigsFolder openAppInfo.xcconfigThe editorPRODUCT_NAMEValue, which determines the App window title and dock mouse hover prompt text and information about the page;PRODUCT_COPYRIGHTDetermines copyright information about the page. The diagram below:

• Network configuration: The request interface needs to be inmacos->RunnerUnder folderDebugProfile.entitlementsandRelease.entitlementsAdd the following configuration to the file

    <key>com.apple.security.network.server</key>
    <true/>
    <key>com.apple.security.network.client</key>
    <true/>
Copy the code

4. Run and package

• Execute command:flutter run -d macosOr directly throughAndroid StudiochoosemacOS(desktop)run

 % flutter run -d macos
Launching lib/main.dart on macOS in debug mode...
Running pod install...                                           1,956ms
Copy the code

• Execute command:flutter build macos --releaseWait until the execution is complete

% flutter build macos --release

💪 Building with sound null safety 💪

Running pod install...                                           1,709ms
Copy the code

• After the execution is complete, thebuild->macos->Build->Products->ReleaseYou can see the packaged application in the folder, double-click directly to open it.

Freadhub MacOS features introduction

1. Main interface layout

• The size of the desktop is larger than that of the mobile terminal. If the bottom/top TAB mode of the mobile terminal is used, it will be ugly, so I will do it nowMacOSI did it in the process of adaptationResponsive layout— Here do not expand the later will be a single article.
• useGridViewTo make the screen display more information available
• The left top navigation bar and the bottom areToday's poetryRecommend — useToday’s poetry, here thanks 🙏, bottom still forFor more informationandSwitch between dark/light themesbutton

Widescreen: 1280 x 800 Max

Narrow screen: 480 x 640 minimum size

• This is where we set the widow window sizedesktop_windowPlugins – SupportMacOS,Windows,Linux;FreadhubSetting the default size1024 * 768, minimum size480 * 640, maximum size1280 * 800.

2. Today’s poetry

• Because the screen size is too large, only the navigation TAB function appears empty in the left navigation bar, so it is added at the bottom of the TABToday's poetryfunction
• For consistency and aesthetics: display in widescreen modePoetry content + matching tag + cut three parts of the song content; Narrow screen mode is displayed onlyPoetry content. Of course, the beauty here is a matter of opinion, we light spray.
• increasetooltipFunction whenHover or long finger pressMore information is displayedTitle of poem + author of dynasty + full text of poem + translation of poem (if any)

3. More information

• The layout is the same as on mobile – the open source address is displayedGithubwithGitee
• The sharing function is different from the mobile terminal — the mobile terminal pops up the card to share the dandelion download link; The redirect page is displayed on the desktopapkandmacOSCompressed package sharing page

4. Information cards

• Info card Background style optimization – addedBorder linesDistinguishing between different information,Hover over/press the border and background to change the theme color

• Modify click events – will be the original click eventsInformation summary Display of all informationChanged to:Open to view information details,Hot Topic details jump to ReadHub page details

This function uses the flutter_MACOS_webView plugin

• Get rid of trending TopicsRelated recommendation iconChanged to:Share the icon– Original long press to pop share card unchanged

This feature uses the share_plus plug-in

5. Other functions

Don’t say anything, it’s all in the code, Github, Gitee. Welcome to throw eggs and bricks.

conclusion

1. During this adaptation process of MacOS, I feel that Flutter really smells good! At the UI level, the reuse rate across platforms is over 90%. But it does need to be adjusted for different platform features: for example, using top/bottom navigation on mobile is awkward on desktop systems.

2. Platform-related plug-ins other than mobile have a long way to go. — So there will be plugin engineers in the future?

3. Desktop systems with multiple Windows would be even better. Android is a single Activity mode, and iOS is similar. This mode is fine on mobile devices, which are only so big. But desktop systems are generally large, all page jumps in the same window feel almost meaningless. Maybe it’s supportive but I don’t know? — Have know big man wan wan not stingy give advice, thank 🙏!

4. Flutter is still one of the best cross-platform options in the future

conclusion

This App is developed for the author to learn about Flutter practice. It is right to throw a piece of advice to others

About me

The Denver nuggets: AriesHoo

Jane: AriesHoo

GitHub: AriesHoo

Email: [email protected]