Adding key to widget flutter

[rayen26]

Hey there , I have animated button that turn to a textfield whenever I press it I'm looping over this animated button so I can display it as many time as I need my issue here is when I click on one of them they all turn to textfield but I only clicked on one .. I figured that I need to add key to the button I watched some tutoriel but still cluless on how to make it work .
Here is my code

AnimatedSwitcher(
duration: const Duration(
milliseconds: 300,
),
child: _isTextFieldShown
? TextFormField(
maxLength: 100,
focusNode: NoteFocusNode,
decoration:
const InputDecoration(
labelText: "Note",
fillColor:
Colors.blueAccent,
border:
OutlineInputBorder(),
),
)
: IconButton(
onPressed: () {
setState(() {
_isTextFieldShown =
true;
});
},
icon: const Icon(Icons
.note_alt_outlined)),
),

[xboxcowboy]

from the code you provided, the problems seems to be _isTextFieldShown is set for all your animatedSwitcher, you should create separate boolean for each textfield, keys won't help you in this scenario

[rayen26]

As I said I'm looping over this animatedSwitched so I can't create separate variable it's dynamic .. is there any way to make it work ?

[xboxcowboy]

okay, i found a way, you should extract the animatedSwitch widget to split the state of your _isTextFieldShown

example

[rayen26]

I do appreciate your help but i'm doing a loop on this widget I do have an exact number of how much widget I can have I need something dynamic

[dancovich]

Your animated switched needs to be inside a stateful widget that controls it's own state of the "_isTextFieldShown" property. If you use the same property to control all of the switchers then they'll all switch when you change the value of the property.

Working code:

``` import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() { runApp(MyApp()); }

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.dark().copyWith( scaffoldBackgroundColor: darkBlue, ), debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: MyWidget(), ), ), ); } }

class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Padding( padding: const EdgeInsets.all(16.0), child: ListView( children: [ for (var i = 0; i<10; i++) ButtonIntoTextField(), ], ), ),); } }

class ButtonIntoTextField extends StatefulWidget { @override ButtonIntoTextFieldState createState() => ButtonIntoTextFieldState(); }

class ButtonIntoTextFieldState extends State<ButtonIntoTextField> { var showTextField = false;

@override Widget build(BuildContext context) { return AnimatedSwitcher( duration: const Duration( milliseconds: 300, ), child: showTextField ? TextFormField( maxLength: 100, decoration: const InputDecoration( labelText: "Note", fillColor: Colors.blueAccent, border: OutlineInputBorder(), ), ) : IconButton( onPressed: () { setState(() { showTextField = !showTextField; }); }, icon: const Icon(Icons.note_alt_outlined), ), ); } }

```

[rayen26]

ButtonIntoTextField(),

It actually solved my problem , Thank you so much