Question 74972 in Flutter Question posted in
The official Flutter documentation can be found here.

how to create dynamic number of text editing controllers with unique names – Flutter

I am trying to make game score tracked game, and I have a page where the user enters the number of players and go to another page to enter their names, so he is going to PlayersIntroductionScreen() with the number of players, in the players introduction screen I need to display several TextFormField() based on the players number and I can made this with for(), but the problem is I need a TextEditingController() for each TextFormField()

class PlayersIntroductionScreen extends StatelessWidget {
   const PlayersIntroductionScreen({Key? key, required this.playersNumber}) : super(key: key);

   final int playersNumber;

   @override
   Widget build(BuildContext context) {
     return Placeholder();
   }
 }

I tried to make a for loop before the overriden build() but it says Expected a class member.

How can I achieve that with unique name for every controller like

var firstPlayerController = TextEditingController() and so on

Tags:

2

Answers


  1. 0

    To create a dynamic number of text editing controllers with unique names in Flutter, you can use a List to store the controllers and assign a unique name to each controller based on its position in the list.

    class PlayersIntroductionScreen extends StatefulWidget {
  const PlayersIntroductionScreen({Key? key, required this.playersNumber}) : super(key: key);

  final int playersNumber;

  @override
  State<PlayersIntroductionScreen> createState() => _PlayersIntroductionScreenState();
}

class _PlayersIntroductionScreenState extends State<PlayersIntroductionScreen> {

  List<TextEditingController> controllers = [];

  @override
  void initState() {
    super.initState();
    createControllers(widget.playersNumber);
  }
  @override
  void dispose() {
    // TODO: implement dispose
    disposeControllers();
    super.dispose();
  }
  
  void createControllers(int numberOfControllers) {
    for (int i = 0; i < numberOfControllers; i++) {
      TextEditingController controller = TextEditingController();
      controllers.add(controller);
    }
  }
  void disposeControllers() {
    for (TextEditingController controller in controllers) {
      controller.dispose();
    }
  }
  @override
  Widget build(BuildContext context) {
    return buildTextFields();
  }

  Widget buildTextFields() {
    return Column(
      children: List.generate(controllers.length, (index) {
        return TextField(
          controller: controllers[index],
          decoration: InputDecoration(
            hintText: 'Text Field ${index + 1}',
          ),
        );
      }),
    );
  }
}
    Login or Signup to reply.
  2. 0

    Each text field will be manage by a unique controller with unique instance. So i think you no need to add name for each of these. (Your player isn’t place their name, so all of them still anonymous)
    You could make a List to manage each field and access by index.
    Your class could be

    class PlayersIntroductionScreen extends StatefulWidget {
  
  final int numberOfPlayer;
  
  const PlayersIntroductionScreen({super.key, required this.numberOfPlayer});

  @override
  State<StatefulWidget> createState() => _PlayersIntroductionScreenState();
}

class _PlayersIntroductionScreenState extends State<PlayersIntroductionScreen> {
  final List<TextEditingController> _controllers = [];

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < widget.numberOfPlayer; i++) {
      final controller = TextEditingController()
        .addListener(() {
          setState(() {});
      });
      _controllers.add(controller);
    }
  }

  @override
  void dispose() {
    _controllers.forEach((e) {e.dispose();});
    super.dispose();
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search