flutter绘图 获取父widget实际长度及坐标进行绘图

需求是：在一张平明图上按照服务器端返回的坐标点进行绘图。

由于移动设备屏幕大小不一，展示的地图大小是自适应的，这就需要想办法获取实际的长度和高度。随后，通过比例计算出该绘图的坐标点。

1. 获取父Widget高度

我让图片的高度填满整父Widget，但比例不变。

 

final Image image = Image.asset('assets/123.jpeg', fit: BoxFit.fitHeight)

随后用LayoutBuilder来获取父Widget的高度信息。参考下面代码，其中constrains.maxHeight获取到Container实际的高度。

 

  @override
  Widget build(BuildContext context) {
    return Container(
      child: LayoutBuilder(
        builder: (context, constrains){
          if(constraints.maxWidth > 200.0) {
            return new Text('BIG');
          }
        }
      )
    );
  }

1. 坐标绘图
   首先是一个图片Widget，坐标用到了Positioned Widget，再用一个Stack Widget将它们组合起来。

 

Stack(
    children: [
      image,
      Positioned(
        left: 18.0,
        top: 20,0,
        child: Text("I am Jack"),
      ),   
    ],
)

3. 组合起来

结合前面两步组合一下，示例如下。

 

@override
Widget build(BuildContext context) {
  return Container(
    child: LayoutBuilder(
      builder: (context, constrains){
        return Stack(children: _list(constrains));
      }
    )
  );
}

//图片的像素大小
final imgLength = 1154.0;
final imgWidth = 720.0
 
List _list(constrains) {
    final height = constrains.maxHeight;
    final width =  constrains.maxHeight/imgWidth * imgLength;

    List list = new List();
    stack.add(image);

    for(var i = 0; i< posts.length; i++){
      final item = posts[i];
      final ssid = item.ssid;
      final top = item.y * height;
      final left = item.x * width;

      stack.add(Positioned(
        top: top,
        left: left,
        child: Text(ssid),
      ));
    }
    return list;
  }

效果大致如下图。