Flutter - cannot use Flexible inside Padding for text wrapping purpose
In my flutter app, I want to have a card and four boxes aligned horizontally with equal width and height inside it. Code follows ;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
padding: EdgeInsets.fromLTRB(20,10,10,0),
height: 220,
width: double.maxFinite,
child: Card(
elevation: 5,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
height:25,
color:Color(0xff6898F7),
child: Text('Online Pharmacy',
style:TextStyle(color: Color(0xffffffff)))
)
)
],
),
Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 150,
padding: EdgeInsets.only(top:40),
color: Colors.red,
child: Column(
children: <Widget>[
Image.asset("images/medicine.jpg"),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding:EdgeInsets.only(top:25),
child:Flexible(
child:Text('Medicine', style: TextStyle(color: Colors.white)),
),
),
],
),
),
],
)
),
),
],
),
],
),
The reason I used Flexible is that I wanted the text to be wrapped in multiple lines where necessary.
But I get this error :
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════ The following assertion was thrown building Container(padding: EdgeInsets(0.0, 40.0, 0.0, 0.0), bg: BoxDecoration(color: MaterialColor(primary value: Color(0xfff44336))), constraints: BoxConstraints(0.0<=w<=Infinity, h=150.0)): Incorrect use of ParentDataWidget.
Flexible widgets must be placed directly inside Flex widgets. Flexible(no depth, flex: 1, dirty) has a Flex ancestor, but there are other widgets between them: - Padding(padding: EdgeInsets(0.0, 25.0, 0.0, 0.0)) These widgets cannot come between a Flexible and its Flex. The ownership chain for the parent of the offending Flexible was: Padding ← Row ← Center ← Column ← Padding ← DecoratedBox ← ConstrainedBox ← Container ← Expanded ← Row ← ⋯
So how can I wrap the text properly ? Without the wrapping issue, code works well.
EDIT: My intended layout seems to be like the image below :
Edit2: Let me give you a more precise idea about the layout:
Edit3: After getting a solution ( see here ) in chat room from pskink , I had the following layout. See that the red marked part does not get the text aligned in a centered fashion. How to align text in a centered way ?
Istiaque Ahmed3 Answers
try textAlign: TextAlign.center, inside text Widget
answered on Stack Overflow Mar 6, 2020 by 
Omar
OmarPlease try this...
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Online Pharmacy",
style: TextStyle(fontSize: 16, color: Colors.white),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
Container(
margin:
EdgeInsets.symmetric(vertical: 10, horizontal: 10),
width: 2,
height: 70,
color: Colors.grey,
),
Expanded(
child: Container(
child: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
FlutterLogo(
size: 50,
),
SizedBox(
height: 10,
),
//Image.asset("images/medicine.jpg"),
Text('Picture of your Prescription',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, fontSize: 14)),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
),
),
),
),
),
),
],
)
],
),
),
],
),
)));
}
Just copy paste code and see what happening... May this will help you.
answered on Stack Overflow Mar 6, 2020 by 
chirag rathod
chirag rathod
That my approach to what you need:
Padding(
padding: const EdgeInsets.all(8.0),
child: Material(
elevation: 5.0,
child: Container(
// height: 220,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(horizontal: 8.0),
height: 25,
color: Color(0xff6898F7),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Online Pharmacy',
style: TextStyle(
color: Color(0xffffffff),
),
),
Text(
'your hidden text lol',
style: TextStyle(
color: Color(0xffffffff),
),
),
],
),
),
Container(
height: 150.0,
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// you could use icon instead of image
// Container(
// height: 80,
// child: Image.asset(
// "images/medicine.jpg",
// fit: BoxFit.fill,
// ),
// ),
Icon(
Icons.touch_app,
size: 40.0,
),
SizedBox(height: 10.0),
Flexible(
child: Text(
'Browse Through Database',
textAlign: TextAlign.center,
))
],
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// you could use icon instead of image
// Container(
// height: 80,
// child: Image.asset(
// "images/medicine.jpg",
// fit: BoxFit.fill,
// ),
// ),
Icon(
Icons.input,
size: 40.0,
),
SizedBox(height: 10.0),
Flexible(
child: Text(
'Type your own medicine',
textAlign: TextAlign.center,
))
],
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// you could use icon instead of image
// Container(
// height: 80,
// child: Image.asset(
// "images/medicine.jpg",
// fit: BoxFit.fill,
// ),
// ),
Icon(
Icons.image,
size: 40.0,
),
SizedBox(height: 10.0),
Flexible(
child: Text(
'Picture of your prescription',
textAlign: TextAlign.center,
))
],
),
),
),
],
),
),
],
)),
),
)
User contributions licensed under CC BY-SA 3.0