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

So 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 `AspectRatio` class, there you can define, that the container is always square. https://api.flutter.dev/flutter/widgets/AspectRatio-class.html — Manuel, Mar 26 '20 at 19:06
Thank 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, Mar 26 '20 at 19:38

score 3 · Answer 1 · answered Mar 26 '20 at 19:38

3

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

answered Mar 26 '20 at 19:38

Arun Yogeshwaran

433
5
9

Thank 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 – Biobrolly Mar 27 '20 at 06:32

score 1 · Answer 2 · answered Mar 27 '20 at 16:54

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

Flutter - Container height same as child Text.length?

2 Answers2

Linked

Related