Godot-Android-Samples icon indicating copy to clipboard operation
Godot-Android-Samples copied to clipboard

Godot View does not respect layout in flutter android app and always sticks to the top of the screen

Open kyadalu1 opened this issue 1 year ago • 3 comments

I am trying to embed Godot view in my flutter android app. Here is the complete source code

Flutter allows embedding native views. Check here for more info

I am able to embed my godot view properly in my flutter app, but the issue is it always sticks at the top and hide other flutter contents.

Check below video to know what i am talking about

https://github.com/m4gr3d/Godot-Android-Samples/assets/142881488/b50ecd90-89c8-4c68-acfc-dff764f9059b

As you can see in the video, first i had two flutter Text at the top and at the bottom. Once the Godot view loads it completely occupies the First text, there is a Positioned widget from flutter as well which is kind of like position: absolute property from css and the Godot view does not respect that as well. Also if you check my code i have specifically set the size of my framelayout which also does not work and the Godot view occupies the entire height of 1200 which i had set in my Godot project. The same thing works in Jetpack compose by setting framelayout height manually.

Here is a snippet of my code

My native view in flutter

class MyQrView(
    context: Context, id: Int, creationParams: Map<String?, Any?>?,
    private val activity: FlutterFragmentActivity
) : PlatformView {
    private val linearLayout: LinearLayout
    private val frameLayout: FrameLayout

    override fun getView(): View {
        return linearLayout
    }

    override fun dispose() {}

    init {
        linearLayout = LinearLayout(context)
        linearLayout.layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT,
            ViewGroup.LayoutParams.WRAP_CONTENT
        )
        frameLayout = FrameLayout(context)
        frameLayout.id = View.generateViewId()

        linearLayout.addView(frameLayout)

        frameLayout.apply {
            frameLayout.layoutParams.height = 300
            val fragmentTransaction = activity.supportFragmentManager.beginTransaction()
            fragmentTransaction.replace(frameLayout.id, GodotFragment())
            fragmentTransaction.commit()
        }
    }


}

To use it in flutter i use something like this

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Text(
              "Hello from flutter",
              style: TextStyle(fontSize: 20),
            ),
            Positioned(
              top: 100,
              child: SizedBox(
                width: width,
                height: height / 1.5,
                child: MyQrView(),
              ),
            ),
            Text(
              "Hello from flutter",
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

The column widget in flutter helps to layout views on below the other which the Godot view does not respect. I have created multiple platforms views previously for android using flutter and have never faced such problem. This seems like a Godot issue to me than a flutter issue. Correct me if i am wrong

kyadalu1 avatar Dec 08 '23 03:12 kyadalu1