The article is a compilation of several author translations of articles from the Dart/Flutter development team, links to the original materials will be given at the end of the article.

Dart 3.3: A revolutionary update for productivity and cross-platform development

Dart 3.3 has been released, and it’s a real revolution for productivity and cross-platform development! Get ready to improve your apps with help extension types, which redefine performance optimization and interaction with native code. In addition, our updated interaction model with JavaScript provides reliable type checking and a convenient way to use the capabilities of the web platform. All this paves the way for support WebAssembly. And yes, you read that right – Google AI in your Dart apps! All of this is available in Dart 3.3. Let’s dive in!

Introduction to extensible types

Extensible types are wrappers for nullable types.

A zero-cost wrapper in the context of programming means a data type wrapper that does not incur additional performance costs when using it. This is achieved by compiling such a wrapper in such a way that it does not add any overhead to inverted type operations. In the context of Dart 3.3, extended types allow such wrappers to be created, optimizing the performance of responsive code and interoperability with native platforms without the overhead of allocating memory for typical wrappers.

Use them to optimize performance-sensitive code, especially when interacting with host platforms. Extensible types offer the convenience of custom types while eliminating the typical memory allocation overhead for wrappers.

extension Wrapper(int i) {
  void showValue() {
    print('my value is $i');
  }
}
void main() {
final wrapper = Wrapper(42);
wrapper.showValue(); // Печатает 'my value is 42'
}

In the above example Wrapper defined as an extensible type but used as a normal Dart type. You can instantiate it and call functions. The key difference is that Dart compiles it as normal int. Extensible types allow you to conveniently create a type with unique members without the overhead of memory allocation for a typical wrapper type. Thus, while the function extension membersavailable in Dart since version 2.7, allows you to add functions and properties to an existing type, function extension type can do the same, and also allows you to define a new API that hides the underlying representation.

This is especially useful for interacting with host platforms. Native types can be used directly without the expense of wrappers and associated overhead, while providing a clean, production-ready Dart API. Learn more in the new documentation on extensible types.

Development of interaction with JavaScript

Dart 3.3 introduces a new model for interacting with JavaScript libraries and the web platform. It starts with a new set of APIs for interacting with JavaScript: libraries dart:js_interop. Dart developers now have access to a typed API for interacting with JavaScript. This API clearly defines the boundary between the two languages ​​with static validation. This eliminates a whole class of pre-compile problems. In addition to new APIs for accessing JavaScript code, Dart now includes a new model for representing JavaScript types in Dart using extensible types.

import 'dart:js_interop';
/// Представляет браузерный API console.
extension type MyConsole(JSObject _) implements JSObject {
external void log(JSAny? value);
external void debug(JSAny? value);
external void info(JSAny? value);
external void warn(JSAny? value);
}

A syntax based on extension types allows for more expressiveness and is more robust than member extension functions. This makes it easy to use the JavaScript API with Dart. For details, see in the new JS interop documentation.

Improved libraries for the browser

Since version 1.0, the Dart SDK includes a set of comprehensive libraries for the browser. They include the core library dart:htmlas well as libraries for SVG, WebGL and others.

An improved interaction model with JavaScript opened the possibility to rethink these libraries. Moving forward, our support for browser libraries will focus on package:web. This simplifies versioning, speeds up updates, and aligns them with MDN resources.

This chain of improvements leads to the next important step: Dart’s compilation WebAssembly.

Preparing for WebAssembly with Dart 3.3

Dart 3.3 allows package and application developers to lay the foundation for web applications compiled in WebAssembly. Although WebAssembly support in Flutter Web is still in the experimental stage, the team is actively working on its stabilization. To run Flutter apps in a web browser using WebAssembly, you need to migrate all code – both the app itself and all its dependencies – to the new JavaScript Interop engine and package package:web. At the same time, legacy JavaScript and browser libraries remain unchanged and are supported for compiling JavaScript code. However, WebAssembly compilation requires migration.

We’ve created a migration guide to help developers get started with Wasm. We hope that by the time Wasm is included in the stable version, most popular packages will support it.

