问题
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 ?
回答1:
try textAlign: TextAlign.center, inside text Widget
回答2:
Please 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.
回答3:
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,
))
],
),
),
),
],
),
),
],
)),
),
)
来源：https://stackoverflow.com/questions/60539378/flutter-cannot-use-flexible-inside-padding-for-text-wrapping-purpose