hoor Iqbal
Reputation: 43
Flutter : how to make container height wrap around its content
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,
),
),
),
)
],
)
),
Upvotes: 1
Views: 3467
Answers (4)
Munsif Ali
Reputation: 5792
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:
Upvotes: 1
Rahul Variya
Reputation: 1352
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,
),
)
],
),
),
Upvotes: 1
Md. Yeasin Sheikh
Reputation: 63569
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),
),
);
}
}
Upvotes: 0
Godson
Reputation: 147
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,
),
),
),
)
],
)),
)
Upvotes: 0
Related Questions
- onUpdate not being called in widget, even though I see the android.appwidget.action.APPWIDGET_UPDATE intent in onreceive
- OnUpdate NEVER called - Android Widget
- not onUpdate in AppWidgetProvider
- How to manually call `onUpdate` from within the widget itself
- onUpdate() not getting called for a widget?
- Widget update results in ANR
- Android AppWidget onUpdate doesn't always update widgets
- Android Widget Won't Update
- Widget Not Updating?
- Android appwidget onUpdate()