flutter开发桌面应用_Flutter简介–新的移动应用开发技术

向右看齐 2022-12-08 04:44 285阅读 0赞

![1779d794f83b662a2636491faf776bb0.png][]

flutter开发桌面应用

Flutter is already found in headlines of [mobile app development][] industry. The popularity waves are no surprise as top known companies like Alibaba, Google Ads, App Tree, Birch Finance and many more has already adopted Flutter. May be chances are you already have used the app of Alibaba, Google Ads which is developed by Flutter.

Flutter已出现在[移动应用程序开发][mobile app development]行业的头条新闻中。 人气浪潮不足为奇，因为诸如阿里巴巴，Google Ads，App Tree，Birch Finance等知名公司已经采用了Flutter。 您可能已经使用过Flutter开发的Google广告Alibaba应用程序。

The product was in beta stage for long time and recently on Dec 4th 2018, Google released its first version 1.0. We have already acknowledged the excitement to know about this new transformative technology, so here’s a brief overview.

该产品长期处于测试阶段，最近于2018年12月4日，谷歌发布了其第一个版本1.0。 我们已经认识到了解这项新的变革性技术的兴奋，因此这里是一个简短的概述。

## 颤振简介 **(**Introduction to Flutter**)** ##

### 什么是颤振？ **(**What is Flutter?**)** ###

Flutter is an open source mobile application technology originally developed by google.

Flutter是Google最初开发的一种开源移动应用程序技术。

It is a complete SDK – [Software Development Kit][] that has each and every thing you require to [develop native Android][] and iOS apps or cross platform applications. The kit includes ready-made widgets, testing and integration APIs, rendering engine, command-line tools.

它是一个完整的SDK – [软件开发工具包][Software Development Kit] ，其中包含[开发本机Android][develop native Android]和iOS应用程序或跨平台应用程序所需的所有内容。 该工具包包括现成的小部件，测试和集成API，渲染引擎，命令行工具。

Okay, let’s answer this question, “Can you write once and deploy to both Android and iOS? Yes, with Flutter you can write once and deploy to both platforms Android and iOS. Actually more than that like desktop embedded for Linux, Mac, Android, iOS, and Fuchsia mobile device. Flutter inherits all the UI’s from the Fuchsia.

好的，让我们回答这个问题：“您可以编写一次并部署到Android和iOS吗？ 是的，使用Flutter，您只需编写一次即可部署到Android和iOS两个平台。 实际上，它比嵌入式Linux，Mac，Android，iOS和Fuchsia移动设备的台式机还要多。 Flutter继承了紫红色的所有UI。

Flutter works on the reactive development architecture, but with few changes. Updating UI contents automatically at the time of updating variables in the code is one of the essential parameter about reactive programming. React Native platform works on the same rule, but it takes help of JavaScript Bridge in order to access OEM widgets. However the app faces obstacles when the app has to pass the bridge access widgets every time the app loads. Due to this functionality, it causes performance issue.

Flutter在响应式开发体系结构上工作，但变化不大。 在更新代码中的变量时自动更新UI内容是关于React式编程的基本参数之一。 React Native平台使用相同的规则，但是需要JavaScript Bridge的帮助才能访问OEM小部件。 但是，当应用程序每次加载时都必须通过网桥访问小部件时，该应用程序会遇到障碍。 由于此功能，它会导致性能问题。

Let’s understand the basic framework of OEM widget access process:

让我们了解OEM小部件访问过程的基本框架：

![OEM SDKs][]

If the app needs to access OEM widgets, it has to be passed to the UI section, and it draws to the canvas while handling other events.

如果应用程序需要访问OEM小部件，则必须将其传递到UI部分，并在处理其他事件时绘制到画布上。

### React性工作方法 **(**Reactive Method Of Working**)** ###

![Reactive Method Of Working][]

In endeavor of creating cross-app platform app, the application uses JavaScript. So, when app wants to access UI i.e. OEM Widgets, it needs to get translated into an underlying framework – JavaScript Bridge, which then has to talk to OEM UI. This one added step of bridge needs resources and time and therefore reducing performance.

为了创建跨应用程序平台的应用程序，该应用程序使用JavaScript。 因此，当应用程序要访问UI(即OEM小部件)时，需要将其转换为基础框架– JavaScript Bridge，然后必须与OEM UI进行通信。 桥接的这一额外步骤需要资源和时间，因此会降低性能。

### 跨平台工作方式 **(**The Cross-Platform Approach Of Working**)** ###

![The Cross-Platform Approach Of Working][]

The real cross platform approach need to send their code to SDK libraries and that access OEM widgets.

真正的跨平台方法需要将其代码发送到SDK库并访问OEM小部件。