More information: Google AI Dart SDK

Google has released a beta version of the Google AI Dart SDK. You can add generative AI features to your Dart or Flutter applications. These programs use Gemini, Google’s newest family of AI models. Check out the package package:google_generative_ai – https://pub.dev/packages/google_generative_ai.

How to start using?

Get acquainted with a quick guide to Dart for a detailed step-by-step setup guide:

1. Get the Gemini API key from Google AI Studio. We strongly recommend that you do not include the key directly in your code and do not check files containing the key into version control systems. When developing, we recommend using flutter run -d [DEVICE NAME] — dart-define=API_KEY=[YOUR API KEY]to run the app in an emulator/simulator using your API key as an environment variable.

2. Add the Google AI Dart SDK to your Dart or Flutter app by running dart pub add google_generative_aior flutter pub add google_generative_aiin accordance. It adds up google_generative_aidependency on the `pubspec.yaml` file.

3. Initialize the generative model in your code:

import 'package:google_generative_ai/google_generative_ai.dart';

// Access your API key as an environment variable (see first step above)
final apiKey = Platform.environment['API_KEY'];
if (apiKey == null) {
  print('No \$API_KEY environment variable');
  exit(1);
}

final model = GenerativeModel(model: 'MODEL_NAME', apiKey: apiKey);

4. You can now start using the Gemini API to implement various use cases. For example, if the application’s input includes both text and images, use gemini-pro-visionmodel and generateContentmethod for creating text output:

import 'dart:io';

import 'package:google_generative_ai/google_generative_ai.dart';

void main() async {
  // Access your API key as an environment variable (see first step above)
  final apiKey = Platform.environment['API_KEY'];
  if (apiKey == null) {
    print('No \$API_KEY environment variable');
    exit(1);
  }
  // For text-and-image input (multimodal), use the gemini-pro-vision model
  final model = GenerativeModel(model: 'gemini-pro-vision', apiKey: apiKey);
  final (firstImage, secondImage) = await (
    File('image0.jpg').readAsBytes(),
    File('image1.jpg').readAsBytes()
  ).wait;
  final prompt = TextPart("What's different between these pictures?");
  final imageParts = [
    DataPart('image/jpeg', firstImage),
    DataPart('image/jpeg', secondImage),
  ];
  final response = await model.generateContent([
    Content.multi([prompt, ...imageParts])
  ]);
  print(response.text);
}

Learn Gemini API documentation and familiarize yourself with examples of Dart and Flutter applications in the GitHub repository, where you’ll find detailed tutorials and examples of how to use the SDK for various use cases, or from this example application on DartPad, which is a free and open source program. an online Dart and Flutter snippet editor, now built with Flutter. Report any issues or let us know feature requests at GitHub repositories for generative-and-dart .

Google II-studio

In addition to the SDK, Google AI Studio is a browser-based development environment for prototyping using generative models. This allows you to quickly develop hints for your use case and then receive an API key to use when developing your application. You can sign in to Google AI Studio with your Google account and use the free quota that allows you to run 60 queries per minute. To help us improve the quality of the product, Google AI Studio input and output may be made available to trained reviewers when using the free quota. This data is stripped of your Google Account and API key.

We’ll be adding Dart to Google AI Studio soon, so stay tuned! This will allow you to simply click Get Code, select the new Dart tab (which will be next to the existing supported languages), and then “Copy” the Dart code to bring your work to your IDE of choice.

Share what you’re building!

We look forward to seeing what you build with Gemini, as does the LeanCode team that used the Gemini API to build arb_translate . It’s a package that helps developers automatically perform language translation, simplifying localization in Flutter apps.

Original materials:

https://medium.com/dartlang/dart-3-3-325bf2bf6c13

https://medium.com/@sahaj.blup/flutter-3-19-enhanced-app-performance-and-more-4f45971b4e64

https://medium.com/flutter/harness-the-gemini-api-in-your-dart-and-flutter-apps-00573e560381