Flutter: How to add floating text labels in Flutter?

user_3702057 0
Viewed 3148

I want to show floating text labels (top, bottom, left and right) of a picture, with the coordenates (the picture is a map.

I found the best widget to show the map is package:photo_view/photo_view.dart

However, I'm new to flutter and haven`t realized how to 'paint' the textlabels in those positions, 'floating' over the picture.

I've tried this to no avail:

 return Container(
    child: new Stack(children: <Widget>[
    new PhotoView(
      imageProvider: AssetImage("assets/image.jpg"),
    ),
    new AlignPositioned(
   alignment: Alignment.topLeft,
   Text('Hello World')
    )
    ]
    )

  );

What am I doing wrong?

flutter-layout flutter
1 Answers

There's no need for your container since it has no properties. What you're looking for is probably something like this:

Stack(
  alignment: Alignment.center,
  fit: StackFit.expand,
  children: <Widget>[
    Positioned.fill(child: Container()),//map

    Positioned(
        top: 0,
        child: Text('top')
    ),
    Positioned(
        left: 0,
        child: Text('left')
    ),
    Positioned(
        right: 0,
        child: Text('right')
    ),
    Positioned(
        bottom: 0,
        child: Text('bottom')
    ),
  ],
);

The children closer to the start of the list are on the bottom layers, and as you move toward the end of the list the items stack on top of each other.

user_99107190
Related