type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'String' shows this error

I am trying to develop a messaging app and it always throws an exception

'type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'String'

when i am trying to give the background color to messages. It also shows

renderflex overflowed by 99335 pixels

When using MessageBubble in list instead of List.

                        final messages = snapshot.data.docs;
                        List<**MessageBubble**> messageBubbles = [];
                        for  (var message in messages){
                          final messageText = message.data();
                          final messageSender = message.data();
                          final messageBubble = MessageBubble(sender: messageSender, text: 
                          messageText,);
                          messageBubbles.add(messageBubble);
                        }
                        return Expanded(
                          child: ListView(
                            padding: EdgeInsets.symmetric(horizontal: 10,vertical: 20),
                            children : messageBubbles,
                          ),
                        );
                    },
                  ),
                  Container(
                    decoration: kMessageContainerDecoration,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Expanded(
                          child: TextField(
                            onChanged: (value) {
                              messageText = value;
                            },
                            decoration: kMessageTextFieldDecoration,
                          ),
                        ),
                        FlatButton(
                          onPressed: () {
                            _fireStore.collection('messages').add({
                              'text': messageText,
                              'sender': loggedInUser.email,
                            }
                            );
                          },
                          child: Text(
                            'Send',
                            style: kSendButtonTextStyle,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        }
    }
    
    class MessageBubble extends StatelessWidget {
    
      MessageBubble({this.sender, this.text});
    
      String sender;
      String text;
    
      @override
      Widget build(BuildContext context) {
        return Material(
          color: Colors.blueAccent,
          child: Text(
            '$text from $sender',
            style: TextStyle(
              fontSize: 50,
              color: Colors.white,
            ),
          ),
        );;
      }
    }
    

This is because MessageBubble takes two strins [sender and text] according to your model. But when you pass:

 final messageText = message.data();

message.data() here is a Map<String,dynamic>. What is the field that contains the text in this map? If for example in Firebase this field is called textField, you need to use this:

 final messageText = message.get('textField');