Flutter : how to make container height wrap around its content - flutter

Question

I am making alert notification and I want the container to be wrapped around it content. Was not able to give left border to the rounded container to had to make another container that will be matching the height of the parent container. Now if i give height to the parent container this doesn't seems to be a good approach as the text inside the container might vary... I want the container to automatically detect the height necessary for the nice appearance and widgets inside it do not overlap or exceed
Container(
width: double.infinity,
height: 80.0,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.inversePrimary,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
spreadRadius: 0,
blurRadius: 1,
offset: const Offset(0, 1)
), // no shadow color set, defaults to black
]
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Container(
width: 8,
padding: EdgeInsets.all(0.0),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0),bottomLeft:Radius.circular(10.0) ),
color: buildMaterialColor(const Color(0xFF70AD47)),
),
),
),
Expanded(
flex: 40,
child: Container(
padding:EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children:[
Expanded(
flex: 1,
child: Text(
textAlign: TextAlign.end,
String.fromCharCode( CupertinoIcons.check_mark_circled.codePoint),
style: TextStyle(
inherit: false,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
fontSize: 40.0,
fontFamily: CupertinoIcons.check_mark_circled.fontFamily,
package: CupertinoIcons.check_mark_circled.fontPackage,
),
),
),
Expanded(
flex:5,
child: Container(
padding: EdgeInsets.only(left:10.0,right: 0.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Success",
style: TextStyle(
inherit: false,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
fontSize: 16.0,
),
),
Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.clip,
inherit: false,
color: Theme.of(context).colorScheme.onPrimaryContainer,
fontSize: 14.0,
),
),
],
)
),
),
]
),
),
),
Expanded(
flex: 5,
child: Container(
child: IconButton(
onPressed: (){},
icon: Icon(
Icons.close_rounded,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
size: 16.0,
),
),
),
)
],
)
),

Answer 1

try this
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child:Container(
width: double.infinity,
height: 80.0,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
decoration: BoxDecoration(
color: Colors.black,
border: Border(
left: BorderSide(
color: Theme.of(context).colorScheme.primary,
width: 10,
),
top: BorderSide.none,
right: BorderSide.none,
bottom: BorderSide.none,
),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
spreadRadius: 0,
blurRadius: 1,
offset: const Offset(0, 1),
), // no shadow color set, defaults to black
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 40,
child: Container(
padding: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
CupertinoIcons.check_mark_circled,
color:
(const Color(0xFF70AD47)).withAlpha(400),
size: 40.0,
),
Expanded(
// flex: 5,
child: Container(
padding: EdgeInsets.only(
left: 10.0, right: 0.0),
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Success",
style: TextStyle(
inherit: false,
color: (const Color(0xFF70AD47))
.withAlpha(400),
fontSize: 16.0,
),
),
Expanded(
child: Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.clip,
inherit: false,
color: Theme.of(context)
.colorScheme
.onPrimaryContainer,
fontSize: 14.0,
),
),
),
],
)),
),
],
),
),
),
Expanded(
flex: 5,
child: Container(
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.close_rounded,
color: (const Color(0xFF70AD47)).withAlpha(200),
size: 16.0,
),
),
),
)
],
)),
)
and you get results like this i tripled the text and checkout the result also i removed container for border and created the left border with border property of container :
EDIT:
try this code in this the container will grow according to the text:
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: Container(
width: double.infinity,
// height: 80.0,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
decoration: BoxDecoration(
color: Colors.black,
border: Border(
left: BorderSide(
color: Theme.of(context).colorScheme.primary,
width: 10,
),
top: BorderSide.none,
right: BorderSide.none,
bottom: BorderSide.none,
),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
spreadRadius: 0,
blurRadius: 1,
offset: const Offset(0, 1),
), // no shadow color set, defaults to black
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 40,
child: Container(
padding: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
CupertinoIcons.check_mark_circled,
color:
(const Color(0xFF70AD47)).withAlpha(400),
size: 40.0,
),
Expanded(
// flex: 5,
child: Container(
padding:
EdgeInsets.only(left: 10.0, right: 0.0),
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Success",
style: TextStyle(
inherit: false,
color: (const Color(0xFF70AD47))
.withAlpha(400),
fontSize: 16.0,
),
),
Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.fade,
inherit: false,
color: Theme.of(context)
.colorScheme
.onPrimaryContainer,
fontSize: 14.0,
),
),
],
),
),
),
],
),
),
),
Expanded(
flex: 5,
child: Container(
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.close_rounded,
color: (const Color(0xFF70AD47)).withAlpha(200),
size: 16.0,
),
),
),
)
],
)),
)
this is the result:

Answer 2

