The Flutter barcode SDK series is coming to the end. This week, we switch the coding environment to macOS to finish the rest of the plugin platforms - iOS and macOS - using Swift.
The Series of Flutter Barcode SDK
Download
- Dynamsoft Barcode Reader
Flutter Barcode and QR Code Plugin for iOS
How to install and setup Flutter on Mac - Part 1In this series, we introduce you to the joys of working with Flutter and Dart to build iOS and Android apps w. This page describes how to download the Dart SDK. The Dart SDK has the libraries and command-line tools that you need to develop Dart command-line, server, and non-Flutter web apps. For details, see the Dart SDK overview. As of Flutter 1.21, the Flutter SDK includes the full Dart SDK. Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. Setting the Site URL on mac. Adding App Icon on mac. Setting App Name on mac. Firebase on mac. Change Package Name. First, download the Flutter here: https. Flutter Flutter - Beautiful native apps in record time. Design beautiful apps. Productively build apps. Create faster apps. Target mobile, web, & desktop apps. Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.
As always, we add the iOS template to the existing plugin project first:
The command generates a flutter_barcode_sdk.podspec file for build configuration and a Classes folder containing code implementation.
You can either set vendored_frameworks or dependency for linking in flutter_barcode_sdk.podspec. The difference is vendored_frameworks are the paths of the framework bundles shipped with the plugin, whereas setting dependency triggers pod install if the framework is not locally cached. If you have trouble in building the project with dependency, vendored_frameworks could be the alternative. The only problem of using vendored_frameworks is you cannot publish the package to pub.dev if the package size is over 100 MB.
Next, we open Classes/SwiftFlutterBarcodeSdkPlugin.swift file to start coding.
Here is the code snippet for importing and initializing Dynamsoft Barcode Reader:
The organization ID 200001 authorizes developers to use the SDK for 7 days.
The public func handle() function is used to handle Flutter method call:
We can implement the corresponding methods as follows:
Before testing the plugin, we have to open example/ios/Runner.xcworkspace in Xcode to configure the signing certificate. After that, we can run flutter run in terminal to launch the barcode scanner demo app. No extra Flutter code needed, because the Dart code for UI is shared between Android and iOS:
Flutter Barcode and QR Code Plugin for macOS
Once the Flutter barcode plugin is done for iOS, developing the plugin for macOS is much easier. Probably you have noticed that there is no framework for macOS but only dylib. To utilize the barcode SDK for macOS, we need to create a bridging header.
Here are the steps:
Add the Flutter macOS template to the current plugin project:
Create a bridging header
macos/Runner/Runner-Bridging-Header.h:Set the path of the bridging header in Xcode:
Copy the Swift code from
ios/Classes/SwiftFlutterBarcodeSdkPlugin.swifttomacos/Classes/FlutterBarcodeSdkPlugin.swift.
Although the macOS application can now run successfully, it will fail to access files due to the sandbox restriction. To enable loadings file via file path string, we disable the entitlementcom.apple.security.app-sandbox in example/macos/Runner/DebugProfile.entitlements:
Finally, the Flutter macOS barcode reader can work perfectly. Let’s test it with a distorted QR Code image:
Ending
So far, the Flutter barcode SDK has covered Windows, Linux, macOS, iOS, Android, and web. It will also support Fuchsia OS in the near future.
Source Code
Image designed by Giridhar Reddy Vennapusa
Flutteris an open source mobile app development SDK from Google, used to build beautiful Native Android and iOS apps with a single codebase. Dart is the language used to develop Flutter apps.
Flutter is now out of beta andFlutter 1.0 was announced on Dec 4th.
This article covers how to install Flutter and the development environment, and also shares solutions for the most common requirements and issues faced in Flutter app development. The process below is more helpful for Android developers who want to try their hand at Flutter app development.
#1 —Setup
IDEs used to develop Flutter apps
Installation of Flutter
- Download Flutter Zip file.
- Extract Zip file.
- Add Flutter tool to the path from the terminal.
$ export PATH = $PATH: 'PWD'/flutter/bin
PWD → Present Working Directory.
This is a temporary path setting, so when you restart your system, you have to set the Flutter tool path again.
Note: To set the Flutter path permanently in MacOS and avoid setting on every restart, do as shown below in your MacOS terminal.
- touch .bash_profile
- open .bash_profile
- $ export PATH=$PATH: 'PWD'/flutter/bin
“PWD” → Present Working Directory.
To verify Flutter installation and version
- flutter doctor -v
#2— Android Studio Configuration
Installation of Android Studio
To run the app in Android Emulator, you must install Android Studio to get the Android SDK and emulators.
- Download Android Studio and run the .dmg file. It will automatically install the latest Android SDK.
Add Dart Plugin to Android Studio
If you prefer to use Android Studio as your main IDE to develop Flutter, you have to set dart language support to Android Studio as shown below. From here we will be focusing more on Android Studio setup, but you could also use Visual Studio Code or IntelliJ (which is similar to Android Studio).
- Preferences → Plugins → Browse Repository → type Dart in search bar → Install and Restart Android Studio.
Add Flutter Plugin to Android Studio
- Preferences → Plugins → Browse Repository → type Flutter in search bar → Install and Restart Android Studio.
Create Android Emulator
- Tools → AVD Manager → Opens a window
- Select → Create Virtual Device
- Phone → Nexus 5X 5’2″ → Oreo x86 → Android 8.0 → AVD Name(Nexus 5X API 26) → Finish
- Select Nexus 5X API 26 emulator → click on Launch AVD(start) button
#3— iOS Simulator Setup
Installation of Xcode
- To execute the app in iOS simulator, we must install Xcode. Get Xcode from App Store and install.
Launch iOS Simulator from Android Studio
- You can see the Flutter Device Selection button below the toolbar in Android Studio.
- If you have already installed Xcode, clicking the Flutter Device Selection button opens the iOS simulator.
Useful iOS Simulator Commands
- Return to Home → Cmd+Shift+h
- See Recent Apps →Cmd+Shift+h+h
- Quit Simulator→Cmd+q
#4—Using Terminal to Run on Emulator or Simulator
Execute Flutter Apps from Terminal
- Run From Terminal → flutter run
- Run in all devices → flutter run -d all lib/welcome.dart
If your system is connected with multiple devices then, check the connected devices with this command → flutter devices
Running above command will list devices like below
SM G890UU • 4299a0c86788f678 • android-arm • Android 7.0 (API 24) (emulator)
Run in the selected device → flutter run -d 4299a0c86788f678
Check the specific design/run particular dart file in a selected device → flutter run -d 4299a0c86788f678 lib/main.dart
#5 — Flutter Project Structure
In this article, I am using Flutter with Android Studio.
Flutter Project Structure
In the Project section, the above screenshot shows the structure of the Flutter app.
- android: Has all the Android related files.
- iOS: Has all the iOS-related files.
- lib: Has all the dart files. This is the main folder, where we can write all the application code.
- test: Has all the testing code.
- images: I created this folder. This has all the images we used in our application.
- pubspec.yaml: Has all the third party dependencies and the assets we use in our application.
yaml — Yet Another MultiColumn Layout.
Add dependencies and images in pubspec.yaml file
flutter_rating is the third party dependency.
We have to specify assets in the pubspec.yaml. We can
specify file path with folder name and file name or only the folder name.
images/apple.jpeg → we can use only apple.jpeg image.
images/ → we can use all images that are in the images folder.
Make sure that dependencies are properly aligned with spaces. Otherwise, the images won’t display. This particular issue is hard to figure out if you are fairly new to Flutter or YAML.
#6 — How to Change App Name
In Android
Android folder → app → src → main → Open Manifest → change the label in Application tag.
android:name=”io.flutter.app.FlutterApplication”
android:label=”flutter_android_app”/>
In iOS
iOS folder → Runner → info.plist → Edit the string under CFBundleName
<key>CFBundleName</key>
<string></string>flutter_ios_app
#7 — How to Change App Icon
In Android
Expand the Android folder → app → src → main → res → add app icons in mipmap folders.
Expand the Android folder → app → src → main → open Manifest → change the icon in Application tag.
android:name=”io.flutter.app.FlutterApplication”
android:label=”flutter_android_app”
android:icon=”@mipmap/ic_launcher”>
In iOS
Expand iOS folder → Runner → Assets.xcassets → AppIcon.appiconset
In that folder add all app icons.
Expand iOS folder → Runner → Assets.xcassets → AppIcon.appiconset → update the Contents.json file.
#8 — How to change Splash Image
In Android
Expand Android folder → res → drawable → add image
Expand Android folder → res → drawable → in Launch_background.xml, add bitmap tag.
<item></item>
android:gravity=”center”
android:src=”@drawable/ios_android” />
Flutter Download For Mac
In iOS
Expand iOS folder → Runner → Assets.xcassets → LaunchImage.imageset → add all sizes of splash images in the folder
Expand iOS folder → Runner → Assets.xcassets → LaunchImage.imageset → → open Contents.json → change file name
Download Flutter For Mac
Download Manager For Mac
I hope the above setup instructions and advice on how to set a few basic requirements are useful for beginners in Flutter app development. As Flutter is now out of beta, I look forward to seeing more and more developers using Flutter for developing Android and iOS apps with a single codebase. For motivation, check out this Widgets Library website built by the Flutter community.