how to add space between flexible widgets in flutter-CodePudding

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

please help , how to do this.

CodePudding user response：

Just use Spacer or SizedBox(width:5,) between two widget

              customFlexibleWidget(
                        10,
                        Colors.blue,
                        "Cancelled",
                        "50",
                        MediaQuery.of(context).size.height * 0.12,
                        MediaQuery.of(context).size.width * 0.24),
                   Spacer(),
                    customFlexibleWidget(
                        13,
                        Colors.blue,
                        "Unattended",
                        "50",
                        MediaQuery.of(context).size.height * 0.12,
                        MediaQuery.of(context).size.width * 0.25),

added padding in customFlexibleWidget, but it takes extra space for the last and first widget

Widget customFlexibleWidget(flex, bgcolor, text1, text2, height, width) {
  return Flexible(
    flex: flex,
    child: Container(
      padding: EdgesInsect.only(left: 5, right: 5),//here added changes
      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)),
            ],
          ),
        ),
      ),
    ),
  );
}

CodePudding user response：

Add margin to the container so that you get some space and add a fittedbox on the text eidget so that "unattended" does not split

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