fluttercommunity / fluttercommunity/community
Discussion: How to animate expanded widget?
- Dominant language
- No language data
- Stars
- 1.7k
- Forks
- 128
- PR merge metrics
- No merged PRs in 30d
Description
# 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](https://github.com/SubuMangu/ChatGPT-Text-Field-in-Flutter/blob/main/main.dart)
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..🥲🥲
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.