如何根据文本长度 flutter 制作容器高度

Question

i want to know, how let the container height depend on length of text and cover it in container not in picture 2 if i setting text too long the text is come over container then how to fix it

on message by b-akused02: it's short and still in height:100,

on message by b-akused01: it's long over container

on message by b-akused03: it's short and still in height:100,

Widget _buildCommentItem({@required CommentDetail commentDetail}) {
    return Container(
      height: 100,
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: 20.0,
            ),
            Expanded(
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 20),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: 45, //height, //155,
                        width: 45, //width, //155,
                        decoration: BoxDecoration(
                          color: const Color(0xff7c94b6),
                          image: DecorationImage(
                            image: NetworkImage(
                                commentDetail.otherUserProfileImageUrl),
                            fit: BoxFit.cover,
                          ),
                          borderRadius: BorderRadius.circular(12),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 8,
                      child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 10),
                        child: Wrap(
                          // crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            FittedBox(
                              fit: BoxFit.cover,
                              child: Text(
                                commentDetail.otherUsername,
                                style: TextStyle(
                                    color: Colors.black,
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                            Text(
                              commentDetail.comment,
                              style: TextStyle(
                                color: Colors.black,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(
              height: 20,
            )
          ],
        ),
      ),
    );
  }

Answer 1

Wrap the given container in a Column and remove the height parameter from within.

Answer 2

Complete Code

  Widget _buildCommentItem({@required CommentDetail commentDetail}) {
    return Container(
      child: Container(
        child: Wrap(
          // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          // crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 20),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        height: 45, //height, //155,
                        width: 45, //width, //155,
                        decoration: BoxDecoration(
                          color: const Color(0xff7c94b6),
                          image: DecorationImage(
                            image: NetworkImage(
                                commentDetail.otherUserProfileImageUrl),
                            fit: BoxFit.cover,
                          ),
                          borderRadius: BorderRadius.circular(12),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 8,
                      child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 10),
                        child: Wrap(
                          // crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            FittedBox(
                              fit: BoxFit.cover,
                              child: Text(
                                commentDetail.otherUsername,
                                style: TextStyle(
                                    color: Colors.black,
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                            Text(
                              commentDetail.comment,
                              style: TextStyle(
                                color: Colors.black,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Answer 3

only create a Container without height.

  Container(
width: 200, //for example
child: Text('any Text'),
)