Flutter - Container height same as child Text.length?
5,082
Solution 1
Wrap your Text widget inside an Expanded and remove the hardcoded height of 1400
Expanded(
child: Text(
textDes,
style: TextStyle(
fontSize: 16.0,
color: Color.fromRGBO(117, 117, 117, 1),
),
),
),
Hope it helps!!
Solution 2
After long hours, this is what I came up with and works.
import 'package:angelbay_bungalows/screens/overview.dart';
import 'package:angelbay_bungalows/widgets/drawer.dart';
import 'package:flutter/material.dart';
class Amenities extends StatelessWidget {
final String titleTop;
final String textDes;
final String img;
Amenities(this.titleTop, this.textDes, this.img);
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
var screenSize = MediaQuery.of(context).size;
return Scaffold(
key: scaffoldKey,
drawer: AppDrawer(),
body: Container(
color: Color.fromRGBO(216, 216, 216, 1),
child: Stack(
// overflow: Overflow.visible,
children: <Widget>[
Image.asset(
"$img",
height: 400,
width: screenSize.width,
fit: BoxFit.cover,
),
Positioned(
top: 50.0,
left: 10.0,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Overview();
},
),
);
},
child: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: 30.0,
),
),
),
Positioned(
top: 50.0,
right: 10.0,
child: GestureDetector(
onTap: () => scaffoldKey.currentState.openDrawer(),
child: Icon(
Icons.menu,
color: Colors.white,
size: 30.0,
)),
),
Padding(
padding: const EdgeInsets.only(top: 40),
child: DraggableScrollableSheet(
initialChildSize: 0.5,
minChildSize: 0.5,
maxChildSize: 0.8,
builder: (context, controller) {
return SingleChildScrollView(
controller: controller,
child: Container(
width: screenSize.width,
decoration: BoxDecoration(
color: Color.fromRGBO(216, 216, 216, 1),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: Padding(
padding: EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
titleTop,
style: TextStyle(
color: Colors.black,
fontSize: 26.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 40.0,
),
Text(
'Description',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: Color.fromRGBO(50, 54, 67, 1),
),
),
SizedBox(
height: 20.0,
),
Text(
textDes,
style: TextStyle(
fontSize: 16.0,
color: Color.fromRGBO(117, 117, 117, 1),
),
)
],
),
),
),
);
}),
),
],
),
),
);
}
}
Author by
Biobrolly
Updated on December 18, 2022Comments
-
Biobrolly over 1 year
Good Evening fellow Developers,
I am trying to find a way for my parent container to have its height set to be equal to the child text widget content. The text (textDes) in the Text widget is changing. It can be short or long and for that reason I can not set the height: to a specific number like 1400 because it will look ugly.
Please be so kind and help me, trying for hours.
import 'package:angelbay_bungalows/screens/overview.dart'; import 'package:angelbay_bungalows/widgets/drawer.dart'; import 'package:flutter/material.dart'; class Amenities extends StatelessWidget { final String titleTop; final String textDes; final String img; Amenities(this.titleTop, this.textDes, this.img); final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>(); @override Widget build(BuildContext context) { var screenSize = MediaQuery.of(context).size; return Scaffold( key: scaffoldKey, drawer: AppDrawer(), body: SingleChildScrollView( child: Container( height: 1400, width: screenSize.width, child: Stack( // overflow: Overflow.visible, children: <Widget>[ Image.asset( "$img", height: 400.0, width: screenSize.width, fit: BoxFit.cover, ), Positioned(), Positioned(), Positioned( top: 375.0, child: Container( // height: , width: screenSize.width, decoration: BoxDecoration( color: Color.fromRGBO(216, 216, 216, 1), borderRadius: BorderRadius.only( topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0), ), ), child: Padding( padding: const EdgeInsets.all(25.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( titleTop, style: TextStyle( color: Colors.black, fontSize: 26.0, fontWeight: FontWeight.bold, ), ), SizedBox( height: 40.0, ), Text( 'Description', style: TextStyle( fontSize: 18.0, fontWeight: FontWeight.w500, color: Color.fromRGBO(50, 54, 67, 1), ), ), SizedBox( height: 20.0, ), Text( textDes, style: TextStyle( fontSize: 16.0, color: Color.fromRGBO(117, 117, 117, 1), ), ), ], ), ), ), ), ], ), )), ); } }-
Manuel over 4 yearsSo easier speaking: You want the height of the conatiner equal to the child's width (which is the text widget). Is that correct? Then i would suggest the
AspectRatioclass, there you can define, that the container is always square. api.flutter.dev/flutter/widgets/AspectRatio-class.html -
Biobrolly over 4 yearsThank you for your input. What I want is the height of the container to be equal of the childs' Positioned container height, not width. The last Text widget in the last Positioned() Text(textDes) this is always changing depending on the text it fetches. That is why the height of the container changes. I hope that you understand
-
-
Biobrolly over 4 yearsThank you for your fast response and input. When I do what you suggested, the complete container disappears. The only visible thing is the image that has a set height of 400. The second container including the Text(textDes) is no longer there. Any thoughts? Thank you
