How to add Method Channel to Flutter Fragment

Question

Since I have upgraded the flutter SDK to 1.12.13+hotfix.8, older FlutterView implementation in a fragment is not working anymore because facade (Flutter) library is deprecated now.

Flutter.createView(activity!!, lifecycle, mRoute)

As per the official doc, we can add a FlutterFragment like below -

FlutterFragment flutterFragment = FlutterFragment.withNewEngine()
    .initialRoute("myInitialRoute/")
    .build();

But couldn't find how to add a method channel in a custom flutter fragment that extends the Flutter fragment.

Solution

This is how I attached the flutter engine with the flutter fragment and it worked perfectly fine. If you use the cached engine and fragment, the screen will maintain the state even if you reopen it. Avoid caching if you don't want to save the fragment state.

package com.test.app

import io.flutter.embedding.android.FlutterFragment
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.embedding.engine.FlutterEngineCache
import io.flutter.embedding.engine.dart.DartExecutor
import io.flutter.plugin.common.MethodChannel

class SampleActivity: AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_sample)

        initFlutterEngine()
        attachFlutterFragment()
    }

    private fun initFlutterEngine(): FlutterEngine {
        var flutterEngine = FlutterEngineCache.getInstance().get(ENGINE_ID)

        if (null == flutterEngine) {
            flutterEngine = FlutterEngine(this)
            flutterEngine.navigationChannel.setInitialRoute("/")
            flutterEngine.dartExecutor.executeDartEntrypoint(
                DartExecutor.DartEntrypoint.createDefault()
            )
            FlutterEngineCache
                .getInstance()
                .put(ENGINE_ID, flutterEngine)
            setMethodChannels(flutterEngine)
        }
        return flutterEngine
    }

    private attachFlutterFragment() {
        var flutterFragment = supportFragmentManager.findFragmentByTag(FRAGMENT_TAG) as FlutterFragment?
        if (null == flutterFragment) {
            flutterFragment =
                FlutterFragment.withCachedEngine(ENGINE_ID)
                    .shouldAttachEngineToActivity(true)
                    .build() as FlutterFragment
        }

        supportFragmentManager
            .beginTransaction()
            .add(R.id.flutter_fragment_container,
                 flutterFragment,
                 FRAGMENT_TAG
            )
            .commit()
    }

    private fun setMethodChannels(flutterEngine: FlutterEngine) {
        MethodChannel(flutterEngine.dartExecutor, FLUTTER_CHANNEL).setMethodCallHandler { call, result ->
            when (call.method) {
                DUMMY_METHOD -> {
                    val params = HashMap<String, String>()

                    result.success(params)
                }
                else -> result.notImplemented()
            }
        }
    }
}

Comments

[Sanket Vekariya]

Currently, there is no mention of Method Channel implementation with Fragment according to this official link: flutter.dev/docs/development/platform-integration/…

[Sumit Saurabh]

How to use the method channel along with it? Though I have figured out, will post my working solution soon.

[piczaj]

Thanks for your answer. I have similar problem described here stackoverflow.com/questions/62746709/… . Is it possible to do it using FlutterFragment ?

[Dulanga]

@Sumit You save my day, This is the complete answer I am looking for, Thanks

[Dulanga]

@Sumit Saurabh I have faced another issue when i add native fragment on top of flutter fragment native fragment not visible any idea

[R Rifa Fauzi Komara]

Any example using Activity? @Sumit