How to achieve this design in flutter

Question

So I am trying to redesign what is in the attached image.

(https://i.sstatic.net/65jHd8zB.jpg)

I have tried arranging the items in a stack then using a position widget to position the different container Item, but I couldn't achieve what shared in the shared picture . I don't know the best way to go about this considering the fact that we are getting the data from the backend in JSON format.

Answer 1

The fact that the data comes from the backend doesn't matter if you have state management and your views are subscribed to this data. CachedNetworkImage will most likely be used to display images when the data is received. To display the images in a circle, you can do the following:

class CircularWidgetLayout extends StatelessWidget {
  final List<Widget> widgets;
  final double radius;

  const CircularWidgetLayout({
    required this.widgets,
    required this.radius,
    super.key
  });

  @override
  Widget build(BuildContext context) {
    final size = Size(radius * 2, radius * 2);
    final center = Offset(size.width / 2, size.height / 2);
    final angleIncrement = 360 / widgets.length;
    final angleFactor = pi / 180;

    return Stack(
      children: widgets.mapIndexed((index, widget) {
        final angle = index * angleIncrement;
        final x = center.dx + radius * cos(angle * angleFactor);
        final y = center.dy + radius * sin(angle * angleFactor);

        final randomRotation = Random().nextDouble() * 360;

        return Positioned(
          left: x,
          top: y,
          child: Transform.rotate(
            angle: randomRotation * angleFactor,
            child: widget,
          ),
        );
      }).toList(grawable: false),
    );
  }
}