Set Row width in flutter

Is there a way to set the width on a row in flutter? I am getting an error on overflow:

ERROR - "The following assertion was thrown during layout: A RenderFlex overflowed by 10.0 pixels on the right."

I am grabbing the screensize and its coming thru but I still get the error. The offending line is the ROW declaration.

Here is the Code:

     @override
   Widget build(BuildContext context) {
    return Container(
       width: widget.screenSize.width,
       height: widget.screenSize.height,
       child: Stack(children: <Widget>[
       Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(30),
                  bottomRight: Radius.circular(30))),
          width: widget.screenSize.width,
          padding: EdgeInsets.fromLTRB(20, 0, 0, 20),
          child: Stack(
            children: <Widget>[
              Positioned(
                  right: 0,
                  top: 0,
                  child: Align(
                      heightFactor: .75,
                      widthFactor: .7,
                      alignment: Alignment.bottomLeft,
                      child: Hero(
                        tag: "pokeball",
                        child: Image.asset(
                          'assets/images/pokeball.png',
                          color: Colors.blue.withOpacity(.50),
                          height: 180,
                        ),
                      ))),
              Container(
                width: widget.screenSize.width - 10,
                padding: EdgeInsets.only(
                    top: MediaQuery.of(context).padding.top),
                margin: EdgeInsets.only(
                    top: MediaQuery.of(context).padding.top + 20),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Support Center",
                      style: TextStyle(
                          fontSize: _getFontSize(30), fontWeight: FontWeight.w600),
                    ),

                   SizedBox(
                      height: 15,
                    ),  

                    SizedBox(
                      height: 15,
                    ),
                    AnimatedContainer(
                      curve: Curves.linear,
                      duration: Duration(milliseconds: 300),
                      height: isViewAll ? 0 : 100,
          ERROR THROWN ->   **child: Row(**
                        children: <Widget>[
                          _getCategoryCard('Caregivers', Color(0xff4dc2a6),
                              Color(0xff65d4bc)),
                          _getCategoryCard(
                              'Hotline', Color(0xfff77769), Color(0xfff88a7d))
                        ],
                      ),
                    ),
                    AnimatedContainer(
                      curve: Curves.linear,
                      duration: Duration(milliseconds: 300),
                      height: isViewAll ? 0 : 100,
                      child: Row(
                        children: <Widget>[
                          _getCategoryCard('911', Color(0xff59a9f4),
                              Color(0xff6fc1f9)),

                        ],
                      ),
                    ),
                  ],
                ),

              ),
            ],
          )
          ),
     _News()
    ]
    )
    );
 }

Solution 1: Abion47

Row throws this error when its children take up more space than itself. This is intentional because Flutter treats overflow on Row or Column as a layout error. Make the children smaller or dynamically sized and your error will go away.

If you want to force the children to be dynamically sized, surround them in Expanded:

Row(
  children: [
    Expanded(child: _getCategoryCard('Caregivers', Color(0xff4dc2a6), Color(0xff65d4bc))),
    Expanded(child: _getCategoryCard('Caregivers', Color(0xff4dc2a6), Color(0xff65d4bc))),
  ],
),

You can also change the Row to Wrap, which will cause the children to automatically move down a row if they overflow the horizontal size:

Wrap(
  orientation: Orientation.horizontal,
  children: [
    _getCategoryCard('Caregivers', Color(0xff4dc2a6), Color(0xff65d4bc)),
    _getCategoryCard('Caregivers', Color(0xff4dc2a6), Color(0xff65d4bc)),
  ],
),