How can I get center offsets of a screen in flutter?

user_15862242 0
Viewed 1044

I am using a stack to pan a text using offset and positioned widget. I want to get the offset of the center. I tried

offset = Offset(screenWidth/2, screenHeight/2);

But this is not working, is there any other way possible to get the center coordinates/offset?

flutter-dependencies flutter
3 Answers

As @pskink commented use LayoutBuilder as a parent ; and @Jared Anderton answers is quite ok, but it will calculate the Scaffold body, without considering other property like appBar. Also @Hrvoje Čukman answer meet your requirement.

Another thing can be done just using Stack(alignment: Alignment.center, it will align unaligned children.

The parent widget be LayoutBuilder.

  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        Offset centerOffset =
            Offset(constraints.maxWidth / 2, constraints.maxHeight / 2);
        return Scaffold(

Another option is getting windowSize from dart:ui.

 final Size windowSize = MediaQueryData.fromWindow(window).size;
  late Offset screenOffset =
        Offset(windowSize.width / 2, windowSize.height / 2);


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

  @override
  Widget build(BuildContext context) {
    final Size windowSize = MediaQueryData.fromWindow(window).size;
    late Offset screenOffset =
        Offset(windowSize.width / 2, windowSize.height / 2);
    return LayoutBuilder(
      builder: (context, constraints) {
        Offset centerOffset =
            Offset(constraints.maxWidth / 2, constraints.maxHeight / 2);
        return Scaffold(
            appBar: AppBar(),
            body: LayoutBuilder(
              builder: (context, chConstraints) {
                Offset bodyBasedCenter = Offset(
                    chConstraints.maxWidth / 2, chConstraints.maxHeight / 2);
                return Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("window based center $screenOffset"),
                      Text("Parent based center $centerOffset"),
                      Text("body   based center $bodyBasedCenter"),
                    ],
                  ),
                );
              },
            ));
      },
    );
  }
}

enter image description here

user_101571270

Here is a sample implementation of the LayoutBuilder

Scaffold(
  appBar: AppBar(title: Text("Center Coords")),
  body: LayoutBuilder(builder: (context, BoxConstraints constraints) =>
      Center(child:
        Column(
          children: [
            Text("center width: ${constraints.maxWidth/2}"),
            Text("center height: ${constraints.maxHeight/2}"),
          ],
        ),
      ),
    ),
  );
user_121320210

If your goal is to center your widget, the easier way is to use the Align widget instead of the Positioned widget

Align(
  alignment: Alignment.center,
  child: Container(),
);
user_85801740
Related