I'm trying to get an expandableTextFormField in bottomNavBar that will automatically increase in height as the user types into a new line. In my bottomNavBar code below, I gave the container a height of 60px so it doesn't take up the whole screen.

bottomNavigationBar: SafeArea(
    child:  Container(
          height: 60,
          color: Colors.white,
          margin: EdgeInsets.only(
              bottom: MediaQuery.of(context).viewInsets.bottom),
          padding: const EdgeInsets.only(
            left: 12,
            right: 8,
          ),
          child: Row(
            children: [
              CircleAvatar(
                backgroundImage: NetworkImage(url),
                radius: 15,
              ),
              Flexible(
                child: Padding(
                  padding: const EdgeInsets.only(
                    left: 16,
                    right: 8,
                    top: 2,
                    bottom: 2,
                  ),
                  child: TextFormField(
                    expands: true,
                    maxLines: null,
                    minLines: null,
                    style: TextStyle(
                      fontSize: 14,
                    ),
                    textCapitalization: TextCapitalization.sentences,
                    controller: commentEditingController,
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Color(0x27AFAFAF),
                      hintText: 'Comment as $displayName...',
                      hintStyle: TextStyle(color: Color(0xFFAFAFAF)),
                    ),
                  ),
                ),
              ),
              InkWell(
                onTap: () {
                 
                },
                child: Container(
                  padding: const EdgeInsets.symmetric(
                      vertical: 8, horizontal: 8),
                  child: const Text(
                    'Post',
                    style: TextStyle(color: Colors.blue),
                  ),
                ),
              )
            ],
          ),
        );
      },
    ),
  ),

I also attached a screenshot for more explanation of what I'm talking about;

Any help will be appreciated.screenshot

CodePudding user response：

here's my implementation

Container(
                  margin: const EdgeInsets.only(top: 20, bottom: 8),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(2),
                  ),
                  constraints: BoxConstraints(
                    minWidth: MediaQuery.of(context).size.width,
                    maxWidth: MediaQuery.of(context).size.width,
                    minHeight: 25.0,//min height you want to take by container
                    maxHeight: 100.0,//max height you want to take by container
                  ),
                  child: Scrollbar(
                    child: TextField(
                      keyboardType: TextInputType.multiline,
                      textInputAction: TextInputAction.done,
                      onSubmitted: (value) {
                       
                      },
                      maxLines: null,
                      // focusNode: focusNode,
                      controller: _message,
                      style: const TextStyle(color: Colors.white),
                      decoration: const InputDecoration(
                        border: InputBorder.none,
                        contentPadding:
                            EdgeInsets.symmetric(horizontal: 13, vertical: 13),
                        hintText: "Message(optional)",
                        hintStyle:
                            TextStyle(color: Colors.white24, fontSize: 14),
                      ),
                    ),
                  ),
                ),