### 颤振法 **(**The Flutter Approach**)** ###

![Flutter Approach][]

Now with Flutter, the bridge is removed and it communicates with platform by using Dart.

现在，使用Flutter，将桥移除，并使用Dart与平台进行通信。

Checking out details about Dart? Flutter uses **object-oriented language** known as **Dart** that uses ahead-o-time compilation methods in order to compile into native code without the bridge access widgets. Due to this, app startup line is easily loaded and this boosting the speed of app load.

查阅有关Dart的详细信息？ Flutter使用称为**Dart** **的面向对象的语言** ，该**语言**使用事前的编译方法来编译为本地代码，而无需桥接访问小部件。 因此，应用启动行很容易加载，这提高了应用加载速度。

As shown in above picture, Flutters uses its OS as a canvas directly in order to develop the interface. Therefore, the different services like gestures, animations, rendering are directly accessed into the framework and this provides ease of control to developers.

如上图所示，Flutters直接将其OS用作画布以开发界面。 因此，直接将各种服务(如手势，动画，渲染)直接访问框架，这为开发人员提供了易于控制的功能。

Since we have already understand what flutter is and how it makes the development process easy, let’s check out some of its best features.

既然我们已经了解了什么是颤振以及它如何使开发过程变得容易，所以让我们检查一下它的一些最佳功能。

**Features in Flutter**

**Flutter中的功能**

1.  High quality usability
    
    高品质的可用性
2.  Write once and deploy to multiple platform
    
    编写一次并部署到多个平台
3.  Automated testing
    
    自动化测试
4.  App’s work in a faster and smooth without hindrance
    
    App的工作更快，更流畅，没有障碍
5.  Has rich set of widget and animation. [Widget catalog in flutter][]. Ex: Material design, Cupertino (iOS – style) widgets.
    
    具有丰富的小部件和动画集。 [控件目录在flutter中][Widget catalog in flutter] 。 例如：材质设计，Cupertino(iOS样式)小部件。
6.  Generates platform specific SDK’s
    
    生成平台特定的SDK
7.  Hot reload feature for faster app development means after minor changes no need to restart the app.
    
    热重装功能可加快应用程序开发速度，这意味着在进行较小的更改后无需重新启动应用程序。
8.  Build beautiful and high performance app with less time and money.
    
    用更少的时间和金钱构建美观，高性能的应用程序。

**Pros of Flutter Development**

**颤振发展的优点**

1.  You can use ready-made and custom widgets for faster UI coding.
    
    您可以使用现成的和自定义的小部件来加快UI编码。
2.  Easy to learn and is a growing community.
    
    易于学习，并且是一个成长中的社区。
3.  Uses language dart, which is simple and effective language to learn. Specially developed for Java programmers.
    
    使用语言Dart，这是一种简单有效的语言。 专为Java程序员开发的。
4.  Hot reload function for instantaneous updates.
    
    热装功能可进行即时更新。
5.  Internationalization and accessibility.
    
    国际化和可访问性。
6.  Easy Portability, as it is a SDK rather than a framework.
    
    易于移植，因为它是SDK，而不是框架。
7.  Widgets are directly accessible and thus guaranteed high performance.
    
    窗口小部件可直接访问，从而保证了高性能。

### Flutter和React Native之间的区别 **(**Difference between Flutter & React Native**)** ###

Today, mobile app developers are searching for an app development platform that allows them to code less and work fast without glitches. Two such technologies that make Native app development easy are React Native and Flutter. React Native developed in JavaScript has already gained major popularity for developing Android and iOS application. While, the recently released Flutter that is majorly promoted by Google surprises us with its outstanding features.

如今，移动应用程序开发人员正在寻找一个应用程序开发平台，该平台可让他们减少编写代码并快速工作而不会出现故障。 使本机应用程序开发变得容易的两种技术是React Native和Flutter。 用JavaScript开发的React Native在开发Android和iOS应用程序方面已获得广泛欢迎。 同时，最近由Google大力推广的Flutter凭借其出色的功能使我们感到惊讶。

What happens when we compare these champions? Let’s see.

当我们比较这些冠军时会发生什么？ 让我们来看看。

*  **Language** 
    
    **语言**
 *   *  Flutter uses Dart and is introduced by Google.
        
        Flutter使用Dart，由Google引入。
     *  React Native uses Javascript and is introduced by Facebook.
        
        React Native使用Javascript，由Facebook引入。

*  **Code Reusability**
    
    **代码可重用性**
    
     *  Flutter best fits for code reusability.
        
        Flutter最适合代码可重用性。
     *  React native allows to reuse the code but restricted for a few components.
        
        React native允许重用代码，但仅限于一些组件。
    
    **Code Reusability**
    
    **代码可重用性**

