Discussion: How to animate expanded widget?

[SubuMangu]

Discussion: How to animate expanded widget?

This issue has been made to discuss about a problem that I am facing while trying to animate a widget inside Expanded widget in a task

Summary

Actually, I am trying to make a clone of ChatGPT text field in flutter as you can see 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 declared my Text field in Expanded widget so that it will occupy the remaining space of the row as you can see below:

// 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
                            ),
                          ),)
                  ),

             )),

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 the part of the code(mentioned above) 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.
4. Mention the changes I have to make in my code.

I will be gratefull if someone helped me..🥲🥲