Content Source:
- freecodecamp.org
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.
How to Write a Flutter Web Plugin
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.
Example: package:url_launcher
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 .
Use 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.
Creating 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.
Registering the plugin with 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.
Handling method calls
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.
Using the web plugin in the example app
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:
- medium.com
Announcing Flutter 1.7
A smaller release after the major feature announcements at Google I/O.
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 Support for New Apps
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.
Support for Android app bundles and 64-bit Android apps
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.
New widgets and framework enhancements
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!
Focus on the Fundamentals
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.
An ever-growing Flutter community
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:
- medium.com
Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop
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.
From Mobile to Multi-Platform
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.
A Portable UI Framework for All Screens
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 for Web
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.
Flutter for Mobile Devices
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 for Desktop
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.
Flutter for Embedded Devices
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:
- developers.googleblog.com
Flutter 1.2: First Feature Update Release
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.
Let’s have a look at the highlights of Flutter 1.2.
As the first feature update for Flutter, the 1.2 release brings some major improvements and important updates that include:
- Improved testing and code infrastructure
- Improved performance and quality of the overall framework
- Broader support for new UI languages
- including support for floating cursor text editing
- Support for a broader set of animation easing functions
- Support for new keyboard events and mouse hover support in preparation for deeper support for desktop-class operating systems
- Support for in-app purchases
Improved Material and Cupertino widget sets
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.
Support for Android App Bundles
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.
Dart 2.2 SDK becomes available with Flutter 1.2
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:
- jaxenter.com
- hub.packtpub.com
Flutter – easily bring your ideas to life on native apps.
Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.
Flutter targets the sweet spot of mobile development: performance and platform integrations of native mobile, with high-velocity development and multi-platform reach of portable UI toolkits.
Why Flutter Will Take Off in 2018
Fast Development:
Hot Reload in milliseconds to paint your app to life. Use a rich set of fully-customizable widgets to build native interfaces in minutes.
Flutter’s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.
Expressive and Flexible UI
Expressive and Flexible UIQuickly ship features with a focus on native end-user experiences. Layered architecture allows full customization, which results in incredibly fast rendering and expressive and flexible designs.
Delight your users with Flutter’s built-in beautiful Material Design and Cupertino (iOS-flavor) widgets, rich motion APIs, smooth natural scrolling, and platform awareness.
Native Performance
Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts to provide full native performance on both iOS and Android. Make your app come to life with platform APIs, 3rd party SDKs, and native code. Flutter lets you reuse your existing Java, Swift, and ObjC code, and access native features and SDKs on iOS and Android.
Modern, reactive framework
Easily compose your UI with Flutter’s modern reactive framework and rich set of platform, layout, and foundation widgets. Solve your tough UI challenges with powerful and flexible APIs for 2D, animation, gestures, effects, and more.
- High-velocity development with features like stateful Hot Reload, a new reactive framework, rich widget set, and integrated tooling.
- Expressive and flexible designs with composible widget sets, rich animation libraries, and a layered, extensible architecture.
- High-quality experiences across devices and platforms with our portable, GPU-accelerated renderer and high-performance, native ARM code runtime, and platform interop.
Our tools also improved significantly, with support for Android Studio, Visual Studio Code, new refactoring to help you manage your widget code, platform interop to expose the power of mobile platforms to Flutter code, improved stateful hot reloads, and a new widget inspector to help you browse the widget tree.
Thanks to the many new features across the framework and tools, teams across Google (such as AdWords) and around the world have been successful with Flutter. Flutter has been used in production apps with millions of installs, apps built with Flutter have been featured in the App Store and Play Store and startups and agencies have been successful with Flutter.
Apps built with Flutter deliver quality, performance, and customized designs across platforms. pics courtesy: developers.googleblog.com
For more Information and to build mobile app 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 App using Flutter, please visit our technology page.
Content Source:
- flutter.io
- developers.googleblog.com
