Google I/O Company launched is Flutter 2.2, This app is a very reliable and demonstrable app to the planners and focuses on a lot of improvements. Flutter 2.2 also includes a well-developed process for displaying apps on operating systems like Linux, macOS, Windows, and so on. Updates are focused on improving bugs and speed. Many problems have been resolved in Floater such as web app providing background caching using a service worker.
Flutter is a bit version after the update. This latest update of Flutter polishes and optimizes iOS updates. If seen, the Flutter platform is one of the fastest-growing technology as found from the side of slash data that 45% of developers prefer to work on the Flutter platform. On other platforms, this flutter app development shows a lot of its popularity in the development industry. There have been many improvements in the technology of this cross-platform such as bug fix tolling updates etc.
In this blog, we will learn about Flutter 2.2 & Dart 2.13. We will also implement a demo and how to use them in your flutter applications. So let’s get started. so let’s get started.
Table Of Contents :
Flutter Platform Adaptive Apps
Flutter 2.2:
This new update release of Flutter 2.2 includes some improvements such as new updates like Android iOS web with updates like icon updates, text handling and mouse cursor for scrollbar behavior, and TextSpan widgets. Support includes new updates such as.
It supports multiple platforms with a codebase. All these features of the update are stable, which are available for app production, all these we can use in the web app of Flutter. Using Flutter is also popular for people because by using it, we quickly create a new app.
Which displays the same size in the consolidation for all platforms like Android iOS web. Flutter is the best thing that has been built on the dart, which has got a new version of the dart. See below for the new update of the dart.
Dart 2.13:
Dart 2.13 prominence is significantly associated with the release of Flutter 2.2 as in this release Null Safety is its key productivity feature that helps us avoid all kinds of null errors including a class of bugs that are difficult to find is.
This release of Dart also has a variety of nicknames, which allows you to create a variety of nicknames in your works. Dart 2.13 also has a better performance than Dart Fuffy. It has new official images of Docker for Github.
In this, Dart supports native interoperability. This new update of Dart supports FFI arrays and its structure for packaging, this update of Dart has also improved the readability of the code. This release supports short and good names in any complex types. It allows renaming all classes in a non-breaking manner, allowing you to avoid long clumsy names in your classes.
Flutter 2.2 Web Update:
In this release of Flutter 2.2, improvements have been made to the web as well as it experiences mobile content on the web as we know that we can also run Android, iOS, and web from the same Kodebase in earlier versions of Flutter Web. The service worker used to download the app update in the background for the user to access the old version when the app was downloaded.
After that, the user could not see his change until the browser refreshed the page twice but in Flutter 2.2 the service worker detects the change and the user will wait for the app to be updated to use as Web performance has been further improved to top zero security in the Flutter web update. In this web performance platform, HTML, Canvas has also been improved.
This Flutter update has also supported the font features which we can apply from the font feature set, we have used canvas and PPI to implement it so that it appears in the right place to hover. The update to Flutter 2.2 also added support for shader masque and computeLineMetrix, looking at the similarity gaps between the web and the app.
Once the user enables accessibility, it creates a Dom tree similar to the RenderObject DOM and the Aira translates between semantic properties. In this update, there has been some change in the position of the semantic node to close the transform gap between the mobile and the app.
For new web applications of flutter, Layout Explorer now supports the latest version of the version DevTools.
=> For Example:
In the Flutter 2.2 update version, I have created a design for the web in which I have taken an image and text which we have managed both from the column widget, after which we select the select device web chrome and then we run the project when we run When the project is built, a browser opens, in which we see that the design we have created displays the web browser as given in an image above. And below is the reference of the code.
Scaffold(
appBar:AppBar(
title:Text('Flutter Demo'),
),
body:Center(
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/images/logo.png', height:200.0,
fit: BoxFit.scaleDown,), SizedBox(
height:30,
), Text('Welcome To Flutter',style:TextStyle(color:Colors.black,fontSize:18),),
],
),
),
);Demo Module:
=> Incremental installation and page iOS transition:
After the new release of Flutter 2.2, this flutter has made iOS Cuopartino’s transition much faster and much easier than the previous version, with the flutter animations reducing frame rendering by up to 75%.In this we do not seek the ultimate improvement of the performance of the user, we are looking for the performance of the development, while the development process is growing more incremental iOS installs that provide flutter updates, reduces the time it takes to install the updated version of your iOS application by up to 40%,
Flutter Platform Adaptive Apps:
Flutter is meant to have a customized design for each platform, it supports the same size across all platforms such as mobile, tablet, and desktop in the same code, it allows for different input types (touch vs mouse + keyboard) and Different platform navigation is an app that adjusts its size to different types of devices, this is what we call the app as customized apps.
Platform adaptive apps include model overlays on desktops and sheets on mobile that reflect users’ expectations and allow for easily adaptive and responsive UI on all platforms, such as mobile, with maximum usability pulsing to layout and navigation flow.
It recommends the Folio app on gSkinner Flokk and Flutter platform. You can download Flokk and Folio directly from the App Store or run them directly on the browser.
UX part of Flutter’s customized app for the large screen using which the app is optimized and based on all types of devices. Under the guidance of the material team, the main feature is based on all the big screens, using many layouts as well as updates and updates design kit of many components.
Flutter Material Icons:
The new release of Flutter has added a new icon to Flutter. It has two different PRs adding new icon material. It also includes an icon for the dash itself. This update of Flutter has more than 7000 material icons. You can search for icons by category or name using fonts.google.com/icons. link.
Once you find the right icon, then the new flutter tab tells us how to use it. Either app can download icons to use stand-alone assets as previously it was not so easy to add a dash to an app.
Automatic Scrolling Behavior:
In this Flutter 2.2 latest update version, we see what is the automatic behavior of any design when we scroll Seeing the behavior, both Android and iOS are the same, yet it does not show the same in the default. When we talk about the desktop app, we automatically see its scrollbar when the item is larger than the size. To be shown automatically, we have to add the scrollbar parent widget. This release adds automatic scrollbars to mobile and desktop.
When we run the list on the desktop using Scrolling Behavior:
We see that a scrollbar appears on the side which we can scroll up and down while scrolling, our list is also scrolled. If we do not want to show a scrollbar in our list then we can set its scrollbar theme. You can see the new default scrollbar Behavior and code information, check out docs on flutter. dev.
=> For Example:
As I used the Scrolling Behavior List in a demo in which we took a ListView.builder and wrapped it with ScrollConfiguration, then later in ListViewBuilder we used the ListTile widget which has some icons and text when we run it on the web. Then a scrollbar appears as you can see in the image above. And below is the reference of the code.
ScrollConfiguration(
// behavior: MyCustomScrollBehavior(),
behavior: ScrollConfiguration.of(context).copyWith(scrollbars: true),
child: ListView.builder(
controller: controller,
itemCount:50,
itemBuilder: (BuildContext context, int index) {
//return Text('Item $index');
return ListTile(
leading: Icon(Icons.list),
trailing: Icon(Icons.more_vert),
title:Text("List item No $index")
);
}
),
),Demo Module:
Improved Text Handling:
As we see, the flutter has improved on every platform like the mobile form factor it is not as important on the mobile compared to the desktop form factor. In this flutter update, we see that it also handles text input such as via widget keystrokes. Features such as eliminate from and enable it to be fully customizable with text actions. You use it to handle any keystrokes.
An example of this is that you can make a tab between TextField and the Flutter app in Flutter.
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: 'Flutter Text Editing Fun',
home: HomePage(),
);
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
body: Column(
children: [
TextField(),
OutlinedButton(onPressed: () {}, child: const Text('Press Me')),
],
),
);
}Mouse Cursor Over Text Spans:
Previously, when we moved the mouse over any text on the web when you mouse over the cursor over the arrow, the arrow cursor would appear, but you would move the cursor over any given linkless text like a hand. The cursor appears as soon as we click on it, then the link given to it opens on the web, we can go to its web, which we can do differently and differently.
=> For Example:
As you can see in the image above, two different colors are a line of text which we have done with RichText() which has two TextSpan(). One TextSpan is text in, we have defined the URL of the web with the help of urlLauncher library. And below is the reference of the code.
Scaffold(
appBar: AppBar(title: Text('Mouse Cursor Over Text Spans')),
body:Padding(
padding:EdgeInsets.all(20),
child:Center(
child: RichText(
text: TextSpan(
style: TextStyle(fontSize: 48),
children: [
TextSpan(
text: 'This is rcihtext widget line, ',
style: TextStyle(color: Colors.black),
),
TextSpan(
text: 'this line is',
style: TextStyle(color: Colors.red),
recognizer: TapGestureRecognizer()
..onTap = () {
urlLauncher.launch('https://flutter.dev');
},
),
],
),
),
),
),Demo Module:
Conclusion:
In the article, I have explained What’s new in Flutter 2.2 & Dart 2.13. This was a small introduction to Flutter 2.2 & Dart 2.13 On User Interaction from my side.
I hope this blog will provide you with sufficient information in Trying up the What’s new in Flutter 2.2 & Dart 2.13 in your project. In this, we have told you what is new in the new update of Flutter 2.2 and how it works on the web app, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