*  **Performance**
    
    **性能**
    
     *  Flutter is faster. This is most probably true because for displaying something on the screen flutter doesn’t need any bridge (Android / iOS native Code). Except Bluetooth, Camera or other hardware related task.
        
        颤振更快。 这很可能是正确的，因为在屏幕上显示某些东西时，颤振不需要任何桥接(Android / iOS本机代码)。 除了蓝牙，摄像头或其他与硬件相关的任务。
     *  While, React native uses native android and iOS UI view for displaying UI components on the screen.
        
        同时，React native使用本地android和iOS UI视图在屏幕上显示UI组件。
    
    **Performance**
    
    **性能**

*  **Validate changes Instantly**
    
    **立即验证更改**
    
     *  Both the framework support hot reload feature to make developer life easier
        
        两种框架均支持热重载功能，从而使开发人员的生活更轻松
    
    **Validate changes Instantly**
    
    **立即验证更改**

### **React Native和Flutter之间的Google趋势比较** **(****Google Trend Comparison between React Native and Flutter****)** ###

![Google Trend Comparison between React Native and Flutter][]

### 如何开始使用Flutter？ **(**How To Get Started With Flutter?**)** ###

#### 安装步骤 **(**Installation Steps**)** ####

We can use any text editor to write and build apps but recommended approach is android studio, VS code or Intelli J.

我们可以使用任何文本编辑器来编写和构建应用程序，但推荐的方法是android studio，VS代码或IntelliJ。

Here we will explain about how to install in android studio based on Linux OS: –

在这里，我们将说明如何在基于Linux OS的android studio中安装：–

**Step 1:**

**第1步：**

Open the android studio. Go to File -> Settings -> Plugin -> type “flutter” in search bar and click on install.

打开android studio。 转到文件->设置->插件->在搜索栏中键入“ flutter”，然后单击安装。

![flutter installation step 1][]

**Step 2:**

**第2步：**

Install flutter SDK.

安装flutter SDK。

There are basically 2 ways to install SDK. They are.

基本上有两种安装SDK的方法。 他们是。

File -> New -> New Flutter project -> Select Flutter Application -> Click on Install SDK

文件->新建->新建Flutter项目->选择Flutter应用程序->单击Install SDK

![flutter installation step 2][]

Now, give a path where you extracted the SDK. Click on next button and its done.

现在，提供一个提取SDK的路径。 单击下一步按钮并完成。

