fluttercommunity / fluttercommunity/community

Discussion: How to animate expanded widget?

Open
#160 0 comments 0 reactions 1 assignee Claimed by @jeroen-meijer View on GitHub
discussion
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

![Image](https://github.com/user-attachments/assets/d5c89ab6-0d59-4128-9a2d-5b16722c08b7)

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:

![Image](https://github.com/user-attachments/assets/69b6a1d2-73d2-433b-83cb-84ed98b37405)

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.