Flutter, популярная кроссплатформенная платформа, позволяет разработчикам создавать красивые и производительные приложения. Хотя Flutter в основном использует Dart в качестве языка программирования, бывают случаи, когда вам может потребоваться интегрировать код JavaScript в ваш проект Flutter. Если вы хотите использовать существующие библиотеки JavaScript или выполнять динамические сценарии, в этой статье будут рассмотрены различные методы запуска JavaScript во Flutter, сопровождаемые примерами кода.

Метод 1: использование пакета webview_flutter
Пакет webview_flutter позволяет встраивать веб-контент в приложение Flutter с помощью WebView. Он позволяет загружать веб-страницы, содержащие код JavaScript, и беспрепятственно взаимодействовать с ними. Вот пример использования webview_flutter для запуска JavaScript:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class JavaScriptWebView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://example.com',
      javascriptMode: JavascriptMode.unrestricted,
    );
  }
}

Метод 2: использование пакета js
Пакет js облегчает выполнение кода JavaScript в проекте Flutter. Он обеспечивает мост между Dart и JavaScript, позволяя вызывать функции JavaScript и получать доступ к их возвращаемым значениям. Вот пример:

import 'package:flutter/material.dart';
import 'package:js/js.dart' as js;
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    js.context.callMethod('console.log', ['Hello from JavaScript!']);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('JavaScript in Flutter'),
        ),
        body: Center(
          child: Text('Check the console for JavaScript output.'),
        ),
      ),
    );
  }
}

Метод 3: использование пакета flutter_js
Пакет flutter_js обеспечивает простой способ запуска кода JavaScript в приложении Flutter. Он предлагает такие функции, как оценка выражений JavaScript, вызов функций и обработка обратных вызовов. Вот пример:

import 'package:flutter/material.dart';
import 'package:flutter_js/flutter_js.dart';
void main() async {
  final js = FlutterJs();
  await js.evalCode('console.log("Hello from JavaScript!");');
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('JavaScript in Flutter'),
        ),
        body: Center(
          child: Text('Check the console for JavaScript output.'),
        ),
      ),
    );
  }
}

Интеграция кода JavaScript в ваши приложения Flutter открывает мир возможностей, позволяя вам использовать существующие библиотеки JavaScript, выполнять динамические сценарии и взаимодействовать с веб-контентом. В этой статье мы рассмотрели три различных метода: использование пакета webview_flutter, использование пакета js и использование пакета flutter_js. В зависимости от ваших конкретных требований вы можете выбрать наиболее подходящий подход для плавного объединения функций JavaScript с вашим приложением Flutter.