Can install directly from the [https://flutter.dev/docs/get-started/install/linux][https_flutter.dev_docs_get-started_install_linux]  and follow the steps as given in the document.

可以直接从[https://flutter.dev/docs/get-started/install/linux][https_flutter.dev_docs_get-started_install_linux]安装，并按照文档中给出的步骤进行操作。

Now we can start writing with flutter app.

现在我们可以开始使用flutter应用程序了。

### 如何用Flutter编码？ **(**How to Code With Flutter?**)** ###

We have explained how you can develop a login page.

我们已经解释了如何开发登录页面。

![flutter login page][]

Just note that, app works only in portrait mode, and below are the code snippets.

请注意，该应用程序仅适用于纵向模式，下面是代码段。

void main()
    {
     SystemChrome.setPreferredOrientations(
         [DeviceOrientation.portraitUp,DeviceOrientation.portraitDown])
         .then((_) {
       runApp(LoginScreen());
     });
    }

**Validation check**

**验证检查**

![Validation Check][]

**Enter name** TextFormField need to check as below:

**输入名称** TextFormField需要检查如下：

child: TextFormField(
    decoration: InputDecoration(
    labelText: 'Enter name',
    ),
    validator: validateName,
    onSaved: (String val) {
    _name = val;
    },
    ),
     
    String validateName(String value) {
     if (value.length < 1) {
       return 'Please enter valid name';
     } else {
       return null;
     }
    }

**Enter password** TextFormField need to check as below:

**输入密码** TextFormField需要检查如下：

child: new TextFormField(
    decoration: InputDecoration(
    labelText: 'Enter password',
    ),
    validator: validatePassword,
    onSaved: (String val) {
    _password = val;
    },
    obscureText: true,
    ),
     
    String validatePassword(String value) {
     if(value.length<5)
       {
         return 'Password length should be greater than 5';
       }
    }
     
    OnLogin button click 
     
    RaisedButton(
    padding: EdgeInsets.all(10.0),
    color: Colors.green,
    child: Text("Login"),
    onPressed: _validatInputs,
     //start a new activity
    ),
     
     
    void _validatInputs() {
     if (_validateKey.currentState.validate()) {
       _validateKey.currentState.save();
       //start a new activity
       Navigator.push(_mContext,
         MaterialPageRoute(builder: (context) => AnimationScreen()),);
      
     }
    }
     
    }

Comment down below if you have any queries related to above article.

如果您有与上述文章相关的任何疑问，请在下面评论。

**Author Bio:**

**作者简介：**

Atman Rathod is the Co-founder at [CMARIX TechnoLabs Pvt. Ltd.][], a leading web and mobile app development company with 13+ years of experience. He loves to write about technology, startups, entrepreneurship and business. His creative abilities, academic track record and leadership skills made him one of the key industry influencers as well.

Atman Rathod是[CMARIX TechnoLabs Pvt][CMARIX TechnoLabs Pvt. Ltd.]的联合创始人[。][CMARIX TechnoLabs Pvt. Ltd.] [Ltd.][CMARIX TechnoLabs Pvt. Ltd.]是一家领先的网络和移动应用程序开发公司，拥有13年以上的经验。 他喜欢撰写有关技术，创业公司，企业家精神和业务的文章。 他的创造力，学术往绩和领导能力使他也成为关键的行业影响者之一。

**Social Links:**

**社交链接：**

Linkedin –[https://www.linkedin.com/in/rathodatman/][https_www.linkedin.com_in_rathodatman]

Linkedin- [https:][https_www.linkedin.com_in_rathodatman] //www.linkedin.com/in/rathodatman/

Twitter –[https://twitter.com/RathodAtman][https_twitter.com_RathodAtman]

Twitter – [https://twitter.com/RathodAtman][https_twitter.com_RathodAtman]

Skype: atman.rathod

Skype：atman.rathod

Medium: [https://medium.com/@rathod.atman][https_medium.com_rathod.atman]

媒介： [https][https_medium.com_rathod.atman] : [//medium.com/@rathod.atman][https_medium.com_rathod.atman]

Facebook: [https://www.facebook.com/CMARIXTechnoLabs/][https_www.facebook.com_CMARIXTechnoLabs]

面子书： [https][https_www.facebook.com_CMARIXTechnoLabs] : [//www.facebook.com/CMARIXTechnoLabs/][https_www.facebook.com_CMARIXTechnoLabs]

> 翻译自: [https://www.thecrazyprogrammer.com/2019/04/introduction-to-flutter.html][https_www.thecrazyprogrammer.com_2019_04_introduction-to-flutter.html]

flutter开发桌面应用

[1779d794f83b662a2636491faf776bb0.png]: /images/20221123/b8526c152bd74a529a98e9e6aca44634.png
[mobile app development]: https://www.cmarix.com/mobile-application-development-services-india.html
[Software Development Kit]: https://rapidapi.com/blog/api-vs-sdk/
[develop native Android]: https://www.cmarix.com/building-android-apps-using-react-native-key-benefits-challenges-know/
[OEM SDKs]: /images/20221123/3a8ff4fe42374921852def5d2eef3e89.png
[Reactive Method Of Working]: /images/20221123/1429e2c2c68440c9b8932b6649aebf27.png
[The Cross-Platform Approach Of Working]: /images/20221123/62912a88141b49339939604d109d5ce5.png
[Flutter Approach]: /images/20221123/096eb284938e4f35a52556e782d4443f.png
[Widget catalog in flutter]: https://flutter.dev/docs/development/ui/widgets
[Google Trend Comparison between React Native and Flutter]: /images/20221123/bd4cdc22ba3f457bb34ba84c76dcf2fb.png
[flutter installation step 1]: /images/20221123/399762dc711149a9944d605d0e3ec998.png
[flutter installation step 2]: /images/20221123/b37e66238f534566a1e09021f9cf7574.png
[https_flutter.dev_docs_get-started_install_linux]: https://flutter.dev/docs/get-started/install/linux
[flutter login page]: /images/20221123/b1bfc786209940b7ab9555eac919f1c3.png
[Validation Check]: /images/20221123/c02d757e4f2a486bba660143c857c04e.png
[CMARIX TechnoLabs Pvt. Ltd.]: https://www.cmarix.com/
[https_www.linkedin.com_in_rathodatman]: https://www.linkedin.com/in/rathodatman/
[https_twitter.com_RathodAtman]: https://twitter.com/RathodAtman
[https_medium.com_rathod.atman]: https://medium.com/@rathod.atman
[https_www.facebook.com_CMARIXTechnoLabs]: https://www.facebook.com/CMARIXTechnoLabs/
[https_www.thecrazyprogrammer.com_2019_04_introduction-to-flutter.html]: https://www.thecrazyprogrammer.com/2019/04/introduction-to-flutter.html