Flutter: momentarily 'A RenderFlex overflowed by 13 pixels on the right' and then disappears - Row widget

Question

I'm currently implementing this app where a GridView of products loaded from FireBase is displayed on the start of the app. Currently I'm just working on the skeleton of the screen, so basically there is no real connection to the database... Nonetheless, I get a really strange error where it says the following:

======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:

A RenderFlex overflowed by 13 pixels on the right.

The relevant error-causing widget was: 
  Row file:///C:/Users/Andy/AndroidStudioProjects/Gifthub/lib/mainScreen.dart:355:31
The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#01ea0 relayoutBoundary=up1 OVERFLOWING
...  parentData: offset=Offset(0.0, 113.2); flex=null; fit=null (can use size)
...  constraints: BoxConstraints(0.0<=w<=155.0, 0.0<=h<=Infinity)
...  size: Size(155.0, 37.0)
...  direction: horizontal
...  mainAxisAlignment: start
...  mainAxisSize: min
...  crossAxisAlignment: center
...  textDirection: ltr
...  verticalDirection: down
...  textBaseline: alphabetic
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
====================================================================================================

The strange thing is that it only appears momentarily (see live app demo below) on the first time that I run the app on my phone (Huawei Mate SE screen size: 5.93-inches) while the screen is loaded and then disappears, If I run the same app on the android emulator using Pixel 3a API 29. this does not happen and everything seems normal. I've tried everything I learned and saw online but it yielded nothing? What am I missing?

My code (error causing Row marked with FIXME ):

@override
  Widget build(BuildContext context) {
    return Material(
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              width: MediaQuery
                  .of(context)
                  .size
                  .width,
              height: MediaQuery
                  .of(context)
                  .size
                  .width * 0.35,
              color: Colors.lightGreen[800],
            ),
          ),
          ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20.0),
              topRight: Radius.circular(20.0),
            ),
            child: Container(
              color: Colors.white,
              child: StreamBuilder(
                stream: FirebaseFirestore.instance.collection("Products").snapshots(),
                builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
                  if (!snapshot.hasData) {
                    print("DEBUG PURPOSES: notice me, snapshot doesn't have data");
                    return Container();
                  }
                  return GridView.count(
                    primary: false,
                    crossAxisCount: 2,
                    padding: const EdgeInsets.all(20),
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                    children: List.generate(
                      min(16, _totalProducts),
                      (index) =>
                      InkWell(
                        focusColor: Colors.transparent,
                        hoverColor: Colors.transparent,
                        highlightColor: Colors.transparent,
                        onTap: () => {}, //TODO: navigate to product screen
                        child: Container(
                          width: MediaQuery.of(context).size.width,
                          height: MediaQuery.of(context).size.height,
                          color: Colors.redAccent,
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Container(
                                // width: MediaQuery.of(context).size.width * 1/2,
                                height: MediaQuery.of(context).size.height * 1/6,
                                color: Colors.cyan,
                                // child: Image.network(await _getProductPicture(index, snapshot)),
                              ),
                              Row( //FIXME: error causing widget
                                mainAxisSize: MainAxisSize.min,
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Column(
                                    mainAxisSize: MainAxisSize.min,
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text('  Red Sofa', //product title goes here
                                        textAlign: TextAlign.left,
                                        style: GoogleFonts.lato(
                                          fontSize: 18.0,
                                          color: Colors.black,
                                        ),
                                      ),
                                      Text('  cool sofa bro', //product sub title goes here
                                        textAlign: TextAlign.left,
                                        style: GoogleFonts.lato(
                                          fontSize: 14.0,
                                          color: Colors.grey,
                                        ),
                                      ),
                                    ],
                                  ),
                                  Align(
                                    alignment: Alignment.centerRight,
                                    child: Text('          150\$  ',
                                      textAlign: TextAlign.right,
                                      style: GoogleFonts.lato(
                                        fontSize: 15.0,
                                        color: Colors.black,
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ],
                          ),
                        ),
                      )
                    ),
                  );
                }
              ),
            ),
          ),
        ]
      ),
    );
  }

Demo: Live App Demo

Answer 1

wrap the Text() by Flexible() under Row