CODEWITHSUNDEEP
flutterflutter-layout
abuder
abuder

Reputation: 1050

Flutter display Image fullscreen, get offset and scale factor

I would like to display an image full screen on tablet and get new size and scale factor of image.

The scale factor and new size is needed so display additional information on image. I would like to display markers and other helpers, like screenshot.

enter image description here

Stack(
  children: <Widget>[
    Center(
      child: Image.network(
        'https://i.ebayimg.com/images/g/jmwAAOxy3NBSpNvN/s-l1600.jpg',
        fit: BoxFit.contain,
      ),
    ),
  ]
)

Upvotes: 1

Views: 809

Answers (1)

kuhnroyal
kuhnroyal

Reputation: 7553

You can use a combination of a Stack, a Positioned.fill and a LayoutBuilder to get the width and height of the image and then position your children accordingly. The width/height should be enough to determine the scale factor when you compare it to the original size.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: <Widget>[
            Image.network(
              'https://i.ebayimg.com/images/g/jmwAAOxy3NBSpNvN/s-l1600.jpg',
              fit: BoxFit.contain,
            ),
            Positioned.fill(
              child: Container(
                color: Colors.blue.withOpacity(0.2),
                child: LayoutBuilder(
                  builder: (context, constraints) {
                    // Do whatever you want here
                    return Text(constraints.toString());
                  }
                ),
              ),
            ),
          ]
        ),
      ),
    );
  }

https://codepen.io/kuhnroyal/pen/XWmGrdo

Upvotes: 1

Related Questions