How to create dynamically widgets in stack

On my stack I have few ClipPath:

Stack(
            children: [
              Positioned.fill(
                child: Image.asset(
                  'assets/images/poland.png',
                  fit: BoxFit.fitHeight,
                ),
              ),
              Positioned.fill(
                child: ClipPath(
                  clipper: MapClipper(heightClipper: 51.1, widthClipper: 17.03),
                  child: InkWell(
                    onTap: () {
                      print("Wrocław");
                    },
                    child: Container(
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
              Positioned.fill(
                child: ClipPath(
                  clipper:
                      MapClipper(heightClipper: 52.23, widthClipper: 21.01),
                  child: InkWell(
                    onTap: () {
                      print("Warszawa");
                    },
                    child: Container(
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
              Positioned.fill(
                child: ClipPath(
                  clipper:
                      MapClipper(heightClipper: 50.04, widthClipper: 21.99),
                  child: InkWell(
                    onTap: () {
                      print("Rzeszów");
                    },
                    child: Container(
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
            ],
          ),

How to make those ClipPath dynamically? I want to have them more, should I use list in here? I saw on the internet that ListView can create dynamically, but in my case I want add new elements here, on my stack, how to do that in flutter?

>Solution :

Yes, you can pass a list to the Stack widget.

Create a List of widgets inside your build:

    List<Widget> widgetList = [
Positioned.fill(
                child: Image.asset(
                  'assets/images/poland.png',
                  fit: BoxFit.fitHeight,
                ),
              ),
    Positioned.fill(
                    child: ClipPath(
                      clipper: MapClipper(heightClipper: 51.1, widthClipper: 17.03),
                      child: InkWell(
                        onTap: () {
                          print("Wrocław");
                        },
                        child: Container(
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
    Positioned.fill(
                    child: ClipPath(
                      clipper: MapClipper(heightClipper: 51.1, widthClipper: 17.03),
                      child: InkWell(
                        onTap: () {
                          print("Wrocław");
                        },
                        child: Container(
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
    ];

And pass it inside your Stack as the children parameter:

Stack(
 children: widgetList,
),

I just hardcoded 2 of your ClipPath widgets. But you can declare a variable widgetList inside your widget and add items to it when you press a button or you pass the amount of widgets when you navigate to this page.

Leave a Reply