Making text field in ChatGPT App from scratch #161848

[SubratMohapatra2003]

Hello! I am trying to make a text field similar to that of ChatGPT App as shown below:

I want smooth change in width of text field and hiding of text effect as I click the plus icon in the gif shown below from ChatGPT App:

I experimented a lot with AnimatedSize and AnimatedContainer by following ChatGPT’s instruction but didn’t work

Plz help me with these following steps:

1. Copy the complete code from here
2. Run the code in Android Studio or VS Code
3. Fix this part of the code from the complete code(mentioned in step 1) where I declared my Text Field. If necessary fix the complete code. Don’t remove the scrollbar from text field or change the functionality of the code.

// Fix this part of the code in Expanded Widget
        Expanded(child:Padding(
                  padding: EdgeInsets.only(bottom: 10),
                  child: Container(
                      decoration: BoxDecoration(
                      color: Colors.grey[900], // Background color
                      borderRadius: BorderRadius.circular(25), // Rounded corners
                    ),
                    padding: EdgeInsets.symmetric(horizontal: 20),
                    child: RawScrollbar(
                      thumbColor: Colors.white70,
                      thumbVisibility: true,
                      controller: _firstController,
                      child: TextField(

                            onTap: (){
                              setState(() {
                                _showIcons=false;
                              });
                            },
                            scrollController: _firstController,
                            onChanged: _onTextChanged,
                            minLines: 1,
                            maxLines: 5,
                            keyboardType: TextInputType.multiline,
                            style: TextStyle(
                              color: Colors.white, // Input text color
                            ),
                            decoration: InputDecoration(
                              hintText: 'Message',
                              hintStyle: TextStyle(
                                color: Colors.white54, // Hint text color
                              ),
                              border: InputBorder.none, // No border
                            ),
                          ),)
                  ),

             )),

4. Mention the changes I have to make in my code.

I will be gratefull if someone helped me…