This is what I want:

And this is what I got:

Here is my code:

      Container(
          margin: EdgeInsets.only(top: 10, bottom: 5),
          decoration: BoxDecoration(
            color: Color(0xFFEEEEEE),
            borderRadius: BorderRadius.circular(12),
          ),
          constraints: BoxConstraints(
            minHeight: 25.0,
            maxHeight: 100,
            minWidth: MediaQuery.of(context).size.width,
            maxWidth: MediaQuery.of(context).size.width,
          ),
          child: Scrollbar(
            child: TextField(
              keyboardType: TextInputType.multiline,
              controller: inputTextController,
              maxLines: null,
              style: TextStyle(
                  color: Colors.black,
              ),
              decoration: InputDecoration(
                contentPadding: EdgeInsets.symmetric(horizontal: 13, vertical: 13),
                border: InputBorder.none,
                hintText: 'Type a message',
                  hintStyle: TextStyle(
                    color: Color(0xff99999B),
                  )
              ),
            ),
          ),
        ),

Tried wrapping the container with row but it overflows. Also tried wrapping the TextField with Row but the TextField disappear. Is there any solutions?

CodePudding user response：

Wrapping your TextField Container with Flexible before you wrap it with Row, solves the problem mainly.

Here is the entire code:

   Row(
      children: [
        Flexible(
          child: Container(
            margin: EdgeInsets.only(top: 10, bottom: 5),
            decoration: BoxDecoration(
              color: Color(0xFFEEEEEE),
              borderRadius: BorderRadius.circular(12),
            ),
            constraints: BoxConstraints(
              minHeight: 25.0,
              maxHeight: 100,
              minWidth: MediaQuery.of(context).size.width,
              maxWidth: MediaQuery.of(context).size.width,
            ),
            child: Scrollbar(
              child: TextField(
                keyboardType: TextInputType.multiline,
                // controller: inputTextController,
                maxLines: null,
                style: TextStyle(
                  color: Colors.black,
                ),
                decoration: InputDecoration(
                    contentPadding: EdgeInsets.symmetric(horizontal: 13, vertical: 13),
                    border: InputBorder.none,
                    hintText: 'Type a message',
                    hintStyle: TextStyle(
                      color: Color(0xff99999B),
                    )
                ),
              ),
            ),
          ),
        ),
        Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.blue,
          ),
          margin: EdgeInsets.symmetric(horizontal: 8),
          child: IconButton(
            icon: Icon(Icons.send),
            onPressed: () => {},
            color: Colors.white,
          ),
        ),
      ],
    ),

CodePudding user response：

Ok so from the image that you have provided I have created and example for you which might be ok for your use case check the description below that for the UI implementation:

1. So there is a row which has three widgets.

2. In which First widget is a card with Expanded to scale as per the Device size then comes the child with another row which has the following widget :

   1. Icon button for emoji's stuff.
   2. TextField with expanded to scale for device sizes.
   3. And Next one comes the camera widget which is again a IconButton.

3. There is a Floating action button in the end.

4. Container for right padding, you can use widget of your choice.

check the Git repo, this has a sample code:

Let me know if this works for you.