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,
),
),
),
)
],
)
),
4
Answers
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.
Think you item build like, no need to provide flex. Use expanded to available spaces.
Test widget.
Please remove
MediaQuery.of(context).size.heightRest are
try this
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:
this is the result: