Flutter :- text went overflow - flutter

Question

I have the following code, and my text went overflow in the horizontal direction. I tried to use Flexible and Expanded widgets, but no lucks.
import 'package:flutter/material.dart';
import 'widget/options/qty_widget.dart';
import 'widget/options/option_widget.dart';
import 'package:provider/provider.dart';
import '../session/data.dart';
import '../cart/cart.dart';
class AddItemPage extends StatefulWidget {
final String title = 'Add';
final dynamic data;
final dynamic itemOption;
AddItemPage(this.data, this.itemOption);
#override
State<StatefulWidget> createState() => AddItemPageState();
}
class AddItemPageState extends State<AddItemPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.amber[800],
title: Text(widget.title,
style: TextStyle(color: Colors.amberAccent[800])),
),
body: Builder(builder: (BuildContext context) {
List<Widget> listWidget = <Widget>[];
if (widget.data.containsKey('image')) {
//String imagePath = "assets/images/menu/" + widget.data['image'];
String imagePath = "assets/images/lobster_tray.png";
listWidget.add(
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Image.asset(
imagePath,
width: 100,
)),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(widget.data['dish'],
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 22,
color: Colors.black,
)),
Text(widget.data['description'],
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16,
color: Colors.black,
)),
Text('\$' + widget.data['price'],
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16,
color: Colors.red,
))
],
),
],
)
);
}
listWidget.add(QtyWidget());
if(widget.data.containsKey('option')){
for (String optionKey in widget.data['option']){
dynamic optionData = widget.itemOption[optionKey];
listWidget.add(ItemOptionWidget(optionData));
}
}
listWidget.add(Center(
child: Container(
padding: EdgeInsets.fromLTRB(0, 15, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: const EdgeInsets.symmetric(vertical: 16.0),
alignment: Alignment.center,
child: RaisedButton(
onPressed: () {
Provider.of<PData>(context, listen: false)
.addItemToCart(widget.data);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartPage()));
},
color: Colors.amber[800],
child: const Text('Add to Order'),
),
),
Container(
margin: EdgeInsets.fromLTRB(10, 0, 0, 0),
padding: const EdgeInsets.symmetric(vertical: 16.0),
alignment: Alignment.center,
child: RaisedButton(
onPressed: () async {
Navigator.pop(context, true);
},
color: Colors.grey[200],
child: const Text('Cancel'),
),
),
]),
),
));
return Container(
padding: EdgeInsets.fromLTRB(15, 15, 15, 15),
child: Form(
child: ListView(
children: listWidget,
),
),
);
}),
);
}
}

Answer 1

Actually you are not using the proper weight for the Row therefore this problem occurring, I have use the Expanded with Manage the width according to device width using the MediaQuery, please check the below solution of it
class HomeScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _HomeScreen();
}
}
class _HomeScreen extends State<HomeScreen> {
var text =
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum";
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Home"),
),
body: Container(
height: MediaQuery.of(context).size.height * 0.18,
child: Align(
alignment: Alignment.topCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.3,
height: MediaQuery.of(context).size.height * 0.3,
decoration: BoxDecoration(
color: Colors.black,
borderRadius:
BorderRadius.all(Radius.elliptical(20.0, 20.0)),
)),
SizedBox(
width: 5.0,
),
Container(
width: MediaQuery.of(context).size.width * 0.65,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex:1,
child: Text("TITLE IS HERE",
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 22,
color: Colors.black,
)),
),
Expanded(
flex:3,
child: Text(text,
textAlign: TextAlign.left,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16,
color: Colors.black,
)),
),
Expanded(
flex:1,
child: Text('\$ 100',
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16,
color: Colors.red,
)),
),
],
))
],
)),
));
}
}
And please check the output of it

Answer 2

Wrap the Column widget which is inside your Row with Flexible widget that will allow to take only minimum space required to render the children inside Column. Working code snippet below:
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Image.asset('assets/placeholder.png', width: 100)
),
Flexible(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('dish', textAlign: TextAlign.left, style: TextStyle(
fontWeight: FontWeight.w900, fontSize: 22, color: Colors.black
),),
Text('This is a long description of the dish presented in the picture and loved by customers.',
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16,
color: Colors.black,
)),
Text('\$' + 'price',
textAlign: TextAlign.left,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16,
color: Colors.red,
))
],
)
)
],
)
)
Hope this resolves your issue.