I created a custom flexible widgets, and calling it 05 times, but the boxes are too close to each other, I want to add the space between them, I used wrap widget but that's working. used spacer too but that too is not working, and when i change the flex value the title which is text1 like "Unattended" it gets split.

Here is my custom flexible code

```
Widget customFlexibleWidget(flex, bgcolor, text1, text2, height, width) {
  return Flexible(
    flex: flex,
    child: Container(
      decoration: BoxDecoration(
          color: bgcolor, borderRadius: BorderRadius.all(Radius.circular(10))),
      height: height,
      width: width,
      child: Padding(
        padding: EdgeInsets.only(top: 15),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(text1,
                  style: TextStyle(
                      fontFamily: 'montserrat',
                      fontSize: 10,
                      color: Colors.white,
                      fontWeight: FontWeight.w300)),
              Text(text2,
                  style: TextStyle(
                      fontFamily: 'montserrat',
                      fontSize: 15,
                      color: Colors.white,
                      fontWeight: FontWeight.w300)),
            ],
          ),
        ),
      ),
    ),
  );
}

```

and calling it as like

```
Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        child:  Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    customFlexibleWidget(
                        10,
                        Colors.blue,
                        "Order",
                        "50",
                        MediaQuery.of(context).size.height * 0.12,
                        MediaQuery.of(context).size.width * 0.18),
                    customFlexibleWidget(
                        10,
                        Colors.blue,
                        "Cancelled",
                        "50",
                        MediaQuery.of(context).size.height * 0.12,
                        MediaQuery.of(context).size.width * 0.24),
                    customFlexibleWidget(
                        13,
                        Colors.blue,
                        "Unattended",
                        "50",
                        MediaQuery.of(context).size.height * 0.12,
                        MediaQuery.of(context).size.width * 0.25),
                    customFlexibleWidget(
                        7,
                        Colors.blue,
                        "Served",
                        "50",
                        MediaQuery.of(context).size.height * 0.12,
                        MediaQuery.of(context).size.width * 0.18),
                    Padding(
                      padding: const EdgeInsets.all(0.0),
                      child: customFlexibleWidget(
                          11,
                          Colors.blue,
                          "Remaining",
                          "50",
                          MediaQuery.of(context).size.height * 0.12,
                          MediaQuery.of(context).size.width * 0.25),
                    ),
                  ],
                ),
              ),
   ],
          ),
        ),
      ),
    );
  }
}

```

here is the output

[![enter image description here](https://i.stack.imgur.com/qvIg6.png)](https://i.stack.imgur.com/qvIg6.png)

please help , how to do this.