flutterflutter-layoutflutter-positioned

Flutter, setting positioned widgets dynamically


I have a UI like

image

Now I want to create the letters on circle by given data. I need it to be a dynamic, when letters are less, (like 3 or 4) they must be far from each other. But, when they many (10 or 12) they must fit to circle (must have dynamic size and dynamic position). The code of circle and letters -

Container(
            width: SizeConfig.devWidth! * 0.6,
            height: SizeConfig.devHeight! * 0.35,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.blue),
              color: MyColors.nextButtonColor,
              shape: BoxShape.circle,
            ),
            child: Stack(
              alignment: Alignment.center,
              children: [
                Positioned(
                    top: SizeConfig.devHeight! * 0.04,
                    child: isDragging == true && isItemsDragging[0] != true
                        ? dragTargetWidget('Č', 0)
                        : draggableWord('Č', 0)),
                Positioned(
                    top: SizeConfig.devHeight! * 0.07,
                    right: SizeConfig.devWidth! * 0.1,
                    child: isDragging == true && isItemsDragging[1] != true
                        ? dragTargetWidget('É', 1)
                        : draggableWord('É', 1)),
                Positioned(
                    right: SizeConfig.devWidth! * 0.03,
                    child: isDragging == true && isItemsDragging[2] != true
                        ? dragTargetWidget('Ž', 2)
                        : draggableWord('Ž', 2)),
                Positioned(
                    bottom: SizeConfig.devHeight! * 0.07,
                    right: SizeConfig.devWidth! * 0.1,
                    child: isDragging == true && isItemsDragging[3] != true
                        ? dragTargetWidget('U', 3)
                        : draggableWord('U', 3)),
                Positioned(
                    bottom: SizeConfig.devHeight! * 0.04,
                    child: isDragging == true && isItemsDragging[4] != true
                        ? dragTargetWidget('T', 4)
                        : draggableWord('T', 4)),
                Positioned(
                    bottom: SizeConfig.devHeight! * 0.07,
                    left: SizeConfig.devWidth! * 0.1,
                    child: isDragging == true && isItemsDragging[5] != true
                        ? dragTargetWidget('Ě', 5)
                        : draggableWord('Ě', 5)),
                Positioned(
                    left: SizeConfig.devWidth! * 0.03,
                    child: isDragging == true && isItemsDragging[6] != true
                        ? dragTargetWidget('А', 6)
                        : draggableWord('А', 6)),
                Positioned(
                    top: SizeConfig.devHeight! * 0.07,
                    left: SizeConfig.devWidth! * 0.1,
                    child: isDragging == true && isItemsDragging[7] != true
                        ? dragTargetWidget('K', 7)
                        : draggableWord('K', 7)),
              ],
            ))
      ],
    ),
  ),

and my data is -

Crossword(type: "crossword", format: [
  "      š",
  "    žák",
  "      o",
  " učitel",
  "      a"
], chars: [
  "i",
  "e",
  "l",
  "a",
  "t",
  "o",
  "č",
  "k",
  "š",
  "á",
  "u",
  "ž"
], strings: {
  "škola": ["      *", "      *", "      *", "      *", "      *"],
  "žák": ["       ", "    ***", "       ", "       ", "       "],
  "učitel": ["       ", "       ", "       ", " ******", "       "]
}),

Any idea how can I achieve this? Any solution would be very useful, thanks!


Solution

  • Thanks to @pskink! The solution is to use RotaryDialDelegate as a delegate for CustomMultiChildLayout. Check the code below:

    Container(
                width: SizeConfig.devWidth! * 0.6,
                height: SizeConfig.devHeight! * 0.35,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.blue),
                  color: MyColors.nextButtonColor,
                  shape: BoxShape.circle,
                ),
                child: CustomMultiChildLayout(
                  delegate: RotaryDialDelegate(
                      wowProv.crosswordExercises[widget.indexLevel!].chars!.length),
                  children: dragLetters
                ))