I am building a flutter application where I am trying to add a container and it's child text. I want the container to take as much height as the text requires. But instead it takes the height specified.
Following is my code:
class ChangePassword extends StatefulWidget {
@override
_ChangePasswordState createState() =>
_ChangePasswordState();
}
class _ChangePasswordState extends State<ChangePassword> {
final GlobalKey<ScaffoldState> _scaffoldkey = new GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
key: _scaffoldkey,
drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
Container(
height: (MediaQuery.of(context).size.height * 0.23),
child: DrawerHeader(
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Row(
children: [
Container(
height: MediaQuery.of(context).size.width * 0.1,
width: MediaQuery.of(context).size.width * 0.1,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Theme.of(context).primaryColor,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(imageurl)),
boxShadow: [
BoxShadow(
blurRadius: 25,
color: Colors.black.withOpacity(0.2),
offset: Offset(0, 10),
)
],
),
),
Container(
height: MediaQuery.of(context).size.width * 0.15,
width: MediaQuery.of(context).size.width * 0.5,
padding: EdgeInsets.symmetric(horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: TextStyle(
fontSize: 15,
color: Colors.lightBlue[900],
fontWeight: FontWeight.bold),
),
Text(email),
SizedBox(
height: 2,
),
Row(
children: [
Icon(
Icons.remove_red_eye_outlined,
size: 12,
),
Text(
'View Profile',
style: TextStyle(
fontSize: 12,
),
)
],
)
],
),
),
],
)),
decoration: BoxDecoration(
color: Colors.white,
),
),
),
],
),
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.35,
child: Stack(children: [
Positioned(
height: MediaQuery.of(context).size.height * 0.23,
top: 0,
child: Padding(
padding: EdgeInsets.only(top: 50),
child: Container(
color: Color(0xff002060),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
child: Align(
alignment: Alignment.topCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
GestureDetector(
onTap: () {
_scaffoldkey.currentState.openDrawer();
},
child: new Container(
child: Icon(
Icons.menu,
color: Colors.white,
size: MediaQuery.of(context).size.height *
0.04,
),
padding: new EdgeInsets.all(7.0),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.3,
),
Container(
height:
MediaQuery.of(context).size.height * 0.07,
child: Center(
child: Text(
'Profile',
style: TextStyle(
color: Colors.white,
),
),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.3,
),
Icon(
Icons.search,
color: Colors.white,
size: MediaQuery.of(context).size.height * 0.04,
),
],
),
),
),
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.16,
left: MediaQuery.of(context).size.width * 0.03,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.height * 0.14,
height: MediaQuery.of(context).size.height * 0.14,
decoration: ShapeDecoration(
shape: CircleBorder(), color: Colors.white),
child: Padding(
padding: EdgeInsets.all(8.0),
child: DecoratedBox(
decoration: ShapeDecoration(
shape: CircleBorder(),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://thumbor.forbes.com/thumbor/fit-in/416x416/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5f4ebe0c87612dab4f12a597%2F0x0.jpg%3Fbackground%3D000000%26cropX1%3D292%26cropX2%3D3684%26cropY1%3D592%26cropY2%3D3987',
))),
),
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.05,
),
Column(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.08,
child: Text(
'Bill Gates',
style: TextStyle(
fontSize: 25,
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Calibri'),
),
),
],
)
],
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.24,
left: MediaQuery.of(context).size.height * 0.165,
child: FittedBox(
fit: BoxFit.fill,
child: Container(
height: MediaQuery.of(context).size.height * 0.09,
width: MediaQuery.of(context).size.width * 0.6,
child: Text(
'Bill Gates welcomes you. Welcome to Microsoft. It gives me immense pleasure to announce Josh Hazlewood as it\'s new CEO. It is always immense pleasure to work with them. looking foward to have a great time with him.',
style: TextStyle(
color: Colors.black, fontFamily: 'Calibri'),
),
),
),
),
]),
),
],
)),
],
),
));
}
Following is the image:
I want the container that contains the text below 'Bill Gates' to be wrapped according to the information entered there.
The whole container should decrease as I am planning to add widgets below this customised appbar, so is there any way I can achieve this?
I tried to use flexible but it did not work. Can someone help me with this please?