Zero, preface,

FlutterUnit is an open source project maintained by [Zhang Fengjietele] for a long time. Welcome to star

After a period of update, FlutterUnit1.1 has basically met my expectations and is now gradually adding and optimizing the collection of components. Now comes the MAC version.

FlutterUnit. Apk download Download FlutterUnit for MAC Github repository address
  • Town building figure

How to run FlutterUnit MAC

1. How to use Flutter MAC
Macos is not currently supported in the Stable, so you can switch to the Master branch to try it out.Copy the code
  • Environment:Re-prepare a FlutterSDK and use the Flutter Master branch
  • Enable MacOS desktop support:flutter config --enable-macos-desktop
--[• flutter config --enable-macos-desktop --[• flutter --version flutter 1.18.0-7.0.pre.46 • Channel master • https://github.com/flutter/flutter.git Framework, revision 1 f132e90f8 11 days (a line), the 2020-04-23 11:00:12 + 0530 Engine • Dart 2.9.0 (build 2.9.0-2.0.dev 64b8DED48b)Copy the code
2. How to obtain the FlutterUnit MAC code
  • A new branch of Flutter_unit_MAC has been created in the Github project of FlutterUnit
  • FlutterUnit The MAC side, or desktop side, is maintained in this branch, separate from the mobile side.
The situation on mobile and desktop is very different, and they require different SDKS. So instead of adapting in the original mobile code, I created a new branch for two separate projects. In fact, two completely different situations, there is no need to force one, otherwise it will feel tied everywhere. Judging also makes the code complex and hard to read, and independent maintenance may be a better choice.Copy the code

3. How to run and package
  • Get dependency packages:flutter pub get
  • Run the command:flutter run -d macosOr directly throughAndroidStudioSelect device run

  • Packaging macos:flutter build macosIn thebuild/macos/Build/ReleaseYou can see the application in

2. FlutterUnit MAC Function Description

Because the MAC side record the screen out of GIF is too large, do not play the GIF, all functions with the mobile side

This article will explain why I made FlutterUnit on the MAC side and some interface changes.

1. FlutterUnit home page
  • The desktop is the most troublesomeThe navigation barIf you use the bottom bar or the top bar, it will be very ugly
  • Usually you need the left column, and of course these are forSuper hands-onOf me, is a small dish.Use what you have, build what you don't.
  • Desktop applicationsThey are generally wideYou can use a GridView to display items in multiple columns depending on the situation.

2. Left click the menu bar
  • Click on theSettings at the bottom of the navigation bar on the rightYou can open the menu on the left
  • Also throughThe left slideTo open the menu on the left, the menu content remains the same, the function remains the same

3. Component details page
  • Adjust theRelated componentsAnd the position of the introduction, the same row display, more beautiful.

  • Due to theShare plug-insMacos is not supported yet, hereCode sharing has been changed to code copying.
  • The expansion of the code panel still exists, and can be expanded through the expansion button.

4. The collection functions normally
  • Collection ofAdd, delete, change and check operationandThe mobile devices remain the same

5. Add and favorites of component details page

Function consistency

6. The search page
  • Fuzzy query

  • Star query

It took me less than half a day to adapt to MacOS. It is mainly the design and implementation of the right bar of the home page.

This is also helped by the clarity of the project. I know what files are for, so it’s important to pull out variables, methods, or classes, as appropriate, rather than trying to cram everything together, which is a disaster if the code changes. In addition, the business logic maintained by Bloc can remain unchanged, as long as some structures of the relevant pages are adjusted, which is also bloc’s advantage.

3. The reason for making FlutterUnit MAC

1. 1. How to Play guitar
  • If life is not for X, then all is meaningless. ---- Zhang Fengjieteilie
2. Number two: Let more people knowThe desktop application of Flutter

I have been involved in Flutter for one and a half years. I started to work on the desktop application of Flutter half a year ago. I have stepped into many pits and learned a lot. All these experiences have improved my understanding of flutter to another level. Many people may still be watching flutter on the mobile end. Little did I know, however, that The desktop application of Flutter was already thriving, especially since many tripartite plug-ins were already supported by MacOS.

One set of code runs on all devices, which I call a unified cross-platform solution. Due to the different application scenarios and sizes of devices, forced adaptation and maintenance costs are too high, which is the limitation of the platform itself.

More and more, I feel that Flutter is not a uniform cross-platform solution and can give programmers a cross-platform possibility. One of the most important is this: Any programmer can write a MAC application, a Windows application, an android application, an ios application, a Linux application, a web application, using the flutter/dart code, even if he/she does not know C++, C#, Java or Js. This is the possibility that Flutter offers. Never in my wildest dreams did I think I could make a MAC application and write a Windows application on mobile.

Of course only flutter/dart will exist, bottlenecks will also exist and you may not fully understand the characteristics of the platform. But there is no need to know all the platform features, after all, software development is not one person’s job. The growing richness of the plugin ecosystem will gradually reduce flutter developers’ dependence on the platform. For specific fields, specific functions of software, there may be a career of flutter plugin designers at all ends.

The world trend, long will be divided, because no one can resist all things, one play six terminal platform is impractical. It is an effective way to solve big problems. Just as the human body is made up of various functional cells working together to keep the individual alive, rather than one universal cell working together.

A unified cross-platform solution is a beautiful and great dream. Like getting everyone to speak one language to communicate, maybe it’s just a dream. It may not end up in Flutter. But the possibility that Flutter offers to make programmers cross-platform, like an all-purpose translator, is a milestone that will surely shine. Here, though I have little personal ability, I hope that FlutterUnit will be the torch to move forward with me. If you come, be your guest. To leave, to go, is none of my business.

3. Third: The most important point is for the convenience of data maintenance

In addition to FlutterUnit, there was a previous project for FlutterUnit Tool

This project is used to maintain the database. As anyone who has seen FlutterUnit’s source code knows, FlutterUnit is driven by a local database. That’s right, the flutter. Db. The component information, detail information, detail code and collection information are all stored in this database.

However, there is a big disadvantage: it is very difficult to update the data, such as modifying the instance code, or fixing the copywriting, or expanding another component to modify the database, so the maintenance cost is very high. So I was smart enough to come up with a solution. Define rules and parse rules.

So I spent two days refactoring all the component source code to meet the following format

/// contact me by email [email protected] /// note: /// // {// "widgetId": 34, // "priority": 1, // "name": "Divider color ", // "subtitle": "[color] : color [color] \n" //" [thickness] : Line thickness "double", "/ /} import 'package: flutter/material. The dart'; class CustomDivider extends StatelessWidget { @override Widget build(BuildContext context) { var dataColor = [ Colors.red, Colors.yellow, Colors.blue, Colors.green]; Var dataThickness = [1.0, 2.0, 4.0, 6.0]; var data = Map.fromIterables(dataColor, dataThickness); return Column( children: dataColor .map((e) => Divider( color: e, thickness: data[e], )) .toList(), ); }}Copy the code

Dart is used for parsing. Crawl through the project and parse the generated beans one by one.

Insert the tool into the database. This way, I can modify and add information that introduces the component at will. It takes less than 1s to crawl all the files for data synchronization, which is the value of the tool. But behind this value is a process of regular matching, rule conception and practice. The process of encountering problems and solving them. When I write a complete tool, it is undoubtedly a feeling of pleasure, the pleasure of putting ability into reality. Of course, I didn’t commit this tool, and it doesn’t affect any presentation of FlutterUnit. The advantage of using a MAC is that you can easily access files for crawl analysis, which is not possible on mobile.

Finally dig a new hole: my personal blog is in the works: king.toly1994.com/

There is a long-term update planned for Flutter in the near future. At this time for Shouting: I am Zhang Fengjie special strong, that to become the king of programming man.

The end of the

Welcome to Star and pay attention to the development of FlutterUnit. Let’s join hands and become a member of Unit.

In addition, I have a Flutter wechat communication group. You are welcome to join and discuss Flutter issues together. I look forward to exchanging ideas with you.

@ZhangFengjietele 2019.04.04 not allowed to transfer

My official number: King of programming contact me – email :[email protected] – wechat :zdl1994328 ~ END ~