How to solve "A RenderFlex overflowed by 143 pixels on the right." error in text?

Just Wrap you - Card with -Flexible Widget.

Row(
    children: <Widget>[
      Flexible(
        child: Card(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text("Item name mmmasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaammmmmm"),
              SizedBox(height: 15.0,),
              Text(
                "Discount mmmmmmmm",
              ),
              SizedBox(height: 5.0,),
              Text(
                "Price ,mmmmmmmmmdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfmmmmmmmmm",
              )
            ],
          ),
        ),
      ),
    ],
  ),

You can use Wrap instead of Column.

For ex..

new Wrap(
   spacing: 5.0, 
   runSpacing: 5.0, 
   direction: Axis.vertical, // main axis (rows or columns)
   children: <Widget>[
       TitleText(text: "Item name mmmmmmmmm $index"),
       Body1Text(text: "Discount mmmmmmmm",color: Colors.red,),
       SubHeadText(text: "Price ,mmmmmmmmmmmmmmmmmm",color: Colors.red,)
   ],
 )

Simply use

isExpanded: true,

on DropdownButton.

Example

        DropdownButton(
          isExpanded: true,
          items: data.map((item) {
            return new DropdownMenuItem(
              child: Text(item['name']),
              value: item['id'].toString(),
            );
          }).toList(),
          onChanged: (newVal) {
            setState(() {
              _mySelection = newVal;
            });
          },
          value: _mySelection,
        ),

You can use SizedBox instead of columns.

SizedBox(
   child:new Wrap( 
   spacing: 5.0,
   runSpacing: 5.0, 
   direction: Axis.vertical, // main axis (rows or columns)
   children: <Widget>[
       TitleText(text: "Item name mmmmmmmmm $index"),
       Body1Text(text: "Discount mmmmmmmm",color: Colors.red,),
       SubHeadText(text: "Price ,mmmmmmmmmmmmmmmmmm",color: Colors.red,)
   ],
  ),
),

looks like your using static padding and sizing. This can be a problem when it comes to rendering your project on other devices aside from this one. I'd strongly recommend using one of the following:

1. SingleChildScrollView under a LayoutBuilder.
   • Instead of a column, try using a container including a custom height and width
2. In case you decided to set custom padding, alternatively, you can use MediaQueryData.

I'd recommend using the first one for starters, I would be easier. The second method is for calculating the width and height of the screen and adjusting.

I think there are other useful answers too. I am sharing my experience on this issue for those who are new and are trying to find multiple ways to fix this issue.

In my case Text() was inside Column() and I fix this issue by setting textDirection property as below:

textDirection: TextDirection.ltr

You can set the value depending on your needs.

Try this, it works for me:

              Flex(
                  direction: Axis.horizontal,
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                             Expanded(
                               child:Text('')
                    ),
                  ],
                ),