Как добавить Flutter в нативное приложение iOS и протестировать его на Codemagic (Часть 2)

Hola, Amigos! На связи Саша Чаплыгин, Flutter dev компании заказной разработки Amiga. Нашел интересную статью на английском о том, как добавить Flutter в новый или существующий проект Native iOS. Решил поделиться с вами переводом. Это вторая часть, в которой будет идти речь про реализацию экрана Flutter в приложение для iOS и использование platform channel.

Первая часть здесь. Она посвящена созданию приложения на iOS и интеграции Flutter в это приложение. 

Третья часть выйдет совсем скоро. Чтобы не пропустить, подписывайтесь на наш телеграм-канал Flutter. Много. Там мы с командой делимся опытом, интересными мероприятиями для разработчиков и другой полезной информацией. В последней статье рассмотрим использование «Hot Reload», «Hot Restart» и тестирование на Codemagic.

Поехали!

Добавление экрана Flutter в приложение iOS

FlutterViewController используется для отображения экрана Flutter внутри приложения iOS. Но также потребуется создать FlutterEngine.

Подходящее место для создания FlutterEngine — внутри AppDelegate.swift.

Заменяем все содержимое этого файла следующим кодом:

// AppDelegate.swift import UIKit import Flutter import FlutterPluginRegistrant @UIApplicationMain class AppDelegate: FlutterAppDelegate {          var flutterEngine : FlutterEngine?;          override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {         self.flutterEngine = FlutterEngine(name: "io.flutter", project: nil);         self.flutterEngine?.run(withEntrypoint: nil);         GeneratedPluginRegistrant.register(with: self.flutterEngine!);         return super.application(application, didFinishLaunchingWithOptions: launchOptions);     } }

Теперь просто добавляем в файл следующие строки ViewController.swift, чтобы отобразить экран на Flutter:

// ViewController.swift // ... import Flutter class ViewController: UIViewController {          // ...          @IBAction func calculatePressed(_ sender: UIButton) {         // ...         let flutterEngine = ((UIApplication.shared.delegate as? AppDelegate)?.flutterEngine)!;         let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil);         self.present(flutterViewController, animated: true, completion: nil)     } }

Если запустим приложение сейчас, то сможем просмотреть экран приложения Flutter Demo Counter, нажав кнопку «CALCULATE» .

Обратитесь к официальной документации Flutter для получения дополнительной информации.

Завершение пользовательского интерфейса Flutter

Пользовательский интерфейс экрана результатов ИМТ будет очень простым и будет содержать всего несколько текстовых виджетов.

Код для пользовательского интерфейса экрана результатов ИМТ:

// main.dart import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MaterialApp(       title: 'BMI Calculator Module',       theme: ThemeData(         primarySwatch: Colors.blue,       ),       home: MyHomePage(),       debugShowCheckedModeBanner: false,     );   } } class MyHomePage extends StatefulWidget {   @override   _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> {   Future<void> _receiveFromHost(MethodCall call) async {     // To be implemented.     // Will be used for retrieving data passed from     // the native iOS app.   }   @override   Widget build(BuildContext context) {     return Scaffold(       body: Container(         color: Colors.blue,         child: Center(           child: Column(             mainAxisSize: MainAxisSize.max,             mainAxisAlignment: MainAxisAlignment.center,             crossAxisAlignment: CrossAxisAlignment.center,             children: <Widget>[               Text(                 'YOUR BMI',                 style: TextStyle(                     color: Colors.white,                     fontSize: 40,                     fontWeight: FontWeight.bold),               ),               Text(                 '23.7',                 style: TextStyle(                     color: Colors.white,                     fontSize: 70,                     fontWeight: FontWeight.bold),               ),               Text(                 'Fit as a fiddle!',                 style: TextStyle(                   color: Colors.white,                   fontSize: 20,                 ),               ),             ],           ),         ),       ),     );   } }

Использование Platform Channel

Используем Platform Channel для передачи данных из приложения iOS в модуль Flutter.

Настройка модуля Flutter (получение данных)

1. Прежде всего, нужно создать канал с каким-нибудь именем внутри класса _MyHomePageState.

// main.dart static const platform = const MethodChannel('com.souvikbiswas.bmi/data');

2. Создаем метод _receiveFromHost(), который будет извлекать данные, переданные из нативной части, и получим данные для отображения внутри модуля Flutter.

// main.dart Future<void> _receiveFromHost(MethodCall call) async {    var jData;      try {      print(call.method);        if (call.method == "fromHostToClient") {        final String data = call.arguments;        print(call.arguments);        jData = await jsonDecode(data);      }    } on PlatformException catch (error) {      print(error);    }      setState(() {      jData1 = jData;      if (jData['color'] == 'blue') {        color = Colors.blue;      } else if (jData['color'] == 'green') {        color = Colors.green;      } else {        color = Colors.pink;      }    });  }

3. Устанавливаем _receiveFromHost()метод как Обработчик вызова метода setMethodCallHandler.

// main.dart _MyHomePageState() {      platform.setMethodCallHandler(_receiveFromHost); }

4. Пишем код для метода build, чтобы отображать данные, полученные с использованием Platform Channel:

// main.dart  @override   Widget build(BuildContext context) {     return Scaffold(       body: Container(         color: color, // Updated         child: Center(           child: Column(             // ...             children: <Widget>[               Text(                 'YOUR BMI',                 // ...               ),               Text(                 jData1['value'], // Updated                 // ...               ),               Text(                 jData1['advice'], // Updated                 // ...               ),             ],           ),         ),       ),     );   } }

Настройка приложения iOS (отправка данных)

1. Создаем канал для общения с модулем Flutter

// Define inside calculatePressed() method let bmiDataChannel = FlutterMethodChannel(name: "com.souvikbiswas.bmi/data", binaryMessenger: flutterViewController.binaryMessenger)

2. Отправляем данные по каналу

// Define inside calculatePressed() method  let bmiDataChannel = FlutterMethodChannel(name: "com.souvikbiswas.bmi/data", binaryMessenger: flutterViewController.binaryMessenger)        let jsonObject: NSMutableDictionary = NSMutableDictionary()  jsonObject.setValue(bmiValue, forKey: "value")  jsonObject.setValue(bmiAdvice, forKey: "advice")  jsonObject.setValue(bmiColor, forKey: "color")    var convertedString: String? = nil    do {      let data1 =  try JSONSerialization.data(withJSONObject: jsonObject, options: JSONSerialization.WritingOptions.prettyPrinted)      convertedString = String(data: data1, encoding: String.Encoding.utf8)  } catch let myJSONError {      print(myJSONError)  }        bmiDataChannel.invokeMethod("fromHostToClient", arguments: convertedString)

На этом вторая часть статьи подошла к концу. Мы рассмотрели реализацию экрана Flutter в приложение для iOS и использование platform channel. В последней части речь будет идти про использование «Hot Reload», «Hot Restart» и тестирование на Codemagic.

Чтобы не пропустить анонс, подписывайтесь на наш телеграм-канал Flutter. Много!

Если вы пропустили 1 часть статьи, то она здесь.