Flutter - Container height same as child Text.length?

Question

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),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      )),
    );
  }
}

Answer 1

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),
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    );
                  }),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

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!!