-->

Как добавить 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

                // ...

              ),

            ],

          ),

        ),

      ),

    );

  }

}// 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

                // ...

              ),

            ],

          ),

        ),

      ),

    );

  }

}

Использование 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

                // ...

              ),

            ],

          ),

        ),

      ),

    );

  }

}// 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)// 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. Много!

Хотите связаться с владельцами компании напрямую?
Константин Франгуриди
Константин Франгуриди
Account director

НАПИСАТЬ

Дмитрий Тарасов
Дмитрий Тарасов
СЕО

НАПИСАТЬ