【Flutter】KotlinでNative側のCounterを実装しEventChannelを使いFlutter側で表示

flutter

1. 概要

上記は「MethodChannel」を使い、Native(Android)側と連携する内容でした。

今回は「EventChannel」を使い、Native(Android)側と連携する内容です。

対象としては開発を1年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. FlutterとNativeの連携方法

こちらを参考

3. プロジェクトの準備

3-1. プロジェクトを作成

4. ソースコード(Kotlin)

4-1. android/app/src/main/kotlin/com/example/batterylevel/MainActivity.kt

  • このファイルはFlutterプロジェクトを作成すると、自動生成されるので内容を変更
package com.example.event_channel_counter

import android.os.Handler
import android.os.Looper
import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.EventChannel

class MainActivity : FlutterActivity() {
    private val eventChannel = "samples.flutter.dev/counter"

    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        EventChannel(flutterEngine.dartExecutor.binaryMessenger, eventChannel).setStreamHandler(
            CounterHandler
        )
    }
}

object CounterHandler : EventChannel.StreamHandler {
    private val handler = Handler(Looper.getMainLooper())
    private var eventSink: EventChannel.EventSink? = null
    private var counter: Int = 0

    private val runnable: Runnable = object : Runnable {
        override fun run() {
            countUp()
        }
    }

    fun countUp() {
        eventSink?.success(counter++)
        handler.postDelayed(runnable, 1000)
    }

    override fun onListen(arguments: Any?, sink: EventChannel.EventSink) {
        eventSink = sink
        handler.post(runnable)
    }

    override fun onCancel(arguments: Any?) {
        eventSink = null
        handler.removeCallbacks(runnable)
    }
}

  • 「CHANNEL」について
    • samples.flutter.dev/counter
    • Flutter側との通路

The client and host sides of a channel are connected through a channel name passed in the channel constructor. All channel names used in a single app must be unique; prefix the channel name with a unique ‘domain prefix’, for example: samples.flutter.dev/battery.

Writing custom platform-specific code | Flutter

5. ソースコード(Dart)

5-1. lib/main.dart

import 'package:flutter/material.dart';
import 'views/counter_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyCounterPage(),
    );
  }
}

5-2. lib/views/counter_page.dart

import 'package:flutter/material.dart';
import '../repository/counter_repository.dart';

class MyCounterPage extends StatelessWidget {
  const MyCounterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter from platform of android'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            StreamBuilder<int>(
                stream: streamCounter(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Text(
                      '${snapshot.data}',
                      style: Theme.of(context).textTheme.headline4,
                    );
                  } else {
                    return const CircularProgressIndicator();
                  }
                }),
          ],
        ),
      ),
    );
  }
}

5-3. lib/repository/counter_repository.dart

import 'package:flutter/services.dart';

Stream<int> streamCounter() {
  const counterChannel = EventChannel('samples.flutter.dev/counter');
  return counterChannel.receiveBroadcastStream().map((event) {
    return int.parse(event.toString());
  });
}

6. 結果

6-1. 1秒間隔でカウントアップ

下記ページにて、MessageChannelで連携する内容を書いたので合わせて読んで頂けますと幸いです。

7. 参考

投稿者プロフィール

Sondon
開発好きなシステムエンジニアです。
卓球にハマってます。

関連記事

  1. flutter

    【Flutter】画面をキャプチャし画像として保存

  2. flutter

    【Flutter】GoogleMapを使用したアプリの開発について P…

  3. flutter

    【Flutter】アプリにAdmobバナー広告を設置

  4. flutter

    【Flutter】Widgetテスト(Flutter,VSCode,T…

  5. flutter

    【Flutter】PlatformviewとWebViewを使い、ネイ…

  6. flutter

    【Flutter】CustomPainterを使い、図形を描画

最近の記事

  1. AWS
  2. AWS
  3. AWS

制作実績一覧

  1. Checkeys