you can remove the height property and wrap the parent Container widget with an Expanded widget.it should look like this:
i hope this helps.
Expanded(
child: Container( width: double.infinity,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.inversePrimary,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
spreadRadius: 0,
blurRadius: 1,
offset: const Offset(0, 1)
), // no shadow color set, defaults to black
]
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Container(
width: 8,
padding: EdgeInsets.all(0.0),
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0),bottomLeft:Radius.circular(10.0) ),
color: buildMaterialColor(const Color(0xFF70AD47)),
),
),
),
Expanded(
flex: 40,
child: Container(
padding:EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children:[
Expanded(
flex: 1,
child: Text(
textAlign: TextAlign.end,
String.fromCharCode( CupertinoIcons.check_mark_circled.codePoint),
style: TextStyle(
inherit: false,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
fontSize: 40.0,
fontFamily: CupertinoIcons.check_mark_circled.fontFamily,
package: CupertinoIcons.check_mark_circled.fontPackage,
),
),
),
Expanded(
flex:5,
child: Container(
padding: EdgeInsets.only(left:10.0,right: 0.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Success",
style: TextStyle(
inherit: false,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
fontSize: 16.0,
),
),
Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.clip,
inherit: false,
color: Theme.of(context).colorScheme.onPrimaryContainer,
fontSize: 14.0,
),
),
],
)
),
),
]
),
),
),
Expanded(
flex: 5,
child: Container(
child: IconButton(
onPressed: (){},
icon: Icon(
Icons.close_rounded,
color: buildMaterialColor(const Color(0xFF70AD47)).shade400,
size: 16.0,
),
),
),
)
],
)),
)

Answer 3

Think you item build like, no need to provide flex. Use expanded to available spaces.
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildLeft(context),
Expanded(child: buildMiddle(context)),
/// take
buildRightCloseIcon(),
],
),
Test widget.
class FAs23 extends StatefulWidget {
const FAs23({super.key});
#override
State<FAs23> createState() => _FAs23State();
}
class _FAs23State extends State<FAs23> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
SizedBox(
height: 200,
),
Container(
width: double.infinity,
height: 80.0,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.inversePrimary,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
spreadRadius: 0,
blurRadius: 1,
offset: const Offset(
0, 1)), // no shadow color set, defaults to black
]),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildLeft(context),
Expanded(child: buildMiddle(context)),
/// take
buildRightCloseIcon(),
],
),
),
],
),
),
);
}
Container buildRightCloseIcon() {
return Container(
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.close_rounded,
color: const Color(0xFF70AD47),
size: 16.0,
),
),
);
}
Container buildMiddle(BuildContext context) {
return Container(
padding: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
textAlign: TextAlign.end,
String.fromCharCode(CupertinoIcons.check_mark_circled.codePoint),
style: TextStyle(
inherit: false,
color: const Color(0xFF70AD47),
fontSize: 40.0,
fontFamily: CupertinoIcons.check_mark_circled.fontFamily,
package: CupertinoIcons.check_mark_circled.fontPackage,
),
),
Expanded(
child: Container(
padding: const EdgeInsets.only(left: 10.0, right: 0.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Success",
style: TextStyle(
inherit: false,
color: Color(0xFF70AD47),
fontSize: 16.0,
),
),
Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.clip,
inherit: false,
color:
Theme.of(context).colorScheme.onPrimaryContainer,
fontSize: 14.0,
),
),
],
)),
),
]),
);
}
Container buildLeft(BuildContext context) {
return Container(
width: 8,
// height: double.infinity,// will get parent height
padding: const EdgeInsets.all(0.0),
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)),
color: Color(0xFF70AD47),
),
);
}
}

Answer 4

Please remove MediaQuery.of(context).size.height
Expanded(
flex: 1,
child: Container(
width: 8,
padding: EdgeInsets.all(0.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0),bottomLeft:Radius.circular(10.0) ),
color: buildMaterialColor(const Color(0xFF70AD47)),
),
Rest are
Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.inversePrimary,
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
boxShadow: [
BoxShadow(
color: Theme.of(context).colorScheme.primary,
blurRadius: 1,
offset: const Offset(0, 1)),
]),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 8,
padding: const EdgeInsets.all(0.0),
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
color: Color(0xFF70AD47),
),
child: const SizedBox(height: 100),
),
Expanded(
child: Column(
children: const [
Text(
"Success",
style: TextStyle(
inherit: false,
color: Color(0xFF70AD47),
fontSize: 16.0,
),
),
Text(
"lorem ipsum de feacto de jure lorem ipsum de feacto de jure",
style: TextStyle(
overflow: TextOverflow.clip,
inherit: false,
fontSize: 14.0,
),
),
],
),
),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.close_rounded,
color: Color(0xFF70AD47),
size: 16.0,
),
)
],
),
),