Flutter wrap text inside nested Widgets

Question

My Text widget is not wrapping, causing an overflow. I've tried methods from this post , but appear to be missing the right spot to add in a flex/expanded.

The spot where it says "//get this text to wrap" is the Text widget I'd like to wrap.

Padding(
    padding: const EdgeInsets.only(top: 8.0),
    child: Text(snapshot.data[index].message_text, //get this text to wrap
        style: TextStyle(
          color: Colors.grey,
          fontSize: 15.0,
          fontWeight: FontWeight.bold,
        ),
      overflow: TextOverflow.visible,
    ),
  ),

Full Code:

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: new AppBar(title: Text("Comments")),
        body: Container(
          child: Column(
            children: <Widget>[
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(30.0),
                      topRight: Radius.circular(30.0),
                    ),
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(30.0),
                      topRight: Radius.circular(30.0),
                    ),
                    child: new RefreshIndicator(
                      child:
                      Container(
                        child: FutureBuilder(
                            future: getAllCommentsForAd(this.ad_id_passed_in),
                            builder: (BuildContext context, AsyncSnapshot snapshot) {
                              if (snapshot.data == null) {
                                return Container(
                                    child: Center(
                                      child: Text("Loading..."),
                                    )
                                );
                              } else {
                                return ListView.builder(
                                  shrinkWrap: true,
                                  itemCount: snapshot.data.length,
                                  itemBuilder: (BuildContext context, int index) {
//                        return ListTile(
//                          leading:   CircleAvatar(
//                              radius: 35.0,
//                              backgroundImage:  new NetworkImage(snapshot.data[index].imageUrl),
//                            ),
//                          title: Text(snapshot.data[index].email),
//                        );

                                    return GestureDetector(
                                      onTap: () => (
                                      print("tapped that")
//                                  Navigator.push(
//                                    context,
//                                    MaterialPageRoute(
//                                      builder: (_) => MessageScreenRoom(
//                                          snapshot.data[index],this.logged_in_user_id
//                                      ),
//                                    ),
//                                  )
                                      ),
                                      child: Container(
                                        margin: EdgeInsets.only(
                                          top: 5.0,
                                          bottom: 5.0,
                                          right: 1.0,
                                          left: 10.0,
                                        ),
                                        padding:
                                        EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                                        decoration: BoxDecoration(
                                            color: snapshot.data[index].hearted ? Colors.lime[50] : Colors.white,
                                            borderRadius: BorderRadius.only(
                                              topRight: Radius.circular(20.0),
                                              bottomRight: Radius.circular(20.0),
                                              topLeft: Radius.circular(20.0),
                                              bottomLeft: Radius.circular(20.0),
                                            )),
                                        child: Row(
                                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                          children: <Widget>[


                                            Expanded(
                                              child: Row(
                                                children: <Widget>[
                                                  CircleAvatar(
                                                    radius: 35.0,
                                                    backgroundImage:  new NetworkImage(snapshot.data[index].imageUrl),
                                                  ),
                                                  SizedBox(
                                                    width: 10.0,
                                                  ),
                                                  Column(
                                                    crossAxisAlignment: CrossAxisAlignment.start,
                                                    children: <Widget>[
                                                      Text(snapshot.data[index].user_name,
                                                          style: TextStyle(
                                                            color: Colors.grey,
                                                            fontSize: 15.0,
                                                            fontWeight: FontWeight.bold,
                                                          )),

                                                      Padding(
                                                        padding: const EdgeInsets.only(top: 8.0),
                                                        child: Text(snapshot.data[index].message_text, //get this text to wrap
                                                            style: TextStyle(
                                                              color: Colors.grey,
                                                              fontSize: 15.0,
                                                              fontWeight: FontWeight.bold,
                                                            )),
                                                      ),
                                                      SizedBox(
                                                        height: 10.0,
                                                      ),
                                                      Container(
                                                        width: MediaQuery.of(context).size.width * 0.45,
                                                        child: Text(
                                                          "",
                                                          style: TextStyle(
                                                            color: Colors.blueGrey,
                                                            fontSize: 15.0,
                                                            fontWeight: FontWeight.w600,
                                                          ),
                                                          overflow: TextOverflow.ellipsis,
                                                        ),
                                                      )
                                                    ],
                                                  ),
                                                ],
                                              ),
                                            ),


                                            Column(
                                              children: <Widget>[
                                                Text("",
                                                    style: TextStyle(
                                                        color: Colors.grey,
                                                        fontSize: 15.0,
                                                        fontWeight: FontWeight.bold)),
                                                SizedBox(
                                                  height: 5.0,
                                                ),
                                                snapshot.data[index].hearted
                                                    ? Container(
                                                    width: 40.0,
                                                    height: 20.0,
                                                    alignment: Alignment.center,
                                                    child: Icon(Icons.favorite, color: Colors.red, size: 30),

                                                )
                                                    : Icon(Icons.favorite_border, color: Colors.red, size: 30),
                                              ],
                                            ),
                                          ],
                                        ),
                                      ),
                                    );

                                  },
                                );
                              }
                            }
                        ),
                      ),
                      onRefresh: refreshMessages,
                    ),
                  ),
                ),

              ),
             // _buildMessageComposer(),

              Row(
                children: <Widget>[
                  Expanded(child: TextField(
                    textCapitalization: TextCapitalization.sentences,
                    controller: text_message_controller,
                    onChanged: (value){

                    },
                    decoration: InputDecoration.collapsed(hintText: '   Leave a comment...'),
                  )),
                  IconButton(
                      icon: Icon(Icons.send),
                      iconSize: 30.0,
                      color: Theme.of(context).primaryColor,
                      onPressed: () {
                        //send comment TODO: do this comment send
                        sendComment(ad_id_passed_in, this.logged_in_user_id, text_message_controller.text);
                        text_message_controller.clear();
                        setState(() {
                        });




                      })
                ],
              ),


            ],
          ),


        ),

      );
    }

Answer 1

try wrapping your text with Flexible widget