How To Build Desktop App With Flutter
Sagar PatelAugust 22, 2022 208 Views
Quick Summary : This assignment shows how to build desktop app with Flutter. It shows how to use the Flutter SDK to develop a desktop application.
Google offers the open-source framework Flutter. A framework is software that forms the basis of application development and has many useful functions when developing applications.
One of the features of Flutter is that you can develop applications that are independent of OS and screen size. Flutter is a service positioned as a “mobile application framework,” and it is possible to share the same source for different OSs such as “Android” and “iOS” and build mobile applications at the same time. Some slight differences may occur due to Plugins, hardware support, and build environment. Flutter is the best programming language for desktop applications.
In addition, Flutter can reflect code change confirmations called “hot reloads” and “hot restarts” without a full rebuild, enabling fast application development. In addition, it has many functions that companies need, such as a flexible user interface (UI) that can be freely customized. There are different types of desktop applications.
Create a Desktop Application using Flutter
What we will do first?
Here, we will learn to develop a Flutter web application which connects to the GitHub API to obtain repositories, pull requests and assigned issues. This article uses code generation to produce a type-safe client library for the GitHub API and produces a plugin that communicates with native APIs and desktop programs.
Set up the Flutter environment in Windows
Development should be done on the platform you plan to deploy. So, to get access to the proper build chain, if you are creating a Windows desktop application, you must do so in Windows.
The Flutter SDK & an editor are two pieces of software necessary for building all OSs.
Let’s start the development
- Start developing desktop applications with Flutter
- Desktop support requires a one-time configuration adjustment to be set up.
- Verify the desktop version of Flutter is enabled.
If you don’t see the desktop line that corresponds to the output above, check the following
- Are you creating for the platform you’re creating for?
- flutter config Does it show that macOS is enabled-[os]-desktop: true enabled in?
- flutter channel Will you see either demand as the current channel when you run? This confirmation is necessary.
You can easily start coding Flutter for your desktop app by creating a flutter desktop app project using the Flutter command-line tools. The IDE may also provide a workflow for creating Flutter App Development from the UI.
Run the default Flutter application as a desktop program to ensure it functions: Alternately, you might open this project in the IDE and run your program using its features. Thanks to that work, you should have no choice but to run it as a desktop application.
You should see an application window on your screen that looks like this: Click the floating operation button to verify that the increment is working as expected.
Authenticate on your desktop.
When using Flutter on Android, iOS, and the web, there are many options for authentication packages to build a desktop app. We need to build authentication integration from scratch at the moment, but things change as package authors implement desktop Flutter support.
Register your GitHub OAuth application
To create desktop applications that use the GitHub API, you must first authenticate. There are several options, but to provide the best experience for the user, we recommend directing the user to her OAuth2 login flow on her GitHub in the browser. This allows you to handle the two-step verification process and is easy to integrate with your password manager.
To register your application with the OAuth2 flow on GitHub, go to github.com and follow only the first steps to build an OAuth App on GitHub. The following procedures are crucial if you launch an application.
At the end of creating an OAuth app, you’ll be prompted to specify an authentication callback URL. For desktop apps, enter “for the callback URL http://localhost/. The GitHub OAuth2 flow was configured to allow any port and run the web server on the ephemeral local high port by defining a callback URL for localhost. This eliminates the need for the user to copy her OAuth code token to the application during the OAuth process.
When you register your OAuth app in the GitHub management interface, your client IDAnd client secrets are given. You can obtain these values from GitHub’s Developer settings if you need them later. Your application must use these credentials to create a valid OAuth2 authentication URL. Use the Flutter plugin oauth2 to launch the user’s web browser and the Dart package to manage the OAuth2 flow.
To pubspec.yaml, add oauth2 and URL launcher.
Pub flutter adds. You should add package dependencies for your program.
Add the client Ids
Add the client credentials to the new file.
Create a desktop OAuth2 flow
Create a widget with a desktop OAuth2 flow. This logic is a bit complicated. First, launch a temporary web server and redirect the user to her GitHub endpoint in a web browser. After that, you must wait for this user to finish the browser’s authentication procedure and handle the redirect request from GitHub. The code in this redirect call must be converted to his OAuth2 token by calling the API server on GitHub separately.
Tip: lib/src it’s a good idea to put your implementation-specific code in a directory. The top lib directory is for the package’s external interface.
It’s worth spending some time on this code as you can see the ability to use Flutter and Dart on your desktop. The code is complex, but many features are encapsulated in widgets that are relatively easy to use.
This widget sends secure HTTP queries and exposes a temporary web server. Both functionalities on macOS must be requested via the entitlement file.
Modify client and server privileges (macOS only)
Put Everything Together (The final step of OAuth Authentication)
At this point, you’ve set up your new OAuth app and the packages and plugins you need for your project. I also created a widget that encapsulates the OAuth authentication flow. Additionally, we leveraged entitlements to enable the program to function on macOS as both a network client and a server. Put all the parts you need for lib/main.
The GitHub OAuth login flow button will be the first thing you see when launching this Flutter application. After clicking the button and completing the login flow in your web browser, the app will be logged in.
Now that you’ve learned OAuth authentication, let’s use the GitHub package.
Let’s Use GitHub Package
- Connect to GitHub
- The OAuth authentication flow got the token needed to access the data on GitHub. To facilitate this task, use the package available at the pub.dev GitHub.
- With GitHub packages, use OAuth credentials.
- The one created in the previous step provides the GithubLoginWidgetability to interact with the GitHub API.
- Put everything together (second time)
- Now integrate the GitHub client into lib/main.dartyour files.
- After clicking this button and completing the login flow in your web browser, you will be logged in to the app.
- The next step is to eliminate the inconveniences in your current code base. Bring the program back to the foreground after completing the web browser authentication.
Make Linux, Mac, and Windows plugins for Flutter.
Fix the problem and inconveniences
The current code has some inconveniences. After the authentication flow, the web browser page is still displayed when GitHub authenticates the application. Ideally, the application should automatically reload for you. To fix this problem, you must develop her Flutter plugin for your desktop platform.
Make plugins for Flutter for Windows, Mac, and Linux.
Native code is required to automatically bring the application to the front of other application windows after the OAuth flow is complete. For macOS, the required API NSApplicationis activate (ignoringOtherApps:)instance method of. For Linux, gtk_window_presentuse Stack Overflow for Windows. You must develop a Flutter plugin to use these APIs.
View repositories, assigned issues and pull requests
Building this application has gone a long way, but all you can do is tell it to log in. Now let’s add the ability to view repositories, pull requests, and assigned issues.
Add the Last Dependency.
When rendering the data from the above query, you can easily view Octicons on GitHubfluttericon by using an additional package.
Screen-Rendering Widget For the Outcome
To grant your widget a view of the repository, pull requests and assigned issues, from your Flutter project, use the GitHub package you added above, NavigationRail. The navigation rails provide an ergonomic way to move between key transitions within your application, as described in the Material.io design system documentation.
Put Everything Together (Last)
Now merge GitHubSummaryinto lib/main.dart the file. The upcoming changes are very big, but most of them are removals. lib/main.dartReplace the contents of the file as follows:
It’s all done now
After completing this, I created a Flutter application for the desktop that accesses the API on GitHub.
For more information on the desktop version of Flutter, see Flutter.dev/desktop. Finally, for a completely different example of using Flutter and GitHub, see GitHub-Activity-Feed by GroovinChip.
Benefits of Flutter
Products (Apps) Can be Developed With a Single Code
You may create iOS and Android applications with Flutter and a single code base. With the hot reload (automatic reload) function, it is possible to reload the application in “1 second from code correction”, and high-speed development is realized by speeding up and standardizing common code and debugging.
Full Documentation on Services
Flutter has a lot of documentation about the service. There are many official Google documents, so it is easy to solve what you do not understand. However, most of the documents are in English, so in reality, it is recommended to use Flutter community to answer any questions. In addition, Flutter is also nice because it has a lot of sample code.
The Layout Construction is Possible Based on Widgets.
Flutter is a specification that built an IOS application by combining “wegetts (parts).” Widgets are so versatile that you can quickly and flexibly create any layout that suits your needs.
Smooth Specification Changes are Possible.
In native application development, if you change the layout, you need to debug again and verify the result. Still, you can see the change result immediately using Flutter’s hot reload.
In addition, Flutter builds the layout based on the code, so you can easily change the specifications by simply rewriting the code. Of course, the designer himself needs to understand his Flutter and his widgets, but the fact that he can reduce the man-hours for layout changes and make smooth specification changes is a big advantage of his Flutter.
Reduction of Maintenance & Operation Costs of Flutter
Expenditures associated with operation and maintenance can be decreased in addition to the initial development costs. In native development, the Android app engineer is in charge of maintenance and operation of the Android app, and the iOS app engineer is in charge of the iOS app. As the operation increases, the maintenance and operation costs will increase accordingly. However, in the case of cross-platform development, since multiple mobile apps are run with one source code, the corresponding operation is reduced, and the cost is inevitably reduced.
It Is Resistant To Specification Changes And Can Reduce The Man-hours Required For Testing
In native development, after changing the source code, it was necessary to restart the mobile app, and it took a long time to confirm the change. Flutter has a Hot Reload function that allows you to reload (update) a mobile app under development in seconds. The hot reload function is a function that reflects the change in the mobile application immediately when the source code is written. This reduces the hassle of checking for changes that occur in native development.
Google Recommended Material Design
Flutter uses Google’s material design. Material design means a design advocated by Google in 2014 that allows users to understand and operate the UI (user interface) intuitively. Since the app based on Material Design is easy to see and intuitive to operate, it also affects the conversion rate (contract rate).
It Can Be Utilized For Web Services As Well As Mobile Applications
Originally, to develop web services, development languages such as “Python,” “Java,” “Ruby,” and “C #” were required, but Flutter can be used not only for mobile applications but also for web services. I can do it.
Therefore, once you develop an application with Flutter, you can use it on iOS / Android and web app services to expand the range of users.
However, please note that depending on the application’s content, it may not be possible to use the same source code as a web service.
Products (Apps) That Use Flutter
Google Ads is a product (app) provided by Google, and it is possible to check the reaction status of mobile app ads in real-time. The high level of service of Flutter can be seen in the fact that Google uses it to develop its services.
PostMuse is a free photo editor app that allows you to create Instagram images and stories. It is compatible with iOS and Android OS, and his Flutter is adopted on the back side of the product (app).
The cowl is a housing search product (app) specializing in condominium purchases. It has many useful functions such as searching for a property that suits the user, entering desired conditions and AI suggesting the most suitable condominium, and easily applying for a tour via the app. increase.
InKino is a product (app) that allows you to check the screening schedule of Finnkino movie theatres and purchase tickets. Currently available exclusively on Google Play (Android), it covers all the information about Finnkino Cinema.
In this article, we have introduced the basic contents of Flutter, its advantages and disadvantages, what you can do, and the products (apps) you are using.
Since Flutter has its strengths and weaknesses, it is important to check Flutter’s service characteristics and your application requirements in a complex manner and make a careful development plan.
For example, you can use a development support tool called “Flutter DevTools” to examine the UI layout and state of your Flutter app, diagnose performance issues, and even debug.
Written by: Sagar Patel
Sagar Patel is the CTO and Co-founder of Groovy Web. He was involved in the telecommunications & Automation industry during his early career. Still, due to his attitude toward learning anything new and mastering it, he now works as a CTO for Groovy Web. Through their business mindset and logical approach, they have taken their company to the next level; His responsibilities now include all aspects of the business. Among them are finance, process design, and development.
Frequently Asked QuestionsWe hope these clear your doubts, but if you still have any questions, then feel free to write us on email@example.com
Flutter Folio is a multi-platform Flutter software that works well on mobile, web, and desktop platforms.
Flutter is a cross-platform SDK that can be used to create frontend and backend apps in a range of programming languages such as Dart, Java, C/C++, and others.
Definitely. Flutter offers benefits such as a single code base, application testing, framework maturity and support, third-party support, efficient performance, and more, making it suitable for projects of any size - large or small.
Flutter is an open-source, cross-platform mobile app development framework with a large Google open-dev community that allows you to create feature-rich apps for both the Android and iOS platforms with a single line of code. The plethora of bespoke libraries available in Flutter aid in the development of corporate apps with stunning animations, transitions, faster performance, responsiveness, and so on.
Sign up for the free NewsletterFor exclusive strategies not found on the blog