Flutter Wrap Widget does not expand itself

Question

I'm trying to create a calendar and I'm using Wrap widget to display days inside calendar. But I faced a problem. Wrap widget does not expand itself to every side that's why overflow happens. This is my code:

    return Container(
      height: MediaQuery.of(context).size.height * 0.40,
      width: MediaQuery.of(context).size.width / 2,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(46.0),
        color: Color(0xFFD6D6D6),
        boxShadow: [
          BoxShadow(
            color: Color(0xFF000000).withOpacity(0.16),
            offset: Offset(0, 10),
            blurRadius: 20.0,
          ),
        ],
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              SizedBox(width: 8.0),
              GestureDetector(
                onTap: () {},
                child: Icon(
                  Icons.arrow_back_ios,
                  color: Colors.white,
                ),
              ),
              Text(
                '${getMonthName(initialDate.month)}',
                style: GoogleFonts.baloo(
                  color: Colors.white,
                  fontSize: 50.0,
                  fontWeight: FontWeight.w400,
                ),
              ),
              GestureDetector(
                onTap: () {},
                child: Icon(
                  Icons.arrow_forward_ios,
                  color: Colors.white,
                ),
              ),
              SizedBox(width: 8.0),
            ],
          ),
          Container(
            height: MediaQuery.of(context).size.height * 0.25,
            width: MediaQuery.of(context).size.width / 2.5,
            child: Row(
              children: [
                Wrap(
                  alignment: WrapAlignment.start,
                  direction: Axis.horizontal,
                  spacing: 2.0,
                  children: dayList == null
                      ? SizedBox()
                      : dayList.map((e) {
                          return DaysContainer(
                            number: e,
                          );
                        }).toList(),
                ),
              ],
            ),
          ),
        ],
      ),
    );

When I remove upper Row in Wrap, this time widget only goes to vertical even though I define Axis.horizontal.

DaysContainer class:

class DaysContainer extends StatelessWidget {
  const DaysContainer({Key key, this.number, this.isAvailable})
      : super(key: key);

  final String number;
  final bool isAvailable;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: Color(0xFFFFFFFF),
      ),
      child: Center(
        child: Text(
          number,
          style: GoogleFonts.baloo(
            fontSize: 30.0,
            color: Color(0xFFBFBFBF),
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
    );
  }
}

This is the result in Flutter Web:

Expected result:

Can anyone help me to figure out what is the problem in Wrap widget?

Answer 1

try to change to:

      Container(
        height: MediaQuery.of(context).size.height * 0.25,
        width: MediaQuery.of(context).size.width / 2.5,
        child: Wrap(
          alignment: WrapAlignment.start,
          direction: Axis.horizontal,
          spacing: 2.0,
          children: dayList == null
              ? SizedBox()
              : dayList.map((e) {


...


class DaysContainer extends StatelessWidget {
  const DaysContainer({Key key, this.number, this.isAvailable})
      : super(key: key);

  final String number;
  final bool isAvailable;

  @override
  Widget build(BuildContext context) {
    return Container(
                        width: 20,
                        height: 20,
                        margin: EdgeInsets.only(bottom: 2.0),
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: Color(0xFFFFFFFF),
      ),
      child: Center(
        child: Text(
          number,
          style: GoogleFonts.baloo(
            fontSize: 30.0,
            color: Color(0xFFBFBFBF),
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
    );
  }
}

Answer 2

Please change your code with the following changes:

• Removed Row widget outside Wrap
• Defined your width of DaysContainer. Currently, the width of Container in DaysContainer has full width of parent widget. That is the reason why your time widget goes to vertical even though you define Axis.horizontal in Wrap widget.

By the way, you can add the properties runSpacing and spacing to your Wrap widget to give more space between your items in horizontal and vertical instead of using padding.