Content Source:
- freecodecamp.org
How to improve the performance of your React Native App
React-Native(RN) apps suffer huge performance issues as compared to native apps. During initial development days, such challenges are ignored but as soon as the app grows developers find it difficult to improve. Sometimes, extreme calls to dump the RN app happen. We can escape such steps and you can easily improve the RN app performance, just with little effort.
There are multiple ways to improve RN app performance:
Basics of RN performance:
Hermes: A JS engine to optimizes app start time, reduce APK size, and memory footprints. Follow this guide to setup for your app.
Remove Arrow functions: Every render creates new instances of these functions. When passed to children, it will re-render the child components even when nothing has changed in them.
Simple Reducers: Reducers are just to dispatch store changes, not for complex code logic, avoid that as much as possible.
Use native driver: Enable useNativeDriver=true for all the animations that you use in the app.
Memoization:
React.PureComponent: This works for class components. It does a shallow comparison for the previous and new props, re-renders if they are not equal.
React.memo: Only functional components can leverage this functionality, and works similar to React.PureComponent. React.memo comes with an option to use a custom comparison function, to provide more control over it. For the child functional components use React.memo export const ChildrenMemoComponent = React.memo(ChildFunctionComponent) to memoize.
Whenever parent component props change children’s components are also re-rendered causing huge performance issues. This can be avoided either by using shouldComponentUpdate(), React.PureComponent, React.Memo. Memoization breaks if React creates new functions instances when child component is passed with callback functions from parents. New function instances are created with inline function calls, arrow functions, functions calls inside render. For function component use useCallback hook and for class component define functions outside render and pass references to children.
Memory leaks:
Debugger warnings and errors: You need to get rid of them, just enable debugging, remove (console.disableYellowBox = true) and fix all the warnings, promise rejections, key errors and other errors too.
Android Studio Profiler: Great tool to find memory leaks in the app. In the below image, the bottom section has lots of bin icons(white color icons) that when android running its garbage collector and repeated icons indicate memory leaks. Perform actions in your app, debug them and fix asap.
Android Studio Profiler
Pic courtesy: medium.com
React-DevTools: React Profiler provides in-depth component-level leak detection, though it supports RN version ≥ 0.57. Profiler API helps in optimizations like memoization, cost of rendering, sluggish code, re-renders. Go through the docs to check how to integrate it with your app.
Inspecting using React-DevTools
Pic courtesy: medium.com
Inspecting RN bridge: RN Bridge works asynchronously and converts javascript queries as JSON, finally calling the natives modules. We are leaving for you to check out how to do this, there are numerous great articles on this, We will write more on this later.
Stay updated:
Keep your libraries, React version updated to the latest stable versions:
React-native upgrade helper: RN community provides awesome documentation for upgrading RN versions. Major updates are between v0.60.0 and v0.63.0, there will be more errors you will need to fix. Do check out what’s new with v0.64 here.
Upgrade libraries & dependencies: A time-consuming process, during RN update also keep React in mind and upgrade accordingly, v17.0.0 has major changes. For every dependency you upgrade follow the below process:
- Package.json: Segment out the major and minor version upgrades using npm website, “^”(^2.1.2 will use releases from 2.1.2 to <3.0.0) and “~”(~2.1.2 will use releases from 2.1.2 to <2.2.0). For minor version just replacing the version name will do the work. For Major version upgrades check out the version release documentation for breaking changes.
- Code changes: After upgrading the version inside package.json make suitable code changes using Github document and release notes.
- Remove junk: This is also the right time to clean your app code. Try to remove unused codes, folders, files, and dependencies from package.json. Also, to reduce your assets, there is a great tool that does lossless compression, ImageOptim.
That’s 90% of your whole performance improvement job. There are other ways like amalgamation of native code and RN code but we will leave that for some other time.
For more information and to develop mobile application using React Native, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.
To develop a custom mobile application using React Native, please visit our technology page.
Content Source:
- medium.com
Announcing XD to Flutter v2.0!
Flutter is Google’s open-source UI toolkit for building beautiful apps for mobile, desktop, web, and embedded devices from a single codebase. Over the last couple of years, it has become the leading choice for developers who want to build apps for multiple platforms; but designers need a visual tool for prototyping and creating Flutter UI, rather than handcrafting Dart source code. Enter XD to Flutter!
It’s been almost a year since the first preview release of the plugin, and we’ve continued to refine and improve it with a handful of minor updates, a major v1.0 launch last summer, and now a v2.0 release to match with the launch of Flutter 2!
Wait, what is XD to Flutter?
The name probably gives it away, but the XD to Flutter plugin is a powerful, easy-to-use tool to export your stunning Adobe XD designs into clean, functional code for Flutter. You can copy code for specific visual elements from your design, export reusable widgets, or even entire views.
That means that, with the XD to Flutter plugin, you can get your designs running on virtually any device with the click of a button. It’s not going to code your whole app for you, but it’ll give you a head start.
XD to Flutter is built by gskinner in partnership with Adobe, and is published as a plugin for Adobe XD itself, so you can use it with any existing Adobe XD design you’re building.
Awesome! So what’s new?
The initial release of XD to Flutter had great support for outputting all the different visual elements in a design — vector graphics, images, rich text, background blurs, blend modes, shadows, and similar — but the result could be static and inflexible.
While it was handy for grabbing an icon or text style, we wanted it to do more! XD empowers designers to create dynamic UIs, with tools like responsive layout, scrollable areas, stacks, and grids; we want the plugin to support every one of those capabilities, and with v2.0 we’ve made a lot of progress.
Responsive Resize
XD to Flutter supports the responsive layout features of XD, which lets you “pin” elements within their enclosing parent and precisely control how they resize.
Responsive design in Adobe XD
Pic courtesy: medium.com
Responsive resize in Flutter
Pic courtesy: medium.com
This is achieved in Flutter by using a custom Pinned layout widget in the open-source adobe_xd package that developers can leverage directly in their projects.
Pinned widget code example
Pic courtesy: medium.com
Stacks & Scroll Groups
“Stacks” and Scroll Groups provide new ways to lay out content on-screen dynamically in Adobe XD. Stacks in XD let you arrange a bunch of different elements in a horizontal or vertical list, with varying spacing between them; they are more similar to a Flex widget in Flutter than their namesake Stack widget.
Scroll Groups predictably let you define an area to scroll a larger group of content vertically or horizontally, right inside your design.
XD to Flutter v2.0 supports both of these features, converting them into common Flutter widgets (Column, Row, and SingleChildScrollView). You can even put a stack into a scroll group to easily create a scrolling list of items.
Stacks & Scroll Groups in XD (left) and Flutter (right)
Pic courtesy: medium.com
Padding & Background Elements
Another new feature is background elements, which let you designate a visual element as the background for a group. This can be paired with padding to space the background’s edges from the content.
The Flutter export uses a Stack widget to layer the background element behind the content, which is placed into a Padding widget.
Padding & Background in XD (left) and Flutter (right)
Pic courtesy: medium.com
Flutter 2 & null safety
The layout features described above enable much more responsive UI, complimenting Flutter 2’s increased support for form factors like desktop and web.
Flutter 2 also introduces sound null safety — a language feature that helps developers catch nullability issues before they cause problems in apps. XD to Flutter v2.0 includes a new setting to “Export Null Safe Code”, ensuring that the generated code is future-ready.
“Export Null Safe Code” setting and output
Pic courtesy: medium.com
Sounds great! How do we get started?
Whether you’re using it to copy the code for a tricky gradient, or to export fully responsive, parameterized, interactive widgets, it’s simple to join the thousands of creative professionals that are already using the XD to Flutter plugin.
You can install it by selecting “Browse Plugins…” from Adobe XD’s “Plugin” menu and searching for “Flutter” (strangely, searching for “XD to Flutter” doesn’t work),
Pic courtesy: medium.com
Once you have it installed, open the XD to Flutter panel from the plugins panel, and tap the “Need help?” link to check out the plugin documentation.
Flutter 2 is an exciting step forward for the framework, with a focus on building beautiful apps that run virtually anywhere. At gskinner, we’re thrilled to be working with Adobe and Google to ensure that XD to Flutter continues to make the process of faithfully translating a delightful design to a working product even easier.
Stay tuned for more exciting updates to the plugin soon!
For more information and to develop mobile apps using Flutter, Hire Flutter Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop Mobile Apps using Flutter, please visit our technology page.
Content Source:
- medium.com
What’s new in Flutter 2
Web
As of today, Flutter’s web support has transitioned from beta to the stable channel. With this initial stable release, Flutter pushes reusability of code to another level with the support of the web platform. So now when you create a Flutter app in stable, web is just another device target for your app.
By leveraging the web platform’s many strengths, Flutter built a foundation for building rich interactive web applications. We primarily focused on performance and improvements to our rendering fidelity. In addition to our HTML renderer, we added a new CanvasKit-based renderer. We’ve also added web-specific features, such as a Link widget, to make sure your app running in the browser feels like a web app.
Find more details about this stable release in Flutter’s web support blog post.
Desktop
In this release, we’re pleased to announce that Flutter’s desktop support is available in the stable channel under an early release flag. What this means is that we’re ready for you to give it a try as a deployment target for your Flutter apps: you can think of it as a “beta snapshot” that previews the final stable release coming later this year.
To bring Flutter desktop to this degree of quality, there have been improvements both big and small, starting with working to ensure that text editing operates like the native experience on each of the supported platforms, including foundational features like text selection pivot points and being able to stop propagation of a keyboard event once it’s been handled. On the mouse input side, dragging with a high precision pointing device now starts immediately instead of waiting for the lag needed when handling touch input. Also, a built-in context menu has been added to the TextField and TextFormField widgets for Material and Cupertino design languages. Finally, grab handles have been added to the ReorderableListView widget.
The ReorderableListView now has grab handles for easy drag ’n’ drop with a mouse Pic courtesy: medium.com
The ReorderableListView now has grab handles for easy drag ‘n’ drop with a mouse
Pic courtesy: medium.comThe ReorderableListView was always good at moving items around with very little effort on your part as a developer, but it required the user to initiate a drag using a long-press. That made sense on a mobile device, but few desktop users would think to long-press on an item with their mouse to move it around, so this release includes a grab handle suitable for mouse or touch input. Another improvement for platform-idiomatic functionality is an updated scrollbar that shows up correctly for the desktop form-factor.
This release includes an updated Scrollbar widget that works great in a desktop environment Pic courtesy: medium.com
This release includes an updated Scrollbar widget that works great in a desktop environment
Pic courtesy: medium.comThe Scrollbar widget has been updated to provide the interactive features that are expected on the desktop, including the ability to drag the thumb, click on the track to page up and down, and to show a track when the mouse hovers over any part of the scrollbar. Furthermore, since the Scrollbar is themeable using the new ScrollbarTheme class, you can style it to match your app’s look and feel.
For additional desktop-specific functionality, this release also enables command-line argument handling for Flutter apps so that simple things like a double-click on a data file in the Windows File Explorer can be used to open the file in your app. We’ve also worked hard to make resizing much smoother for both Windows and macOS, and to enable IME (Input Method Editors) for international users.
Flutter desktop now supports intuitive IME input
Pic courtesy: medium.com
In addition, we have provided updated docs on what you need to do to begin preparing your desktop app for deployment to the appropriate OS-specific stores. Give them a try and please provide feedback if we’ve missed anything.
When it comes to trying the beta for Flutter desktop, you can access it by switching to the beta channel as expected as well as setting the config flags for the platforms you’re targeting according to the directions on flutter.dev. In addition, we’ve also made a snapshot of the beta bits available on the stable channel. If you use ‘flutter config’ to enable one of the desktop config settings (for example, enable-macos-desktop), then you can try out the beta functionality of the desktop support w/o having to go through the lengthy process of moving to the beta channel and pulling down all the latest beta of the Flutter SDK, building the tools, etc. This is great for giving it a try or using the desktop support as a simple “Flutter Emulator.”
However, if you choose to stay on the stable channel to access the desktop beta, you won’t get new features or bug fixes as quickly as switching to the beta or dev channels. So, if you’re actively targeting Windows, macOS, or Linux, we recommend switching to a channel that provides updates more quickly.
As we approach our first full production-quality release of Flutter desktop, we know we have more to do, including support for integration with native top-level menus, text editing that feels more like the experience of the individual platforms, and accessibility support, as well as general bug fixes and performance enhancements. If there are other things you think need doing before the desktop moves to production quality, please be sure to provide your feedback.
Google Mobile Ads to Beta
In addition to Flutter desktop moving to beta, today we’re excited to announce an open beta for Google Mobile Ads SDK for Flutter. This is a brand new plugin that provides inline banner and native ads, in addition to the existing overlay formats (overlay banner, interstitial, and rewarded video ads). This plugin unifies support for Ad Manager and Admob, so no matter what size publisher you are, this plugin can be tailored to your scenarios.
Pic courtesy: medium.com
We’ve been piloting this plugin with some of our early customers in a private beta program, and many of them have successfully launched their apps with these new formats. For example, Sua Musica (largest Latin American music platform for independent artists with more than 15k verified artists and 10M MAU) launched their new Flutter app with the Google Mobile Ads SDK for Flutter plugin. They saw an 350% increase on Impressions with a 43% increase on CTR and 13% increase on eCPM.
This plugin is available for you to use today. As part of Flutter Engage, Andrew Brogdon and Zoey Fan presented a session on “Monetizing apps with Flutter” (available on the Flutter Engage site), where they talk about monetization strategies for apps built with Flutter, and how you can load ads in your Flutter app. Moreover, we created a new Ads page on flutter.dev where you can find all helpful resources such as the plugin implementation guide, the inline banner and native ads codelab, and the overlay banner, interstitial and rewarded video ads codelab. Please be sure to check them out!
For more information and to develop mobile apps using Flutter, Hire Flutter Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop Mobile Apps using Flutter, please visit our technology page.
Content Source:
- medium.com
Flutter Windows Alpha is just announced
Windows remains a popular choice for desktop and laptop devices, with Microsoft reporting over one billion active devices running Windows 10. Our own statistics show that over half of all Flutter developers use Windows, so it’s a natural target for Flutter. Native desktop support opens up a variety of exciting possibilities for Flutter, including improved developer tooling, reduced friction for new users, and of course apps that can reach any device a user might have from a single codebase.
Adding Windows to Flutter
As described in our architectural overview, Flutter is a cross-platform UI toolkit that is designed to allow code reuse across operating systems such as iOS and Android, while also allowing applications to interface directly with underlying platform services. The goal is to enable developers to deliver high-performance apps that feel natural on different platforms, embracing differences where they exist while sharing as much code as possible. At the core of Flutter is the engine, which supports the primitives necessary to support all Flutter applications. The engine is responsible for rasterizing composited scenes whenever a new frame needs to be painted. It provides the low-level implementation of Flutter’s core API, including graphics, text layout, file and network I/O, accessibility support, plugin architecture, and a Dart runtime and compile toolchain.
Each new platform we add to Flutter expands the core framework with new services to enable it to shine on that platform. We started on Android and iOS with Material Design as well as a touch-based, mobile-centric user interface that is designed to be pixel-perfect on both mobile platforms. Adding support for desktop form factors with web, Windows, macOS, and Linux brings a whole new set of services, including robust support for keyboards, mice, mouse wheels and controllers on the input side as well as widgets that adapt or even work best at the larger screen sizes that come with web and desktop apps.
Furthermore, each new platform doesn’t just influence the Flutter framework and engine, but a lot of other things as well:
- Toolchain updates: adding a new target to the CLI and IDE tools (in this case Windows)
- Shell: support for handling input from Windows via WM_* messages and output via ANGLE, which uses Skia to render at native speed to an underlying DirectX surface
- Runner: every project gets a shell application for the supported targets. For Windows, it’s a Win32/C++ program that loads your Flutter code and executes it at runtime. It’s a good place to add native code to your app if you need it.
- Plugins: A plugin is a mixture of Dart code and native code for each of the platforms that the plugin supports. That native code needs to be added for each plugin that is compiled into your Flutter app on Windows.
This alpha release offers a solid foundation that we’ll stabilize over the coming months. With support for Windows 7 and above, we hope this gives adventurous developers something to get started with.
Getting started with Flutter for Windows
Get started by installing the Flutter SDK according to the Windows install instructions. To target Windows desktop, you first need to install the tooling described in the desktop docs. By default, Flutter assumes that you’re building production software and isn’t configured to develop Windows apps. However, that’s easily fixed from the command line:
$ flutter channel dev $ flutter upgrade $ flutter config --enable-windows-desktop
The first command sets Flutter to use the experimental-quality “dev” channel (instead of the “stable” channel, which is the default). This allows you to use platform support that’s still in alpha, like Windows. The second command pulls down the latest bits on that channel. The third command enables Windows app development on your PC.
Once you’ve set it up, every time you create a new Flutter app, using the extension support for either Android Studio or Visual Studio Code, or from the command line, it creates a windows subfolder.
Pic courtesy: medium.com
If you’re curious, running the default app on Windows looks like the following:
Pic courtesy: medium.com
And finally, once you’ve created your app, building it creates a release-mode, native EXE file as well as the necessary supporting DLLs. At that point, if you want to experiment with running your new Windows app on any Windows 10 machine, even those that don’t have Flutter installed, you can follow the steps to zip up the necessary files and go.
Plugins for Windows
Even though we’ve just reached the alpha release, the Flutter community has already been working on plugins for Windows. Here are a few:
- url_launcher: launch URLs in the browser from your app
- path_provider: find the path to special directions on the user’s machine like Documents or temp
- shared_preferences: keep user preferences serialized on disk between sessions of your app
- biometric_storage: storage encrypted by biometrics
- flutter_audio_desktop: play audio from your desktop apps
The benefit of using these plugins is that most of them also support other Flutter platforms, which enables you to target your apps at Android, iOS, web, etc. as well as Windows. Furthermore, while about one-third of the available packages on pub.dev (the package manager for Dart and Flutter) are plugins with platform-specific code, most are not. For instance, many of the highest quality and most used packages are part of the Flutter Favorite program and most of them work on Windows. If you’d like to see the full list of packages that run on Windows, you can run this query on pub.dev.
Interop with Windows
If you’d like to build your own plugins for Windows, you can. Once you’re on the dev channel and you have Windows enabled for your machine, you can get started with the following command:
$ flutter create --template plugin --platforms windows hello_plugin
At that point, you’ll be able to add your Flutter code to the lib subfolder and your Windows code to the windows subfolder in your plugin project. You’ll communicate between the two stacks using Platform Channels, which is essentially message passing between your Dart and C++ code. For a well crafted example of this, see the url_launcher implementation.
However, Platform Channels are not your only option for interop with Windows. If you like, you can use the Dart FFI (Foreign Function Interface) to load libraries and call into C-style APIs, such as the Win32 API. Unlike url_launcher, which uses Platform Channels, the path_provider plugin was implemented using FFI, as you can see in the GitHub repo. Instead of going back and forth between Dart and C++, FFI allows you to write code to import the API that you want directly. For example, here’s the code for calling the MessageBox API:
typedef MessageBoxNative = Int32 Function(
IntPtr hWnd,
Pointer<Utf16> lpText,
Pointer<Utf16> lpCaption,
Int32 uType
);
typedef MessageBoxDart = int Function(
int hWnd,
Pointer<Utf16> lpText,
Pointer<Utf16> lpCaption,
int uType
);
final user32 = DynamicLibrary.open('user32.dll');
final win32MessageBox =
user32.lookupFunction<MessageBoxNative, MessageBoxDart>('MessageBoxW');
void showMessageBox(String message, String caption) =>
win32MessageBox(
0, // No owner window
Utf16.toUtf16(message), // Message
Utf16.toUtf16(caption), // Window title
0 // OK button only
);
...
// call just like any other Dart function
showMessageBox('Test Message', 'Window Caption');
This code doesn’t incur the overhead of transitioning between two threads like Platform Channels. FFI includes support for many different kinds of APIs, including Win32, WinRT, and COM. But before you run off and wrap the entire C-based Windows API, please check out the win32 plugin, which is already well on its way to doing just that. In fact, the path_provider plugin was itself implemented using the win32 plugin.
For more information and to develop mobile apps using Flutter, Hire Flutter Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop Mobile Apps using Flutter, please visit our technology page.
Content Source:
- medium.com
What’s new in Flutter 1.2
Ongoing vision with Flutter is to provide a portable toolkit for building stunning experiences wherever you might want to paint pixels on the screen. With every release, we continue to push towards ensuring that Flutter is fast, beautiful, productive and open for every platform we support. In Flutter 1.20, which is released today to our stable channel, Flutter has improvements for every one of these four pillars.
Autofill for mobile text fields
One of the #1 most requested Flutter features for a while has been to support the underlying Android and iOS support for text autofill in Flutter programs. With PR 52126, we’re pleased to say that the wait is over — no more asking your users to re-enter data that the OS has already gathered for them.
Autofill in action
Pic courtesy: medium.com
You’ll be pleased to hear that we’ve already started adding this functionality for the web, as well.
A new widget for common patterns of interaction
This release introduces a new widget, the InteractiveViewer. The InteractiveViewer is designed for building common kinds of interactivity into your app, like pan, zoom, and drag ‘n’ drop, even in the face of resizing, which this simple Go board sample demonstrates.
Zooming, panning, resizing, dragging and dropping with the InteractiveViewer
Pic courtesy: medium.com
To see how to integrate the InteractiveViewer into your own app, check out the API documentation where you can play with it in DartPad. Also, if you’d like to hear about how the InteractiveViewer was designed and developed, you can see a presentation by the author for Chicago Flutter on YouTube.
If you’re interested in adding the kind of interactivity to your Flutter app that InteractiveViewer enables, then you’ll probably also be happy to hear that we’ve added more capabilities to drag ‘n’ drop in this release. Specifically, if you’d like to know precisely where the drop happened on the target widget (it’s always been available to the Draggable object itself), now you can get that information with the DragTarget onAcceptDetails method.
Pic courtesy: medium.com
New drag target accept details in action
Check out this sample for the details and look forward to a future release that will make this information available during the drag as well so that the DragTarget can more easily provide visual updates during a drag operation.
Updated Material Slider, RangeSlider, TimePicker, and DatePicker
In addition to new widgets, this release includes a number of updated widgets to match the latest Material guidelines. These include Slider and RangeSlider. For more information, see What’s new with the Slider widget?
Pic courtesy: medium.com
updated Material Slider
Pic courtesy: medium.com
DatePicker has been updated to include a new compact design as well as support for date ranges.
Pic courtesy: medium.com
And finally, TimePicker has a completely new style.
Pic courtesy: medium.com
If you’d like to play around with it, here’s a fun web demo built with Flutter.
Responsive Licenses page
Another update this release is the new responsive licenses page available from the AboutDialog.
Pic courtesy: medium.com
PR 57588, from community contributor TonicArtos, is not only updated to match Material guidelines, making it just plain nice to look at, but it’s easier to navigate and designed to work as well on tablets and desktops as on phones. Thanks, TonicArtos! Since every Flutter app should be showing the licenses for the packages they’re using, you just made every Flutter app better!
New pubspec.yaml format required for publishing plugins
Of course, Flutter isn’t just the widgets; it’s also the tooling and this release comes with too many updates to mention. However, here are some of the highlights.
First and foremost, a public service announcement: if you’re a Flutter plugin author, then the legacy pubspec.yaml format is no longer supported for publishing plugins. If you try, you’ll get the following error message when executing pub publish:
Pic courtesy: medium.com
The old format did not support specifying which platforms your plugins support, and has been deprecated since Flutter 1.12. The new pubspec.yaml format is now required for publishing new or updated plugins.
For clients of plugins, the tools still understand the old pubspec format and will for the foreseeable future. All existing plugins on pub.dev using the legacy pubspec.yaml format will continue to work with Flutter apps for the foreseeable future.
Preview of embedded Dart DevTools in Visual Studio Code
The biggest tooling update in this release comes to the Visual Studio Code extension, which provides a preview of a new feature to enable you to bring Dart DevTools screens directly into your coding workspace.
Pic courtesy: medium.com
Preview of Layout Explorer from Dart DevTools embedded into Visual Studio Code
Enable this feature with the new dart.previewEmbeddedDevTools setting. The above screenshot shows the Flutter Widget Inspector embedded directly into Visual Studio Code but with this new setting enabled, you can choose your favorite page embed using the Dart DevTools menu on the status bar.
Pic courtesy: medium.com
This menu allows you to choose which pages to show.
Pic courtesy: medium.com
This feature is still in preview, so let us know if you have any trouble with it.
Updates to network tracking
The latest version of Dart DevTools comes with an updated version of the Network page that enables web socket profiling.
Pic courtesy: medium.com
Timing, status and content type of socket connections on the Network page of Dart DevTools
The Network page now adds timing information to the network calls from your app, along with other information like status and content type. Additional improvements have been made to the details UI to provide an overview of the data in a websocket or http request. We’ve also got more plans for this page to include HTTP request/response bodies and monitoring gRPC traffic.
Updating import statements on file rename
Another new feature for Visual Studio Code is updating imports on rename, which automatically updates import statements when files are moved or renamed.
Pic courtesy: medium.com
moving Dart files in Visual Studio Code updates the import statements
This feature currently only works for single files and not multiple files or folders, but that support is coming soon.
For more information and to develop mobile apps using Flutter, Hire Flutter Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop Mobile Apps using Flutter, please visit our technology page.
Content Source:
- medium.com
Appflow: not just another CI/CD service
Every production mobile app ultimately has a set of recurring tasks around integration, testing, deployment, and long term maintenance. These tasks often must be automated across a team of many developers and app projects. Building a process for these tasks can be incredibly time consuming and require specialized infrastructure experience, but is critical for the success of any serious app project.
Thankfully, teams don’t need to build solutions to these problems themselves, as there are services out there that can help. One such service works directly with your Cordova or Capacitor app to help your team easily perform these tasks. That means consistent builds, deploys on every commit, pushing remote app updates in realtime, and automating app store deployment as part of your mobile CI/CD workflow.
That service is Appflow, and it’s Ionic’s official Mobile DevOps platform. Appflow automates the whole DevOps side of your mobile app project, and is used to power significant apps and development teams across AAA, Burger King/Popeyes, Shipt, and more.
Let’s explore what a Mobile DevOps platform like Appflow is, what Appflow offers, how it differs from traditional CI/CD platforms, and how it’s being used today.
What is Mobile DevOps?
Appflow is known as a Mobile DevOps platform.
Mobile DevOps platforms, of which Appflow is one of the leaders, automate and simplify many continuous integration and delivery tasks, as well as other important mobile app deployment tasks. These platforms handle the heavy lifting so teams can focus on building their unique app, instead of reinventing the wheel.
Those tasks may include:
- Setting up consistent, repeatable mobile build environments so apps can be built on every commit using predictable dev tools and operating systems.
- Building app binaries and artifacts for iOS, Android, and Web
- Running tests and other scripts on every commit to ensure apps stay working
- Connecting to existing GitHub, Gitlab, Bitbucket, and other repos to perform builds on every commit
- Releasing working updates to users in realtime (for web updates), or to the app stores (for binary updates)
- Managing different versions of apps between testers, stakeholders, and production users.
- Not every platform supports all of those features (Appflow does, as we’ll see below), but these are generally the tasks that a Capacitor or Cordova development team will need to perform.
Beyond these tasks, DevOps is all about creating a culture of shipping often, involving stakeholders, and ensuring quality. All of which Mobile DevOps products can help your team embrace.
What is Appflow?
Appflow is the official Mobile DevOps platform built by the Ionic team, focused on bringing powerful Mobile DevOps workflows to hybrid app developers across Capacitor and Cordova whether or not they are using Ionic Framework.
Appflow, first and foremost, is a managed mobile build environment. That means it provides consistent and frequently updated iOS, Android, and web build environments. The Appflow team does the hard work of keeping mobile build tools and operating systems up to date and patched for security issues, whether that means updating to the latest versions of Xcode or the Android SDK, or new versions of macOS and Linux, and a whole lot more.
These builds are done in a highly secure environment, so teams can feel confident in offloading their mobile CI/CD process to Appflow, and on high performance hardware to make builds match the speed of development.
Appflow also manages authentic, legal Mac build hardware for fully automating iOS builds in the cloud, which also benefits developers on Windows machines that wish to build iOS apps but can’t or don’t want to buy Mac hardware.
On top of this environment, Appflow provides some pretty transformative features for hybrid app developers. Namely, the ability to remotely update an app without needing to re-submit to app stores (in a way that is App Store ToS friendly!), as well as publish app binaries directly to the Apple App Store and Google Play Store.
And Appflow can automate that whole process so it triggers on each commit, as well as enable powerful version splitting so testers, stakeholders, and customers can run on different versions of an app.
Can’t we do this with Circle CI, GitHub Actions, or Azure DevOps?
In the CI/CD space, there are generic build services like Circle CI or GitHub Actions, and there are specialized services like Appflow.
The biggest difference between the services is that Circle CI or GitHub Actions merely provide build servers, a way to trigger builds, and hooks for sending those builds elsewhere. They do not provide the tools or pipeline for mobile-specific builds, they do not handle the deployment of your app, and they certainly don’t manage build environments for you.
Here’s a visualization of the differences between the two approaches:
Pic courtesy: ionicframework.com
In theory, teams could build their own Appflow-style pipeline on another generic CI/CD platform like Circle CI or GitHub Actions, but that would require teams orchestrate and keep up to date a very complex chain of tools, operating systems, build environments, app store submission features, remote app deployment, and more. This is guaranteed to take a full team of engineers with a different skillset than the app dev team to build and manage, especially as new mobile and desktop operating systems are released each year.
It’s simply not feasible for the vast majority of teams to take this on in addition to building their apps.
This is why a specialized build service like Appflow stands out in the CI/CD and DevOps space. Beyond simply being a build service, Appflow is a managed mobile build environment that is fully managed by the mobile experts here at Ionic.
Why not both?
Generic CI/CD tools, with their focus on simply triggering builds, are not a direct replacement for Appflow. That means the two can easily be used alongside each other.
In this scenario, a team might have their generic CI/CD tool trigger builds and push code to Appflow, while Appflow manages the hard work of performing mobile builds on managed mobile development infrastructure, while also handling the last mile app update and app store publishing.
This works so well that around 68% of Appflow customers are using Appflow alongside a general purpose CI/CD tool, according to data from the 2020 Ionic Developer Survey.
This delivers the best of both worlds: You get to continue using your CI/CD tool of choice – or whatever your company has standardized on – while leaving the highly specialized, mobile specific build and publishing requirements to Appflow.
For more information and to develop mobile apps using Ionic, Hire Ionic Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop Mobile Apps using Ionic, please visit our technology page.
Content Source:
- ionicframework.com
Capacitor 2.0 is just released!
Developers use Capacitor as a native app container for packaging and deploying their Ionic apps to various mobile and desktop platforms. The capacitor allows them to access native features like the Camera using the same code across all platforms – without having to worry about platform-specific details.
This new version updates Capacitor and its project templates to the latest security, bug fixes, and features including:
- Swift 5 and Xcode 11+ support
- Android 10 (SDK 29) and AndroidX support, which makes Face Unlock and Iris Unlock available now in Ionic Identity Vault.
- Bug fixes and usability improvements to 23+ core plugins
Why Capacitor?
Traditionally, web developers have turned to tools like Apache Cordova/Adobe PhoneGap to deploy their web apps to other platforms. This worked well for many years, with Ionic recommending Cordova as the default method for targeting native iOS and Android platforms. Over time our opinions changed about how this layer should work and after exploring various ideas, determined the best option was to bring the native runtime component of app building in-house.
Now a key part of the Ionic Platform, Capacitor makes it easy for web developers to reuse their skills to build quality apps for all platforms, while significantly lessening the likelihood that they’ll get stuck on native-specific issues. You can learn more about how Capacitor compares with Cordova in this article penned by Max.
Capacitor 2.0 updates its underlying technology to support the latest versions of programming languages and operating systems that power all Capacitor apps, enabling improved performance, security, and modern development experiences. Specifically, support for the latest tech from iOS and Android is now available.
Swift 5 and Xcode 11+
On the iOS front, this means Swift 5 and Xcode 11+ support. This brings smaller app bundle sizes, modern development tooling and features, and compatibility with earlier versions of Swift.
Android 10 (SDK 29) and AndroidX
On Android, this means Android 10 (aka SDK 29), with improved security and biometrics, audio/video capabilities, and system-wide dark mode.
Additionally, AndroidX, the next generation of the Android Support Library, is now supported. Both provide Android developers with a standard way to provide users with newer features on earlier versions of Android or graceful fallback when unavailable.
AndroidX replaces the Support Library, providing feature parity and backward-compatibility while also bringing improvements to library modularity, smaller code size, and a better developer experience.
Whether you’re a consumer of Capacitor or a plugin author, you simply need to update your projects (or CLI) to access these new capabilities (see below).
Improved Plugins, Tooling, and Docs
Capacitor 1.0 wouldn’t have been as successful as it has been without a solid developer experience backing it. With Capacitor 2.0, we’ve reviewed it from head to toe, leading to updates to the core plugins, the CLI tooling, and documentation.
Fundamentally, if you’re going to build unique app experiences, you need a reliable set of plugins to build on top of. Capacitor 2.0 includes many updates to its 23 core plugins, from bug fixes to new features to usability improvements. Many of these changes were driven by feedback from you, the Ionic community, so thank you! We appreciate your efforts and feedback – it helps us ensure that it’s never been easier to get started with Capacitor.
Speaking of awesome community efforts, Ionic’s official tool for generating splash screens and icons, cordova-res, just got a big update: Capacitor support! Thanks to wanna dream for this contribution.
npm i -g cordova-res cordova-res --skip-config --copy
Capacitor’s embrace of native tooling means that it’s never been easier to implement more creative native features. That said, the nuances and details can be challenging, so we’ve begun to add new implementation guides to the Capacitor docs, including Deep Links, Sign In with Apple, and a refreshed Push Notifications with Firebase guide. There are more coming soon – if there’s content you think is missing, please let us know in the comments.
Android Face Unlock & Iris Unlock
In order to protect your user’s data, you need to keep up with the latest mobile security features. Security is traditionally challenging to implement correctly – with disastrous results if done wrong.
With the new support of AndroidX in Capacitor 2.0, Ionic Identity Vault now supports Android’s Face Unlock and Iris Unlock. This update to Ionic’s all-in-one frontend identity management system brings industry-leading facial and iris authentication features to the Android platform. Using a simple API, you can add top of the line biometric authentication to your Capacitor apps. Learn more here.
Backward compatibility with Cordova
Capacitor 2.0 maintains near 100% backward compatibility with Cordova (available since the project originally launched). Not only does this ensure a smooth migration from Cordova to Capacitor, but it also provides access to thousands of existing native plugins. Learn how to use Cordova plugins here.
Easy Update Process
Capacitor gives Ionic developers complete control of their native projects. Among many other benefits, this makes updating easy and straightforward.
First, update Capacitor Core and the CLI:
cd your-app-folder npm install @capacitor/cli@latest npm install @capacitor/core@latest
Next, update each Capacitor library in use:
npm install @capacitor/ios@latest npx cap sync ios npm install @capacitor/android@latest # Within Android Studio, click "Sync Project with Gradle Files" button cd electron npm install @capacitor/electron@latest
Then, follow these update instructions which cover one-time manual steps:
- iOS
- Android
- Electron
- Breaking Changes
More than a version number
Capacitor 2.0 is a significant update to an increasingly important part of Ionic’s app development platform.
We’ve been blown away by the reception of Capacitor since it was announced, and installs have been growing quickly.
With 2.0, we are starting to make Capacitor the default for all new Ionic React and soon Ionic Angular projects, and expect us to be recommending Capacitor for all new Ionic apps and increasingly for enterprise apps as well.
Additionally, we are dedicating more internal resources to Capacitor as it becomes a key part of the Ionic offering. Expect to see Capacitor receive a lot more focus and attention from us in the coming months.
For more information and to develop mobile apps using Ionic, Hire Ionic Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop Mobile Apps using Ionic, please visit our technology page.
Web support for Flutter
In addition to mobile apps, Flutter supports the generation of web content rendered using standards-based web technologies: HTML, CSS and JavaScript. With web support, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in.
pic courtesy : flutter.dev
Adding web support to Flutter involved implementing Flutter’s core drawing layer on top of standard browser APIs, in addition to compiling Dart to JavaScript, instead of the ARM machine code that is used for mobile applications. Using a combination of DOM, Canvas, and CSS, Flutter can provide a portable, high-quality, and performant user experience across modern browsers. We implemented the core drawing layer completely in Dart and used Dart’s optimized JavaScript compiler to compile the Flutter core and framework along with your application into a single, minified source file that can be deployed to any web server.
While traditional web approaches remain a great choice, we envision the web support available in Flutter being valuable in many scenarios. For example:
A connected Progressive Web Application built with Flutter
Web support for Flutter enables existing mobile-based applications to be packaged as a PWA for reach to a broader variety of devices, or to provide a companion web experience to an existing app.
Embedded interactive content
Flutter provides a powerful environment for creating rich, data-centric components that can be easily hosted within an existing web page. Whether for data visualization, an online tool like a car configurator, or an embedded chart, Flutter can provide a productive development approach for embedded web content.
Embedding dynamic content in a Flutter mobile app
An established way to provide dynamic content updates within an existing mobile application is the use of a web view control, which can load and display information dynamically. The support Flutter now offers for a unified environment for web and mobile content enables you to deploy content online or embedded in an app without rewriting.
Not every HTML scenario is ideally suited for Flutter at this time. For example, text-rich flow-based content such as blog articles benefit from the document-centric model that the web is built around, rather than the app-centric services that a UI framework like Flutter can deliver. However, you can use Flutter to embed interactive experiences into these websites.
Building a web application with Flutter
Requirements
To create a Flutter app with web support, you need the following software:
- Flutter SDK. See the Flutter SDK installation instructions.
- Chrome; debugging a web app requires the Chrome browser.
- Optional: An IDE that supports Flutter. You can install Android Studio, IntelliJ IDEA, or Visual Studio Code and install the Flutter and Dart plugins to enable language support and tools for refactoring, running, debugging, and reloading your web app within an editor. See setting up an editor for more details.
Create a new project with web support
You can use the following steps to create a new project with web support.
Set up
Run the following commands to use the latest version of the Flutter SDK from the beta channel and enable web support:
flutter channel beta flutter upgrade flutter config --enable-web
Note: The flutter upgrade command silently fails when origin points to a personal fork. To validate that origin points to https://github.com/flutter/flutter.git, run the following commands in the root directory of your local copy of the https://github.com/flutter/flutter repository: cd <inside local copy of the flutter/flutter repo> git remote get-url origin https://github.com/flutter/flutter.git
Once web is enabled, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app.
flutter devices 2 connected device: Web Server • web-server • web-javascript • Flutter Tools Chrome • chrome • web-javascript • Google Chrome 81.0.4044.129
After enabling web support, restart your IDE. You should now see Chrome (web) and Web Server (web) in the device pulldown.
Note: You only need to execute flutter config –enable-web once. You can always check the status of your configuration using the no-argument flutter config command.
Create and run
Creating a new project with web support is no different than creating a new Flutter project for other platforms.
Once you’ve configured your environment for web support, you can create and run a web app either in the IDE or from the command line.
IDE
After you’ve configured your environment to support the web, make sure you restart the IDE if it was already running.
Create a new app in your IDE and it automatically creates iOS, Android, and web versions of your app. (And macOS, too, if you’ve enabled desktop support.) From the device pulldown, select Chrome (web) and run your app to see it launch in Chrome.
Command line
To create a new app that includes web support (in addition to mobile support), run the following commands, substituting myapp with the name of your project:
flutter create myapp cd myapp
To serve your app from localhost in Chrome, enter the following from the top of the package:
flutter run -d chrome
Note: If there aren’t any other connected devices, the -d chrome is optional.
The flutter run command launches the application using the development compiler in a Chrome browser.
Build
Run the following command to generate a release build:
flutter build web
A release build uses dart2js (instead of the development compiler) to produce a single JavaScript file main.dart.js. You can create a release build using release mode (flutter run –release) or by using flutter build web. This populates a build/web directory with built files, including an assets directory, which need to be served together.
For more information, see Build and release a web app.
Add web support to an existing app
To add web support to an existing project, run the following command in a terminal from the root project directory:
flutter create .
For more information and to develop mobile apps using Flutter, Hire Flutter Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop Mobile Apps using Flutter, please visit our technology page.
Content Source:
- flutter.dev
CodePen is adding the support for Flutter
CodePen, the leading social development environment for millions of front-end developers and designers, is adding support for Flutter! For web developers CodePen has long been a great place for sharing design explorations, new techniques, and ideas. Now with the introduction of Flutter, CodePen enables a new audience to learn, share and promote their creativity.
pic courtesy : medium.com
In the words of Alex Vazquez, one of the co-founders of CodePen:
"CodePen has been a big fan of Flutter and the Dart programming language for years. We're pretty pumped that Flutter now supports mobile and the web. The Flutter community is growing fast, which is why we're excited to support Flutter with its own custom CodePen editor! Flutter is officially a first-class member of the CodePen community. We can't wait to see what you build with Flutter on CodePen."
Since the inception of Flutter, we’ve designed it as a canvas for creative expression. It has been encouraging to see growing recognition of its design capabilities, from the partnerships we announced with Adobe and SuperNova at our design-orientated Flutter Interact event, to the naming of Flutter as one of the most important design ideas of the decade by Fast Company. With the new addition of a CodePen-based Flutter environment, creative professionals can now leverage CodePen to discover artistic Flutter inspirations, build up impressive Flutter portfolios, and showcase amazing Flutter ideas to the world!
CodePen’s Flutter editor is built on top of the same backend service, dart-services, that currently powers DartPad (the web-based editor created by the Flutter and Dart teams that has been recently updated to support Flutter). When we built DartPad, we designed it to be an educational tool to help developers learn Flutter and Dart, and share code snippets with each other. We specifically decided to open-source dart-services so that sites like CodePen could tailor it to new scenarios and audiences.
DartPad is an excellent tool for quickly testing an idea in code, or for sharing your snippet with other developers, and it’s useful for reproducing (and filing) bugs. You can do this in CodePen, too, but CodePen has the advantage of an active design community where you can share, comment, promote, try out design ideas, and get input from other designers. CodePen’s Flutter editor is more like your “right brain” that you use to prototype ideas for creative expression and design inspiration, while DartPad is more like your “left brain” when you need to quickly test an idea or code up a technical concept.
pic courtesy : medium.com
Flutter editor on CodePen
Let’s take a quick tour of the Flutter editor on CodePen. You can create a new Flutter pen (CodePen’s term for “code snippet”) either from scratch or from an existing template.
Let’s start with the “GooeyEdge” template. As you can see, the Flutter code is on the left side, and Flutter’s web output is on the right side. You can play with this interactive design by dragging the edge of the visual using your mouse.
pic courtesy: medium.com
You can also make changes to the Flutter code, and see them take effect accordingly. For example, if we change the color of the page control indicator from “white” to “blue”, you can see the color gets updated within a few seconds! CodePen automatically recompiles your code each time you make a change. Just update a line, wait a few seconds, and the new output appears.
pic courtesy: medium.com
Now let’s see what happens if we introduce a syntax error. Say we accidentally delete a semicolon at the end of line 1. we’ll immediately see a red bar warning of the syntax error. This allows you to easily spot and correct mistakes.
pic courtesy: medium.com
Social features
What we particularly love about CodePen is the social and community features it offers. Once you create a new pen or discover Flutter “pens” created by the community, you can save, favorite, add to a collection, share on social media, or even fork to create your own version!
pic courtesy: medium.com
pic courtesy: medium.com
Give it a try!
We hope this new Flutter playground on CodePen empowers you to build and showcase your cool Flutter animations, ideas, vignettes, and more.
For more information and to develop mobile apps using Flutter, Hire Flutter Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop Mobile Apps using Flutter, please visit our technology page.
Content Source:
- medium.com
Why should you learn Flutter in 2020
This year, mobile applications continued to become more and more popular. Fortunately there are many programming tools available to developers who want to create them. Among these tools there is Flutter, which has distinguished itself lately.
What is Flutter?
Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).
Flutter consists of two important parts:
- An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
- A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs.
To develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years.
Dart focuses on front-end development, and you can use it to create mobile and web applications.
If you know a bit of programming, Dart is a typed object programming language. You can compare Dart’s syntax to JavaScript.
“Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.”
Why you should learn Flutter?
We selected some of the reasons why we like Flutter and why we want to use it this year.
pic courtesy: freecodecamp.org
Simple to learn and use
Flutter is a modern framework, and you can feel it! It’s way simpler to create mobile applications with it. If you have used Java, Swift, or React Native, you’ll notice how Flutter is different. What We love about Flutter is that you can create a real native application without a bunch of code.
Quick compilation: maximum productivity
Thanks to Flutter, you can change your code and see the results in real-time. It’s called Hot-Reload. It only takes a short amount of time after you save to update the application itself.
Significant modifications force you to reload the app. But if you do work like design, for example, and change the size of an element, it’s in real-time!
Ideal for startup MVPs
If you want to show your product to investors as soon as possible, Flutter is a good choice.
Here are top 4 reasons to use it for your MVP:
- It’s cheaper to develop a mobile application with Flutter because you don’t need to create and maintain two mobile apps (one for iOS and one for Android).
- One developer is all you need to create your MVP.
- It’s performant – you won’t notice the difference between a native application and a Flutter app.
- It’s beautiful – you can easily use widgets provided by Flutter and personalize it to create a valuable UI for your customers (you can find examples of applications made with Flutter below).
pic courtesy: freecodecamp.org
Good documentation
It’s important for new technology to have good documentation. But it’s not always the case that it has it!
You can learn a lot from Flutter’s documentation, and everything is very detailed with easy examples for basic use cases.
A growing community
Flutter has a robust community, and it’s only the beginning!
- Flutter Awesome: An awesome list that curates the best Flutter libraries and tools. This website publishes daily content with lots of examples, application templates, advice, and so on.
- Awesome Flutter: A GitHub repository (linked to Flutter Awesome) with a list of articles, videos, components, utilities, and so on.
- It’s all widgets!: An open list of apps built with Flutter.
- Flutter Community: A Medium publication where you can find articles, tutorials, and much more.
Supported by Android Studio and VS Code
Flutter is available on different IDEs. The two main code editors for developing with this technology are Android Studio (IntelliJ) and VS Code.
Android Studio is a complete software with everything already integrated. You have to download Flutter and Dart plugins to start.
VS Code is a lightweight tool, and everything is configurable through plugins from the marketplace.
For more information and to develop your mobile apps using Flutter, Hire Flutter Developer from us as we provide you high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop Mobile Apps using Flutter, please visit our technology page.
