{"id":5232,"date":"2024-05-28T11:27:07","date_gmt":"2024-05-28T11:27:07","guid":{"rendered":"https:\/\/favtutor.com\/articles\/?p=5232"},"modified":"2024-05-28T13:10:48","modified_gmt":"2024-05-28T13:10:48","slug":"flutter-dart-new-features","status":"publish","type":"post","link":"https:\/\/favtutor.com\/articles\/flutter-dart-new-features\/","title":{"rendered":"These New Flutter\/Dart Features Make My Life Easier"},"content":{"rendered":"\n

My favourite cross-platform framework has gone to the next level!<\/p>\n\n\n\n

Flutter is a great choice for building cross-platform applications, not only mobile but also web and desktop. You can do the same with Javascript, using React Native, Electron and other frameworks, but the unification of the codebase and the developer experience of Flutter is unbeatable, especially for solo developers like me.<\/p>\n\n\n\n

Also the language, Dart, is a great choice for building applications. Some say it’s just a “better Typescript”, and although I partially agree with that, I found myself more productive with Dart than with Typescript.<\/p>\n\n\n\n

Despite these advantages, Flutter and Dart are still young compared to other frameworks and languages. But the Flutter team has been working hard to make it better every year. <\/p>\n\n\n\n

This year, in 2024, they have introduced some new features that make my developer life even easier. There are many new features (Impeller enhancement, Game dev support, etc), but I want to share my personal favorite 3 features that I found very useful in my projects.<\/p>\n\n\n\n

1) Google AI Dart SDK<\/strong><\/h2>\n\n\n\n

We’re living in the era of AI! As a solo developer who helps startups build MVPs, I often get requests to build AI-powered features from my clients. But Dart’s AI ecosystem was not as mature as Python or Javascript, so I had to build an ad-hoc solution for each project.<\/p>\n\n\n\n

Due to this popular demand, Google has released an AI SDK for Dart<\/a> in 2024. This SDK makes it super easy to integrate AI features into your Flutter applications, using Google’s Gemini models. <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Here’s an example of how you can use it:<\/p>\n\n\n\n

First, install the package:<\/p>\n\n\n\n

$ flutter pub add google_generative_ai<\/code><\/p>\n\n\n\n

Then, you can use it in your code. If you have used LangChain before, you’ll find this API very similar:<\/p>\n\n\n\n

import 'package:google_generative_ai\/google_generative_ai.dart';\n\nfinal apiKey = Platform.environment['GOOGLE_API_KEY'];\n\nvoid main() async {\nfinal model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey);\nfinal content = [\nContent.text("Explain what's the difference between Dumplings and Gyoza"),\n]\n\nfinal response = await model.generateContent(content);\n\nprint(response.text);\n}<\/pre><\/div>\n\n\n\n
Not only can you generate text, but you can also generate images, videos, and even code snippets. The possibilities are endless.<\/p>\n\n\n\n
Since Google has always made it easy to interoperate with their products – Flutter, Firebase, Google Cloud, etc. – I expect they’ll also make it easy to use the AI SDK with other Google products in the future. I personally think this will broaden the use of AI in the mobile\/web development space significantly.<\/p>\n\n\n\n
2) Flutter meets WebAssembly<\/strong><\/h2>\n\n\n\n
I see many people say “Don’t use Flutter for web development<\/em>“. If they are talking about “website”, then I agree. In that case, you should use HTML, CSS, and Javascript. But if they are talking about “web applications”, then I strongly recommend using Flutter. <\/p>\n\n\n\n
Modern web applications are getting more complex, and Flutter is a great choice for building complex web applications with decent performance. The problem is, when we want even more performance, sometimes the WebJS generated from Flutter isn’t enough.<\/p>\n\n\n\n
That’s why I was so excited when I heard that Flutter has added support for WebAssembly<\/a> in 2024.<\/p>\n\n\n\n
WebAssembly is a new standard that allows you to run high-performance code written in languages like C, C++, and Rust in the browser. It’s a great way to speed up your web applications, especially if you have computationally intensive tasks. <\/p>\n\n\n\n
Unfortunately, until recent years WebAssembly did not support garbage collection, which made it hard to use with languages like Dart that rely on garbage collection. Hence, to use WebAssembly features in Flutter projects, developers had to compile C, C++, or Rust code to WebAssembly and then call it from Dart using FFI (or use bridge libraries).<\/p>\n\n\n
\n
\"Flutter<\/figure>\n<\/div>\n\n\n
Recently WebAssembly has added support for garbage collection, and many modern browsers have implemented this new version of WebAssembly. This means now it’s possible to compile Dart code into WebAssembly, which the Flutter build system will do. <\/p>\n\n\n\n
According to the Flutter team, Flutter web apps compiled into WebAssembly are 2x faster than the ones compiled into Javascript.<\/strong> This is a huge improvement, and it opens up a lot of possibilities for building high-performance web applications with Flutter, without using system-level languages.<\/p>\n\n\n\n
Of course, if you really need the best-of-the-best performance, you should still consider using C, C++, or Rust, but for most web applications, Flutter WebAssembly should be more than enough.<\/p>\n\n\n\n
3) Finally, Dart macros! (experimental)<\/strong><\/h2>\n\n\n\n
Almost in every Flutter project that communicates with backend API, you have to write codes for JSON serialization\/deserialization and data class equality. Since these features are very common, there are dedicated packages like json_serializable<\/code>, freezed<\/code> to help you with that. <\/p>\n\n\n\n
For example, you can use freezed<\/code> to generate data classes with equality and serialization\/deserialization methods:<\/p>\n\n\n\n
@freezed\nclass User with _$User {\nconst factory User({\nrequired int age,\nrequired String name,\nrequired String username,\n}) = _User;\n\nfactory User.fromJson(Map json) => _$UserFromJson(json);\n}<\/pre><\/div>\n\n\n\n
Writing only this much code + running build_runner<\/code>, you can get a lot of features like equality, serialization\/deserialization, and more. The problem is that running build_runner<\/code> every time you make a change in your data class can be annoying. Also, many of the times I don’t need all the generated code, but it’s kinda hassle to build my own code generator.<\/p>\n\n\n\n
And of course, I wasn’t the only one who had complained about this. The community has been asking for meta-programming tools better than mere code generations, and finally, they have introduced an experimental “macro” feature. Unlike code generation tools, macros are “static metaprogramming” tools, which means they run at compile-time, not at runtime. <\/p>\n\n\n\n
Also, you do not need to run build_runner<\/code> to generate the code, because macros are fully integrated into the Dart language and executed automatically in the background by Dart tools.<\/p>\n\n\n\n
How to use Macros in Dart?<\/strong><\/h3>\n\n\n\n
Currently, Macros are experimental, but you can try it out.<\/p>\n\n\n\n
The Dart team has implemented the JsonCodable<\/code> macro in Flutter’s json<\/code> library, and here’s how you can use it. Make sure you have the Dart version 3.5.0-152 or later.<\/p>\n\n\n\n
First, you have to enable it with a flag in your analysis_options.yaml<\/code> file:<\/p>\n\n\n\n
analyzer:
enable-experiment:
- macros<\/code><\/p>\n\n\n\n
Next, install the package:<\/p>\n\n\n\n
$ flutter pub add json<\/code><\/p>\n\n\n\n
Run the project with the experimental flag:<\/p>\n\n\n\n
$ dart run --enable-experiment=macros bin\/my_app.dart<\/code><\/p>\n\n\n\n
Then, you can use it in your code. This example shows how you can use the JsonCodable<\/code> macro to generate JSON serialization\/deserialization code for your data classes:<\/p>\n\n\n\n
import 'package:json\/json.dart';\n\n@JsonCodable() \/\/ Macro annotation.\nclass User {\nfinal int? age;\nfinal String name;\nfinal String username;\n}\n\nvoid main() {\n\/\/ Given some arbitrary JSON:\nvar userJson = {\n'age': 5,\n'name': 'Roger',\n'username': 'roger1337'\n};\n\n\/\/ Use the generated members:\nvar user = User.fromJson(userJson);\nprint(user);\nprint(user.toJson());\n}<\/pre><\/div>\n\n\n\n
How to create your own macros?<\/strong><\/h3>\n\n\n\n
You can create your own macros by creating a macro class<\/code>. Every macro class should implement a specific macro interface. For example, if you want to create a macro that generates class declarations, you should implement the ClassDeclarationsMacro<\/code> interface:<\/p>\n\n\n\n
macro class MyMacro implements ClassDeclarationsMacro {\n\u00a0\u00a0\u00a0const MyMacro();\n  \n\u00a0\/\/ ...\n}<\/pre><\/div>\n\n\n\n
You can have fun with macros by comparing the original code and the “augmented code”, which is generated code from macros in the background.<\/p>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
I’ve introduced only 3 features that I found very useful in my projects, but there are many more features that Flutter and Dart teams have introduced in 2024. If you’re a game developer, you might be interested in the new “Devtools plugin for Flame”. If you are a savvy developer who really cares about performance, you might be interested in the new “Impeller enhancement”.<\/p>\n\n\n\n
Many people used to say “Flutter will meet its end soon, just like many other Google projects”. But I don’t think so. Google has been investing a lot in Flutter, and the ecosystem is getting better every year. And also, Google is already using Flutter in many of their products, like Google Earth. So I can say the Flutter is most likely to stay for a long time.<\/p>\n\n\n\n
I’m excited to see what new features Flutter and Dart teams will introduce in 2025. What were your favorite Flutter\/Dart features in 2024? And what features do you expect in 2025? Let me know in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"
I talked out some of the best new features introduced in Flutter or Dart, including  Google AI Dart SDK,  WebAssembly, and Macros.<\/p>\n","protected":false},"author":25,"featured_media":5235,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":null,"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[42],"tags":[82,278,277,202],"class_list":["post-5232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-trending","tag-coding","tag-dart","tag-flutter","tag-programming"],"_links":{"self":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/5232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/comments?post=5232"}],"version-history":[{"count":4,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/5232\/revisions"}],"predecessor-version":[{"id":5248,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/5232\/revisions\/5248"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media\/5235"}],"wp:attachment":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media?parent=5232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/categories?post=5232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/tags?post=5232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}