Content Source:
- medium.com
Web support is a code-compatible implementation of Flutter that is 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.
First, let’s create an example app that uses package:url_launcher
, so you can verify that it works correctly.
Setup
In order to use web plugins, you need to be on the Flutter dev channel. Make sure that you’re on the dev channel by running:
$ flutter channel dev $ flutter upgrade
Now, you need to enable web support so that Flutter can set up your app to run on the web:
$ flutter config --enable-web
Now, create a directory named url_launcher_example
(let’s assume ~/url_launcher_example
), and create a Flutter project in it:
$ mkdir "~/url_launcher_example" $ cd "~/url_launcher_example" $ flutter create .
package:url_launcher
Our example app will have just a button that launches google.com.
First, update the pubspec so that you depend on package:url_launcher
. In pubspec.yaml
, under dependencies
, add the line (highlighted in bold):
name: url_launcher_example ... dependencies: flutter: sdk: flutter url_launcher: 5.2.3 ...
Now, replace the entire contents of lib/main.dart with the following:
import 'package:url_launcher/url_launcher.dart'; import 'package:flutter/material.dart'; void main() => runApp(UrlLauncherExample()); class UrlLauncherExample extends StatelessWidget { static const String _title = 'URL Launcher Example'; @override Widget build(BuildContext context) { return MaterialApp( title: _title, home: Scaffold( appBar: AppBar(title: const Text(_title)), body: LaunchButton(), ), ); } } class LaunchButton extends StatelessWidget { LaunchButton({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Center( child: RaisedButton( onPressed: _launch, child: Text( 'Launch!', style: TextStyle(fontSize: 20), ), ), ); } void _launch() { launch('https://www.google.com'); } }
lib/main.dart
Verify that the app works by running it on your Android or iOS device, or simulator by running the app normally with flutter run
. The app should look like this screenshot. Try clicking the Launch! button and verify that it opens Google.
pic courtesy: medium.com
Now, you can run the same app on the web with flutter run -d chrome
. The app should open and render just like the mobile version, but clicking Launch! does nothing. Let’s start writing the web plugin for url_launcher
.
package:url_launcher_web
Create a new directory called url_launcher_web
(let’s assume ~/url_launcher_web
):
$ mkdir "~/url_launcher_web" $ cd "~/url_launcher_web"
Unfortunately, there is no template for web plugins currently (that is, you can’t use flutter create
), so you’ll have to create the plugin manually. But, before you start coding, some discussion is in order about how this is actually going to be implemented.
Looking into package:url_launcher
Let’s take a look at how package:url_launcher
is implemented, so you know what to do for package:url_launcher_web
. The main code can be found here. These are the main bits you should care about:
const MethodChannel _channel = MethodChannel('plugins.flutter.io/url_launcher'); Future<bool> launch( String urlString, { ... }) async { assert(urlString != null); final bool result = await _channel.invokeMethod<bool>( 'launch', <String, Object>{ 'url': urlString, ... }, ); ... return result; }
Almost all Flutter plugins are written like this. They create a MethodChannel
, and then the plugin works by sending a method call on the channel to the “platform-side” (that is, Android or iOS) of the plugin. So, the way this plugin works on Android is that there is some code, written in Java, that registers a MethodChannel
on the Android side. The MethodChannel
waits for method calls, which call the required Android code to launch a URL. In order to get this plugin working on the web, you need to do the same thing as in the Android and iOS implementations, create a MethodChannel
that waits for method calls, and when the MethodChannel
receives them, launches the given URL.
Implementing package:url_launcher_web
Web implementations of Flutter plugins are written as Dart packages. Let’s begin with the pubspec.yaml
. Assuming you’re in your url_launcher_web
directory you created earlier, create a file named pubspec.yaml
, and paste the following code in the file:
name: url_launcher_web version: 0.0.1 flutter: plugin: platforms: web: pluginClass: UrlLauncherPlugin fileName: url_launcher_web.dart dependencies: flutter: sdk: flutter flutter_web_plugins: sdk: flutter environment: sdk: ">=2.0.0-dev.28.0 <3.0.0" flutter: ">=1.5.0 <2.0.0"
Some key things to note:
The platforms:
section contains a section for web:
that declares the name of the class where you will implement the plugin, as well as the filename containing the class.
The flutter_web_plugins
dependency lets you register the web implementation of url_launcher.
We declared that our implementation will be a class named UrlLauncherPlugin
and be written in url_launcher_web.dart
, so let’s write that class now. Make sure you create a lib/
directory first, then edit lib/url_launcher_web.dart
, and paste the following code in the file:
import 'dart:async'; import 'dart:html' as html; import 'package:flutter/services.dart'; import 'package:flutter_web_plugins/flutter_web_plugins.dart'; class UrlLauncherPlugin { static void registerWith(Registrar registrar) { final MethodChannel channel = MethodChannel( 'plugins.flutter.io/url_launcher', const StandardMethodCodec(), registrar.messenger); final UrlLauncherPlugin instance = UrlLauncherPlugin(); channel.setMethodCallHandler(instance.handleMethodCall); } Future<dynamic> handleMethodCall(MethodCall call) async { switch (call.method) { case 'launch': final String url = call.arguments['url']; return _launch(url); default: throw PlatformException( code: 'Unimplemented', details: "The url_launcher plugin for web doesn't implement " "the method '${call.method}'"); } } bool _launch(String url) { return html.window.open(url, '') != null; } }
There are several key points to note in our implementation, let’s go over them one by one.
registerWith
Just as on Android or iOS, web plugins need to do some initialization before the app runs. This is done in the static registerWith
method, which takes a Registrar
(which comes from package:flutter_web_plugins
).
In this case, we are registering a MethodChannel
to listen for incoming messages from the app. Note how we initialize the MethodChannel
with registrar.messenger
. All MethodChannels
have a BinaryMessenger
that they use to send and receive messages. By default, a MethodChannel
uses the default BinaryMessenger
defined in Flutter. The BinaryMessenger
sends messages from the app to the platform side, but we are writing a plugin that is on the platform side and should receive messages from the app, so we need to initialize the MethodChannel
with a different BinaryMessenger
. Luckily, the Registrar
that is passed to the plugin in registerWith
has a messenger that does the right thing. By initializing our MethodChannel
with it, we now have a MethodChannel
that receives method calls from the app.
The MethodChannel
we created registered handleMethodCall
as its method call handler. This means that any time the app-side MethodChannel
(the one created in package:url_launcher
) sends a method call to the platform-side MethodChannel
(the one we created in registerWith
) this method call handler is invoked.
If the handler receives a method call to the 'launch'
method, then it invokes _launch
, which simply opens a new window with the given URL.
Our web plugin is looking good! Now, we need to use it from the example app we created earlier.
Modify the pubspec in ~/url_launcher_example
to add a dependency to ~/url_launcher_web
. Your change should look something like this. (Make sure to use the correct path for where you actually put your directories):
dependencies: flutter: sdk: flutter url_launcher: 5.2.3 url_launcher_web: path: ../url_launcher_web
Now, run the example app again with flutter run -d chrome
. Try clicking the Launch! button.
For more Information and to build mobile apps using Flutter, Hire Flutter Developer from us as we provide you high-quality services 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:
In our previous blog post we learned basics about Ionic React app. Next, in this post let’s take a tour of what a stock Ionic React app consists of.
Open up the project in your favorite code editor and leave the ionic serve
command running. Any changes we make will automatically be recompiled and refresh the app in the browser.
An Ionic React project is just a React project, with the setup you would normally find from a CRA app. One difference you might notice is that we use TypeScript.
We are big fans of TypeScript at Ionic, and we believe TypeScript in React provides a great, productive experience. However, if you want to use plain JavaScript, rename the files to use a .js
extension and remove any of the type annotations from within the file, and your Ionic React app will now be a JavaScript app!
The src
folder contains all the code for the app. The main entry point is the App.tsx
file. Let’s break down what’s happening in this file.
At the top, we have the typical React and React Router imports, and then a series of imports from @ionic/react
. Each of our Ionic components is exported as its own individual React component. In essence, Ionic React is a wrapper around the web components we have in the Ionic Core project but exported in a way that makes them feel native to a React developer. Any updates and enhancements we make to Ionic Core will automatically be available in Ionic React.
Next, we import a series of core CSS files. After those, there is also a variables.css
file, which you can use to customize the theme of your app. For more info on theming your app, check out our doc
on the subject.
Next, we have the main App component. Notice that in the starters, we are using 100% functional components. We are fans of this approach, but if you prefer class-based components, those work great as well.
Pic courtesy:-ionic-react-app-code
Each Ionic app starts with the IonApp component, which is the base container, and helps set up the screen to work great on both mobile and desktop. Next, the IonReactRouter component is a wrapper around the React Router library’s BrowserRouter component. To do the native-like page transitions and to maintain the state of the pages as you browse through your app, we augment React Router with some additional functionality.
The bulk of our tabs starter is now in the IonTabs
component. The IonRouterOutlet
contains a series of Routes (from React Router) for each of the pages in the tab interface.
Next, the IonTabBar
component contains the bottom tab bar with a button for each of the pages, which forward to the Tab1
, Tab2
, and Tab3
components in the src/pages
folder. The Tab1
and Tab2
pages have good examples on how to use some common Ionic components, but the Tab3
page is relatively bare. Let’s change that.
We will set up our empty tab to be a page to show a list of employees, with some demo data being pulled from the UIFaces
project.
First, let’s update the tab bar in App.tsx to show a new label and icon:
<IonTabButton tab="tab3" href="/tab3"> <IonIcon icon={people} /> <IonLabel>Employees</IonLabel> </IonTabButton>
The people icon is imported from 'ionicons/icons'
Open up Tab3.tsx
, and replace the contents of the file with:
<IonTabButton tab="tab3" href="/tab3"> <IonIcon icon={people} /> <IonLabel>Employees</IonLabel> </IonTabButton>
The people icon is imported from 'ionicons/icons'
Open up Tab3.tsx
, and replace the contents of the file with:
import { IonAvatar, IonContent, IonHeader, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar, useIonViewWillEnter } from '@ionic/react'; import React, { useState } from 'react'; interface Person { name: string; email: string; position: string; photo: string; } const Tab3Page: React.FC = () => { const [people, setPeople] = useState<Person[]>([]); useIonViewWillEnter(async () => { const result = await fetch('https://uifaces.co/api?limit=25', { headers: { 'x-API-KEY': '873771d7760b846d51d025ac5804ab' } }); const data = await result.json(); setPeople(data); }); return ( <IonPage> <IonHeader> <IonToolbar> <IonTitle>Employees</IonTitle> </IonToolbar> </IonHeader> <IonContent> <IonList> {people.map((person, idx) => <EmployeeItem key={idx} person={person} />)} </IonList> </IonContent> </IonPage> ); }; const EmployeeItem: React.FC<{ person: Person }> = ({ person }) => { return ( <IonItem > <IonAvatar slot="start"> <img src={person.photo} /> </IonAvatar> <IonLabel> <h2>{person.name}</h2> {person.position} </IonLabel> </IonItem> ); } export default Tab3Page;
First, we define a TypeScript interface for a Person, which will give us some type safety and code completion when using the employees a bit later on.
At the top, we import a couple of React hooks to use, the first is useState
, which allows us to use state in our functional components, and the second is useIonViewWillEnter
, which is a lifecycle method provided by Ionic that will fire each time the view comes into view.
We provide a function to the useIonViewWillEnter
hook that will fire that will call into the UIFaces API (using the fetch API) and return a list of twenty-five people. When the fetch request finishes, we call setPeople to update the people state variable.
In the JSX, we have an ‘IonList’ component, which contains an EmployeeItem
for each of the people. We separate out the EmployeeItem into its own component (defined a bit farther down).
With the updates to Tab3, we can now get a list of employees:
pic courtesy: ionicframework.com
That is the basics on getting up and running with an Ionic React app!
For more Information and to build the app 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 the Hybrid mobile app using Ionic, please visit our technology page.
Source:
Ionic React is a native React version of Ionic Framework that makes it easy to build apps for iOS, Android, Desktop, and the web as a Progressive Web App. All with one code base, standard React development patterns, and using the standard react-dom library and huge ecosystem around the web platform.
Ionic React represents the most significant change in Ionic Framework’s history and opens up Ionic Framework to a whole new audience.
For those that have been following Ionic since the early days, it might be a surprise to hear that we now support more than just Angular, and React of all things!
When we started Ionic Framework, the mission was to empower web developers to build top-quality apps using their existing web development skills, focused on the massive ecosystem around the web platform and web technology.
You might be wondering why we’d build Ionic React when React already has a great mobile option with React Native.
However, when we took a step back, we realized that Ionic React brought something pretty unique to the React ecosystem, and had a very different vision for what the future of app development might look like.
Instead of building an abstraction on top of iOS and Android native UI controls, we wanted to build something that was DOM-native, that would use the standard react-dom library and all the libraries that supported it out of the box, and the decades of existing work around the browser. When we looked at installs for react-dom compared to react-native, it was clear to us that vastly more React development was happening in the browser and on top of the DOM than on top of the native iOS or Android UI systems (16x more, in fact!). That further confirmed our belief that “web devs wanna web dev” and take advantage of their experience and existing library of functionality they’ve built on the DOM.
On top of that, developers are increasingly interested in Progressive Web Apps, especially in the enterprise. PWAs are, at best, an afterthought in the React Native ecosystem (and actually, not officially supported). In contrast, Ionic Framework is one of the leading PWA solutions and has some of the best performance for PWAs in the entire web ecosystem, thanks in part to our work on our Stencil project which we use to generate highly efficient components under the hood.
While Ionic still supports Cordova, new Ionic apps run on an all-new cross-platform engine called Capacitor that we built in-house. Capacitor takes modern JS and browser features, and makes it possible to deploy one app across iOS, Android, Electron, and the web as a Progressive Web App.
In fact, Progressive Web App support was a major goal of Capacitor, and many Capacitor APIs have powerful PWA support, such as Camera which has a custom UI experience available for adding native-quality camera features to your PWA.
While it is inspired by Cordova, in practice the development experience is very different. Capacitor is available as a modern JS API you can import directly into your app, with easy-to-use APIs for everything from File management to Geolocation to app-to-app sharing, to Push and Local Notifications. And exposing new Native SDKs to Capacitor is incredibly easy, requiring just a bit of wrapper code with first-class support for Swift on iOS (Java on Android).
Note: The first official version of Ionic React is v4.11.
Getting started with Ionic React is easy. First, if you haven’t already done so, install the latest Ionic CLI:
npm i -g ionic
Already have a React app? Adding Ionic React is easy.
Then, create a new project:
ionic start my-react-app
The CLI will guide you through the setup process by first asking a couple of questions. The first of which is what framework you would like to use, select React
pic courtesy: ionicframework.com
Next, the CLI will ask which starter template you would like to use.
pic courtesy: ionicframework.com
The CLI will now create your app and install all the dependencies. Once it is done, go into the directory and launch the app:
ionic serve
Under the covers, the ionic serve command uses the Create React App
(CRA) project to compile your app, start a dev server, and open your app in a new browser window.
Once done, you will see your starter app up and running:
pic courtesy: ionicframework.com
In our next blog, We will take a tour of what a stock Ionic React app consists of.
For more Information and to build the app 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 the Hybrid mobile app using Ionic, please visit our technology page.
Source:
Flutter 1.7 contains support for AndroidX and for updated Play Store requirements, a number of new and enhanced components, and bug fixes to customer-reported issues.
If you already have Flutter on your system and you’re on the default stable channel, you can upgrade to version 1.7 by running flutter upgrade from the command line. The updated release is also included in a new installation of Flutter.
AndroidX is a new open source support library from the Jetpack team that helps Android apps stay updated with the latest components without sacrificing backward compatibility. Now that AndroidX is itself stable and many Flutter packages have been updated to support it, Flutter supports creating new Flutter projects with AndroidX, which reduces the work needed to integrate with other parts of the Android ecosystem.
When creating a Flutter project, you can add the –androidx flag to ensure the generated project targets the new support library. Information about migrating existing projects to AndroidX can be found on flutter.dev. We’re actively working on bringing AndroidX / Jetifier support for apps with mixed AndroidX / Android Support libraries, such as in add-to-app cases, and will have more to share on this front in a forthcoming post.
From August 1st, 2019, Android apps that use native code and target Android 9 Pie will be required to provide a 64-bit version in addition to the 32-bit version when publishing to the Google Play Store. While Flutter has long supported generating 64-bit Android apps, version 1.7 adds support for creating Android App Bundles that target both 64-bit and 32-bit from a single submission. See the updated documentation on publishing Flutter-based Android apps to learn how to do this, as well as how to create separate APK files for both 32-bit and 64-bit devices.
We want your apps to look great and feel natural, regardless of what platform you’re targeting. Correspondingly, we continue to update and enhance the widgets available for both Android and iOS.
This release features a new RangeSlider control that lets you select a range of values on a single slider (for example a minimum and maximum temperature value):
pic courtesy: medium.com
The updated SnackBar widget supports an updated look in the Material spec, and a number of new samples are added to the documentation.
For Cupertino, the Flutter library for building pixel-perfect iOS applications, we’ve made a number of updates. In particular, we’ve improved the fidelity of the CupertinoPicker and CupertinoDateTimePicker widgets and added support for localization to non-English languages.
We also made major improvements to the text selection and editing experience on iOS, regardless of whether you’re using the Material or Cupertino design language. Also, a new sample demonstrates how to make more significant platform adaptations across iOS and Android while retaining the same codebase.
Text rendering gets a big upgrade with support for rich typography features, including tabular and old-style numbers, slashed zeros, and stylistic sets, as this demo shows:
pic courtesy: medium.com
Lastly, we’ve added support for game controllers. Could this lead to some fun Flutter apps? You tell us!
Flutter 1.7 represents a lot of hard work by the team to respond to customer-reported issues, with over 1,250 issues closed in the two months since our last stable release.
With the rapid growth in Flutter, we’re seeing lots of new issues reported, and to be transparent, the bug process that worked well when our project was smaller is not working so well now. As a result, our open issue count has increased significantly over the last few months, despite our progress in closing triaged issues. We’re working to increase staffing in this area, which will help with faster triaging of new bugs, closing and merging duplicate issues and redirecting support requests to StackOverflow.
In recent surveys, many of you said that you’d like to see us continue to invest in documentation and error messages. One key part of that work is to provide better structure for our errors which tools like VSCode and Android Studio can take advantage of in the future. You can see examples of this work in issue 34684.
We also fixed the top crashing bug, which was an error when the Flutter tool is unable to write to the Flutter directory. Flutter now fails gracefully if the user doesn’t have write permissions, with clearer indications on how to fix the problem.
In terms of documentation, we have an ever increasing list of samples that can be created directly from the flutter create tool. From the command line, you can run a command such as:
flutter create --sample=material.AppBar.1 mysample
If a sample can be created in this way, you’ll see a “Sample in the App” tab in the documentation, as in this example for the AppBar widget:
pic courtesy: medium.com
We’re also continuing to embed the popular Widget of the Week videos directly into the documentation, as an easy way to grok the various widgets in Flutter’s toolkit.
Behind the scenes, you’ll see lots of underlying work to create infrastructure towards enabling Flutter on macOS and Windows, with further support for important concepts like right-click and unique platform infrastructure such as MSBuild. Support for non-mobile platforms is not yet available in the stable channel, however.
Lastly, when you’re building Flutter apps on the Mac, we now have support for the new Xcode build system. This is on by default for new projects, and easy to enable for existing projects.
As ever, it’s exciting to see Flutter continue to grow in popularity and usage, and we also celebrate the ways customers large and small are using Flutter. Since I/O, the team has been busy with various events around the world: from GMTC in China to meetups and presentations in New York and Mexico; it’s been great to meet with many of you and hear about some of the apps that you’re building.
We’ve talked about Reflectly before: a small Danish company who built a beautiful mindfulness app for iOS and Android. Their app was just featured as Apple’s App of the Day on their US iPhone app store, demonstrating how Flutter apps are more than capable of delivering reference-quality experiences:
And at the WeAreDevelopers conference in Berlin, BMW announced their new Flutter-based app, currently in development. Here’s what Guy Duncan, CTO Connected Company at BMW, had to say:
"By combining Dart and Flutter we have the first true cross-platform mobile toolkit; we feel it is a game changer to ensure feature parity for digital touchpoints and IoT. By moving forward with world class tooling, automation and modern functional programming patterns we can improve feature cycle time, security, and cost of delivery of features for the business."
Beyond apps, of course the open source community is what makes Flutter such a fun place to work, with so many resources, plugins, events and meetups. We continue to be amazed by how you’re using Flutter and are honored to be able to share the fun with you all!
For more Information and to build mobile apps using Flutter, Hire Flutter Developer from us as we provide you high-quality services 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:
Recently marks an important milestone for the Flutter framework, as we expand our focus from mobile to incorporate a broader set of devices and form factors. At I/O, we’re releasing our first technical preview of Flutter for web, announcing that Flutter is powering Google’s smart display platform including the Google Home Hub, and delivering our first steps towards supporting desktop-class apps with Chrome OS.
For a long time, the Flutter team mission has been to build the best framework for developing mobile apps for iOS and Android. We believe that mobile development is ripe for improvement, with developers today forced to choose between building the same app twice for two platforms, or making compromises to use cross-platform frameworks. Flutter hits the sweet spot of enabling a single codebase to deliver beautiful, fast, tailored experiences with high developer productivity for both platforms, and we’ve been excited to see how our early efforts have flourished into one of the most popular open source projects.
The results of this project were startling, thanks in large part to the rapid progress in web browsers like Chrome, Firefox, and Safari, which have pervasively delivered hardware-accelerated graphics, animation, and text as well as fast JavaScript execution.
In parallel, the core Flutter project has been making progress to enable desktop-class apps, with input paradigms such as keyboard and mouse, window resizing, and tooling for Chrome OS app development. The exploratory work that we did for embedding Flutter into desktop-class apps running on Windows, Mac and Linux has also graduated into the core Flutter engine.
It’s worth pausing for a moment to acknowledge the business potential of a high-performance, portable UI framework that can deliver beautiful, tailored experiences to such a broad variety of form factors from a single codebase.
For startups, the ability to reach users on mobile, web, or desktop through the same app lets them reach their full audience from day one, rather than having limits due to technical considerations. Especially for larger organizations, the ability to deliver the same experience to all users with one codebase reduces complexity and development cost, and lets them focus on improving the quality of that experience.
With support for mobile, desktop, and web apps, our mission expands: we want to build the best framework for developing beautiful experiences for any screen.
Flutter team is releasing the first technical preview of Flutter for the web. While this technology is still in development, we are ready for early adopters to try it out and give us feedback. Our initial vision for Flutter on the web is not as a general purpose replacement for the document experiences that HTML is optimized for; instead, we intend it as a great way to build highly interactive, graphically rich content, where the benefits of a sophisticated UI framework are keenly felt.
To showcase Flutter for the web, we worked with the New York Times to build a demo. In addition to world-class news coverage, the New York Times is famous for its crossword and other puzzle games. At Google I/O this week, you can get a sneak peek of their newly refreshed KENKEN puzzle game, which runs with the same code on Android, iOS, web, Mac, and Chrome OS.
With the immediate availability of Flutter 1.5 in our stable channel. Flutter 1.5 includes hundreds of changes in response to developer feedback, including updates for new App Store iOS SDK requirements, updates to the iOS and Material widgets, engine support for new device types, and Dart 2.3 featuring new UI-as-code language features.
As the framework itself matures, we’re investing in building out the supporting ecosystem. The architectural model of Flutter has always prioritized a small core framework, supplemented by a rich package community. In the last few months, Google has contributed production-quality packages for web views, Google Maps, and Firebase ML Vision, and this week, we’re adding initial support for in-app payments. And with over 2,000 open source packages available for Flutter, there are options available for most scenarios.
Flutter continues to grow in popularity and adoption. A growing roster of demanding customers including eBay, Sonos, Square, Capital One, Alibaba and Tencent are developing apps with Flutter. And they’re having fun!
Flutter is also being used on the desktop. For some months, we’ve been working on the desktop as an experimental project. But now we’re graduating this into Flutter engine, integrating this work directly into the mainline repo. While these targets are not production-ready yet, we have published early instructions for developing Flutter apps to run on Mac, Windows, and Linux.
Another quickly growing Flutter platform is Chrome OS, with millions of Chromebooks being sold every year, particularly in education. Chrome OS is a perfect environment for Flutter, both for running Flutter apps and as a developer platform, since it supports execution of both Android and Linux apps. With Chrome OS, you can use Visual Studio Code or Android Studio to develop a Flutter app that you can test and run locally on the same device without an emulator. You can also publish Flutter apps for Chrome OS to the Play Store, where millions of others can benefit from your creation.
As the final example of Flutter’s portability, we offer Flutter embedded on other devices. We recently published samples that demonstrate Flutter running directly on smaller-scale devices like Raspberry Pi, and we offer an embedding API for Flutter that allows it to be used in scenarios including home, automotive and beyond.
Perhaps one of the most pervasive embedded platforms where Flutter is already running is on the smart display operating system that powers the likes of Google Home Hub.
Within Google, some Google-built features for the Smart Display platform are powered by Flutter today. And the Assistant team is excited to continue to expand the portfolio of features built with Flutter for the Smart Display in the coming months; the goal this year is to use Flutter to drive the overall system UI.
For more Information and to build mobile apps using Flutter, Hire Flutter Developer from us as we provide you high-quality services 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:
We got a release recently with fantastic updates to the Toast component as well as some much-desired bug fixes. Let’s dig in.
Lithium is the lightest metal and has many uses, like lubrication, medication, pyrotechnics, and electronics. The metal is so soft that it can be cut with a knife. Lithium does not typically occur in nature but comes from other Ionic compounds.
There are so many great updates to the Toast component we wanted to dub this release "Lithium Toast."
Toasts show subtle messages to the user, usually in response to feedback or as notifications, and typically go away on their own after a short time. Previously, however, you couldn’t do a whole lot with toasts but display some info and let the user dismiss it. In 4.3, you can now set buttons to add additional functionality to toasts.
The buttons can show text or an icon, have a side property that determines if they show at the start or end of the toast, and a handler that takes a function for custom logic.
pic courtesy: blog.ionicframework.com
Here is the sample code for the above:
async showToast() { const toast = await this.toastController.create({ header: 'API Error', message: 'Error saving data.', buttons: [ { icon: 'close', side: 'start' }, { text: 'Retry?', side: 'end', handler: () => { toast.message = 'Retrying...'; // remove the retry button toast.buttons.splice(1, 1); // simulate a retry setTimeout(() => { toast.message = 'Success!'; toast.duration = 1500; // dismiss the toast in 2s setTimeout(toast.dismiss, 2000); }, 1000); // returning false so the toast doesn't dismiss return false; } } ] }); await toast.present(); }
Toast messages can now have headers as well.
In the above example, we specify a header as well as the toast message:
pic courtesy: blog.ionicframework.com
The slider component received some nice animation improvements and fixes in this release as well. We exposed animation events that can be passed in through the slide options to provide custom animations when swiping through the swiper component. See the Slides documentation for more details.
Angular devs will also be happy to know that the issue where the back button navigated back to the wrong tab has been fixed. Check out this PR for more details.
Some important bug fixes in this release surround datetime, and input label design. Check out the full release notes for a list of all the fixes.
For more Information and to build the app 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 the Hybrid mobile app using Ionic, please visit our technology page.
Source:
One year after the announcement of the first beta of Flutter, the team returns with the first feature update for Google’s mobile UI framework!
Flutter 1.2 is evidence of how much this framework has grown over the past year. This release focuses on three main areas: the improved stability, performance, and quality of the core framework; the work to polish visual finish and functionality of existing widgets; the new web-based tooling for developers building Flutter applications.
As the first feature update for Flutter, the 1.2 release brings some major improvements and important updates that include:
The team has been putting their efforts into improving the Material and Cupertino widget sets. Now developers will have more flexibility when using Material widgets. For Cupertino widgets, they have added support for floating cursor text adding on iOS. This can be triggered by either force pressing the keyboard or by long pressing the spacebar.
Flutter 1.2 supports Android App Bundles, a new upload format that includes all the app’s compiled code and resources. This format helps in reducing the app size and enables new features like dynamic delivery for Android apps.
This release includes the Dart 2.2 SDK. The Dart 2.2 comes with significant performance improvements to make ahead-of-time compilation even faster and a literal language for initializing sets. It also introduces Dart Common Front End (CFE) that parses Dart code, performs type inference, and translates Dart into a lower-level intermediate language.
In addition to the new updates and improvements featured in Flutter 1.2, the team announced the availability of a new web-based suite of programming tools. These tools aim to help Flutter developers debug and analyze apps. You can install these tools alongside the extensions and add-ins for Visual Studio Code and Android Studio. Here are the capabilities they offer:
Widget inspector – Enables visualization and exploration of the tree hierarchy that Flutter uses for rendering.
Timeline view – Helps you diagnose your application at a frame-by-frame level, identifying rendering and computational work that may cause animation ‘jank’ in your apps.
Full source-level debugger – Lets you step through code, set breakpoints and investigate the call stack.
Logging view – Shows activity you log from your application as well as network, framework and garbage collection events.
Check out the official announcement to find out more information about these tools, as well as all the updates featured in Flutter 1.2.
For more Information and to build mobile apps using Flutter, Hire Flutter Developer from us as we provide you high-quality services 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:
With the new CLI in IONIC 4, we have the possibility to use console commands to create new pages, components, directives, and services. Let’s see some examples:
Create page:
ionic g page User
Create a new Service:
ionic g service Item
There are great changes in the navigation and the Router, which in our opinion makes it much simpler and more understandable. Ionic 4 now uses the Angular Router.
Ionic 3 used navigation based on a simple stack where the new pages were placed on top of the stack doing push and when we wanted to navigate backward we simply made a pop of the last page.
Traditional websites use a linear history, which means that the user navigates to a page and can press the Back button to navigate. In Ionic Framework, applications can take this a step further by allowing parallel navigation. Which means that it is possible to have multiple navigation batteries and exchange them at any time. An example of this would be having navigation with tabs on one page and another with a side menu.
Something important to mention is that NavController and ion-nav in Ionic 4 have become obsolete. You can still use them, but only if your application does not use Lazy Loading.
Instead of ion-nav and NavController, Ionic 4 now uses @ angular/router.
As we already said, when creating an angular type application, Ionic 4 uses the navigation of Angular 6. That is why when creating our ionic 4 application of angular type we are automatically created an app-routing.module.ts file located in src/app.
Let’s see what this file has and what are the differences with an application in Ionic 3.
In Ionic 4:
import {NgModule} from '@ angular / core'; import {Routes, RouterModule} from '@ angular / router'; const routes: Routes = [ {path: '', redirectTo: 'home', pathMatch: 'full'}, {path: 'home', loadChildren: './pages/home/home.module#HomePageModule'}, ] ; @NgModule ({ imports: [RouterModule.forRoot (routes)], exports: [RouterModule] }) export class AppRoutingModule {}
To navigate to the HomePage we must do the following:
import {Router} from '@ angular / router'; constructor (private router: Router) {} navigateToHome () { this.router.navigate (['/ home']); }
In Ionic 3:
import {NavController} from 'ionic-angular'; import {HomePage} from './pages/home/home' constructor (public navCtrl: NavController) {} navigateToHome () { this.navCtrl.push (HomePage); }
It is important to understand that in Ionic 4, navController is no longer used to navigate the application.
Let’s take a step further and see how to pass information between two pages in Ionic 4.
// item is an object of the style: {title: 'Some title', description: 'Some description'} itemSelected (item) { this.router.navigate (['/ home', item]); }
Then, to obtain the item object in our HomePage, we use the ActivatedRoute.
import {ActivatedRoute} from '@ angular / router'; export class HomePage implements OnInit { item: any; constructor (private route: ActivatedRoute) {} ngOnInit () { this.route.params.subscribe (data =>; { this.item = data; }) } }
The lifecycles (known as lifecycles in English) that were used in Ionic 3 as for example ionWillLoad will no longer be used in Ionic 4. Now we will use the Angular life cycles such as ngOnInit and ngAfterViewInit.
In Ionic 3 the event (click) is used to navigate between pages from the html. In Ionic 4 we will use the routerLink, as it is used in the Angular applications.
An example would be:
<ion-button [routerLink] = "['/ product / 123']"> Go to Product 123 </ ion-button>
It is important to mention that it is no longer necessary to import the pages and services in the app.module.ts file, which in our opinion makes the project much simpler and more organized.
For each page, there will be a module of that page. For example, if we want to use Reactive Forms on any page, we only import ReactiveFormsModule on the page or pages that will use it.
The code below is from the src / app / pages / new-item / new-item.module.ts of our example application in Ionic 4 that you can download for free.
import {NgModule} from ' @ angular / core '; import {CommonModule} from ' @ angular / common '; import {FormsModule, ReactiveFormsModule} from ' @ angular / forms '; import {Routes, RouterModule} from ' @ angular / router '; import {IonicModule} from ' @ ionic / angular '; import {NewItemPage} from './new-item.page'; const routes: Routes = [ { path: '', component: NewItemPage } ]; @NgModule ({ imports: [ CommonModule, FormsModule, ReactiveFormsModule, IonicModule, RouterModule.forChild (routes) ], declarations: [NewItemPage] }) export class NewItemPageModule {}
For more Information and to build the app 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 the Hybrid mobile app using Ionic, please visit our technology page.
Source:
The migration from Ionic 3 to Ionic 4 is the most significant in the frameworks history, and it sets a course for Ionic that likely will not be deviated from for years to come.
We suggest the following general process when migrating an existing application from Ionic 3 to 4:
blank
startersrc/providers
to src/app/services
{ providedIn: 'root' }
in the @Injectable()
decorator.src/components
to src/app/components
, etc.src/app/app.scss
to src/global.scss
styleUrls
option of the @Component
decoratorIn many cases, using the Ionic CLI to generate a new object and then copying the code also works very well. For example: ionic g service weather
will create a shell Weather
service and test. The code can then be copied from the older project with minor modifications as needed. This helps to ensure proper structure is followed. This also generates shells for unit tests.
In Ionic 4, the package name is @ionic/angular
. Uninstall Ionic 3 and install Ionic 4 using the new package name:
$ npm uninstall ionic-angular $ npm install @ionic/angular
While migrating an app, update the imports from ionic-angular
to @ionic/angular
.
One of the major changes between an Ionic 3 app and an Ionic 4 app is the overall project layout and structure. In v3, Ionic apps had a custom convention for how an app should be setup and what that folder structure should look like. In v4, this has been changed to follow the recommended setup of each supported framework.
For example, if an app is using Angular, that project structure will be exactly what an Angular CLI app would be. This change, while not too difficult to accommodate, helps to keep common patterns and documentation consistent.
The above comparison is an example of a v4 app’s project structure. For developers with experience in a vanilla Angular project, this should feel really familiar.
There is a src/
directory that acts as the home for the app. This includes the index.html
, any assets, environment configuration, and any app specific config files.
While migrating an app to take advantage of this new layout, it is suggested that a new project “base” is made with the CLI. Then, with the new project layout, migrate the features of the app piece by piece. Pages/components/etc. should be moved into the src/app/
folder.
Ensure your Ionic configuration file has the appropriate type
. The project type for v3 is ionic-angular
. The project type for v4 is angular
. If this value is incorrect, the CLI may invoke the incorrect build scripts.
See the following ionic.config.json
as an example:
{ "name": "my-app", "type": "angular" }
Between V3 and V4, RxJS was updated to version 6. This changes many of the import paths of operators and core RxJS functions. Please see the RxJS Migration Guide for details.
With V4, we’re now able to utilize the typical events provided by Angular. But for certain cases, you might want to have access to the events fired when a component has finished animating during it’s route change. In this case, the ionViewWillEnter
, ionViewDidEnter
, ionViewWillLeave
, and ionViewDidLeave
have been ported over from V3. Use these events to coordinate actions with Ionic’s own animations system.
Older events like ionViewDidLoad
, ionViewCanLeave
, and ionViewCanEnter
have been removed, and the proper Angular alternatives should be used.
In prior versions of Ionic, overlay components such as Loading, Toast, or Alert were created synchronously. In Ionic v4, these components are all created asynchronously. As a result of this, the API is now promise-based.
// v3 showAlert() { const alert = this.alertCtrl.create({ message: "Hello There", subHeader: "I'm a subheader" }); alert.present(); }
In v4, promises are used:
showAlert() { this.alertCtrl.create({ message: "Hello There", subHeader: "I'm a subheader" }).then(alert => alert.present()); } // Or using async/await async showAlert() { const alert = await this.alertCtrl.create({ message: "Hello There", subHeader: "I'm a subheader" }); await alert.present(); }
Since Navigation has changed, the mechanism for lazy loading has also changed in V4.
In v3, a typical lazy loading setup worked like this:
// home.page.ts @IonicPage({ segment: 'home' }) @Component({ ... }) export class HomePage {} // home.module.ts @NgModule({ declarations: [HomePage], imports: [IonicPageModule.forChild(HomePage)] }) export class HomePageModule {}
However, in v4, lazy loading is done via the loadChildren
method of the Angular router:
// home.module.ts @NgModule({ imports: [ IonicModule, RouterModule.forChild([{ path: '', component: HomePage }]) ], declarations: [HomePage] }) export class HomePageModule {} // app.module.ts @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, IonicModule.forRoot(), RouterModule.forRoot([ { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' }, { path: '', redirectTo: 'home', pathMatch: 'full' } ]) ], bootstrap: [AppComponent] }) export class AppModule {}
Since v4 moved to Custom Elements, there’s been a significant change to the markup for each component. These changes have all been made to follow the Custom Elements spec, and have been documented in a dedicated file on Github.
To help with these markup changes, we’ve released a TSLint-based Migration Tool, which detects issues and can even fix some of them automatically.
For more Information and to build the app 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 the Hybrid mobile app using Ionic, please visit our technology page.
Source:
After more than a year of work, the Ionic Framework team has released version 4. The new version offers us significant changes in performance, compatibility with multiple frameworks (not only with Angular as previous versions), new documentation and many other improvements that we will analyze in this article.
Surely you will have many doubts — and perhaps fear — about this version change. But the good news is that despite the great improvements offered by Ionic 4, migrating from Ionic 3 to Ionic 4 is super simple!
In this article, we want to explain the comparison between Ionic 4 and Ionic 3, as well as the novelties and new concepts of this new version. Let’s see practical examples of how to use the new Ionic CLI, and the new Router. Then at the end, we will guide you on how to migrate your applications from Ionic 3 to Ionic 4.
Ionic Framework 4 was completely rewritten to use the Web APIs and each component is packaged as a Web Component. This allows the framework to be projected into the future. To help create the Web Components, the team created a tool called Stencil.
Web components are a set of web APIs that allow you to create HTML tags that are reusable and encapsulated.
One way to explain the Web Components is to imagine them as reusable user interface widgets that are created using open web technologies. They are part of the browser, and therefore do not need external libraries.
With Web Components, you can create almost anything that can be done with HTML, CSS, and JavaScript. In this way, you can create a portable component that can be easily reused.
Web components make the browser the one who does more work and in this way, they provide important improvements in the performance and load times of modern applications.
The Web Components are based on the following specifications:
Since its inception, Ionic Framework was built using Angular. But now with the popularity and support of web components, this has changed.
One of the great changes of this new version of Ionic is that it is completely independent of the base framework (previously this place was occupied only by Angular).
Since the components of the Ionic Framework, such as <ion-button>, are now encapsulated as Web Components, it is no longer necessary to bind to a base framework. Web components work with any framework, in fact, if you prefer you can not use any Framework.
What the Ionic Framework team intends with this change is that Ionic is a UI Framework that can work with whatever technology the programmers choose. This opens the door to future applications that can be created in Vue or in React using the Ionic web components.
Ionic CLI on Ionic 4The CLI 4.0 has been totally improved both in the features it offers and in its speed and ease of use.
In order to use it, we must have the latest version of the CLI in our development environment. We can install it by running the following command:
npm install -g ionic @ latest
To use the latest version of the CLI we must have installed node 8.9 or higher.Visit https://nodejs.org/ to find instructions on how to update Node.js.
Once the new CLI is installed, we can now create our first application with ionic 4. Running the following command, the CLI will create a new application with the basic structure of Ionic 4:
ionic start appName blank --type = angular
appName is the name of your project
blank is the template that we choose to create the skeleton of the application
type = angular is the type of project
Then to test your application in the browser you can run the same command that we used before in Ionic 3.
ionic serve
This is the structure of our new Ionic 4 application generated with the CLI:
pics courtesy: medium.com
You are probably wondering how to migrate an existing application from Ionic 3 to one from Ionic 4. The Ionic Framework team has written super detailed documentation with the steps for migration.
The truth is that the migration process is quite simple and personally has not generated any problems.
You can also use the migration linter which is a tool that automatically checks your code and tells you what changes you should make.
For more Information and to build the app 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 the Hybrid mobile app using Ionic, please visit our technology page.
Source:
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
© 2025 — HK Infosoft. All Rights Reserved.
© 2025 — HK Infosoft. All Rights Reserved.
T&C | Privacy Policy | Sitemap