Flutter Wrap widget not behaving how I want it to

Question

My Wrap widget is not behaving how I want it to... I need it to wrap to a new line, instead it is going off the screen and showing an overflowed error. What can I change to make it start creating a new line on the screen with the children of the Wrap widget?

My desired outcome:

What my code is producing:

Container(
       alignment: Alignment.topLeft,
       width: inputWidth,
       child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
                Container(
                     child: Text("Products",
                         style: TextStyle(
                              color: Colors.grey
                         )),
                ),
                Wrap(
                    spacing: 5.0, // gap between adjacent chips
                    runSpacing: 5.0, // gap between lines
                    direction: Axis.horizontal,
                    children: <Widget>[
                       ...productsList
                    ],
                )
            ],
     ),),

// productsList component

productsList.add(
          Container(
            width: 50,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                  Radius.circular(10)),
              color: Color(0xFFeeeeee),
            ),
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(5.0),
                child: Text(productName,
                    style: TextStyle(
                      color: Colors.black26,
                      fontSize: 10,
                    )),
              ),
            ),
          )
      );

Answer 1

Try wrapping your wrap() widget with sized box to give it some desired constraints like height and width and remember to center your wrap then in your wrap add thistextDirection: TextDirection.rtl

  SizedBox(
      ///desired height
      //desired width
      child: Center(
               child: Wrap(
                    textDirection: TextDirection.rtl
                    spacing: 5.0, // gap between adjacent chips
                    runSpacing: 5.0, // gap between lines
                    direction: Axis.horizontal,
                    children: <Widget>[
                       ...productsList
                    ],
                ),
               ),

Answer 2

Give your Wrap widget fixed width for it to wrap to a new line. Either through a SizedBox or with the help of Expanded

You can try something like this

      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Expanded(flex: 2, child: Text("Products", style: TextStyle(color: Colors.grey))),
          Expanded(
            flex: 8,
            child: SizedBox(
              // You can also remove the Expanded widget and provide a fixed width here
              // width: MediaQuery.of(context).size.width * 0.8, 
              child: Wrap(
                spacing: 5.0, // gap between adjacent chips
                runSpacing: 5.0, // gap between lines
                children: <Widget>[
                   ...productsList
                ],
              ),
            ),
          ),
        ],
      ),