Question

Get "y" position of container on Flutter

I want to get a 'y' position of container, widget, stack etc. When it's displayed on center of screen, I want to change from image (video preview image) to video file. How can I do?

I found the screen height. I calculated the screen center. I couldn’t find to container place.

I created such a sample, but the item doesnt stand in the center. Possible I have made an algorithm error here?

class _DedectCenterState extends State<DedectCenter> {

Size _wSize;
int listSize = 4;
List<GlobalKey> _key = [];

ScrollController _sController;

_scrollListener() {
 print("scrolling : " + _sController.offset.toString());

 setState(() {
   getPosition();
});}

@override
void initState() {

for(int i=0; i < listSize; i++) {
  _key[i] = new GlobalKey();
}

_sController = ScrollController();

_sController.addListener(_scrollListener);
super.initState();
}

void getPosition(){

double _wCenterTop = (_wSize.height / 2) - 150.0;
double _wCenterBottom = (_wSize.height / 2) + 150.0;

print("center bottom: " + _wCenterBottom.toString());
print("center top: " + _wCenterTop.toString());


for(int i=0; i < listSize; i++) {

  //add key to your widget, which position you need to find
  RenderBox box = _key[i].currentContext.findRenderObject();
  Offset position = box.localToGlobal(Offset.zero); //this is global position
  double y = position.dy; //this is y - I think it's what you want

   print("key $i y position: " + y.toString());

  if(y < _wCenterTop && y > _wCenterBottom) print("key $i center: " + y.toString());
 }}


Widget build(BuildContext context) {
 _wSize = MediaQuery.of(context).size;

return new Scaffold(
  appBar: null,
  body: new ListView(
    controller: _sController,
  children: <Widget>[
    Row(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              key: _key[0],
              margin: EdgeInsets.only(top:100.0),
              height: 140.0,
                width: _wSize.width,
                child: new Image.asset('assets/images/physical/a1.png'),
            )],)],
    ),  
    Row(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              key: _key[1],
              margin: EdgeInsets.only(top:100.0),
              height: 140.0,
              width: _wSize.width,
              child: new Image.asset('assets/images/physical/a2.png'),
  ),],)],
),
    Row(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(top:100.0),
              key: _key[2],
              height: 140.0,
              width: _wSize.width,
                child: new Image.asset('assets/images/physical/a3.png'),
            ),],)],),
     Row(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(top:100.0),
              key: _key[3],
              width: _wSize.width,
                height: 140.0,
                child: new Image.asset('assets/images/physical/a4.png'),
            ),
          ],
        )
      ],),]));}}
 48  69308  48
1 Jan 1970

Solution

 132

You can use GlobalKey for getting size or position of widget

GlobalKey key = GlobalKey(); // declare a global key

add key to your widget, whose position you need to find

Container(
   key: key,
   ...
); 

get the position using a renderbox

RenderBox box = key.currentContext.findRenderObject() as RenderBox;
Offset position = box.localToGlobal(Offset.zero); //this is global position
double y = position.dy; //this is y - I think it's what you want
2019-01-22

Solution

 9
class _DetectCenterState extends State<DetectCenter> {

Size _wSize;
int listSize = 4;
List<GlobalKey> _key = [];

ScrollController _sController;

_scrollListener() {
 print("scrolling : " + _sController.offset.toString());

 setState(() {
   getPosition();
});}

@override
void initState() {

for(int i=0; i < listSize; i++) {
  _key.add(new GlobalKey());
}

_sController = ScrollController();

_sController.addListener(_scrollListener);
super.initState();
}

void getPosition(){

double _wCenterTop = (_wSize.height / 2) - 150.0;
double _wCenterBottom = (_wSize.height / 2) + 150.0;

print("center bottom: " + _wCenterBottom.toString());
print("center top: " + _wCenterTop.toString());


for(int i=0; i < listSize; i++) {

  //add key to your widget, which position you need to find
  RenderBox box = _key[i].currentContext.findRenderObject();
  Offset position = box.localToGlobal(Offset.zero); //this is global position
  double y = position.dy; //this is y - I think it's what you want

   print("key $i y position: " + y.toString());

  if(y < _wCenterTop && y > _wCenterBottom) print("key $i center: " + y.toString());
 }}


Widget build(BuildContext context) {
 _wSize = MediaQuery.of(context).size;

return new Scaffold(
  appBar: null,
  body: new ListView(
    controller: _sController,
  children: <Widget>[
    Row(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              key: _key[0],
              margin: EdgeInsets.only(top:100.0),
              height: 140.0,
                width: _wSize.width,
                child: new Image.asset('assets/images/physical/a1.png'),
            )],)],
    ),  
    Row(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              key: _key[1],
              margin: EdgeInsets.only(top:100.0),
              height: 140.0,
              width: _wSize.width,
              child: new Image.asset('assets/images/physical/a2.png'),
  ),],)],
),
    Row(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(top:100.0),
              key: _key[2],
              height: 140.0,
              width: _wSize.width,
                child: new Image.asset('assets/images/physical/a3.png'),
            ),],)],),
     Row(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(top:100.0),
              key: _key[3],
              width: _wSize.width,
                height: 140.0,
                child: new Image.asset('assets/images/physical/a4.png'),
            ),
          ],
        )
      ],),]));}}
2019-01-22