Hey I can't figure out a way to fix the Text inside of a container that it will break the line and expand the container by itself. I already searched for solutions but Expanded and Flexible don't work. Can anyone help me? :)
Here's a picture of the problem:
myContainer({required String title}) {
return Padding(
padding: const EdgeInsets.only(bottom: 5.0),
child: SizedBox(
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: GestureDetector(
onTap: () {
print("Das hat funktioniert");
},
child: Container(
decoration: BoxDecoration(
color: const Color.fromRGBO(86, 89, 94, 1),
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Color.fromRGBO(255, 128, 0, 1),
width: 2,
),
),
padding: EdgeInsets.only(top: 10, bottom: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(children: [
Padding(
padding: const EdgeInsets.only(
left: 12.0, top: 14, bottom: 14),
child: Container(
child: Text(
title,
style: TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.w400),
),
),
),
])
])),
),
)));
Thanks so much!
Add your Text widget inside Expanded:
Padding(
padding: const EdgeInsets.only(bottom: 5.0),
child: SizedBox(
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: GestureDetector(
onTap: () {
print("Das hat funktioniert");
},
child: Container(
decoration: BoxDecoration(
color: const Color.fromRGBO(86, 89, 94, 1),
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Color.fromRGBO(255, 128, 0, 1),
width: 2,
),
),
padding: EdgeInsets.only(top: 10, bottom: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Row(children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 12.0, top: 14, bottom: 14),
child: Container(
child: Text(
'Add your long title here after Expanded it does not give any type of error',
style: TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.w400),
),
),
),
),
]),
)
],
),
),
),
),
),
),