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

Generate TextFields on demand with Stateless widgets and GetX in Flutter

Idea is to use GetX with Stateless widgets and generate TextFields on demand.

GetX says that if we use its state management then we won’t require Stateful widgets.

On the click of the + button, I want a TextField to get added to the List. Currently nothing is happening on the click of the + button.

Please point out the error.

What is the proper way to achieve this through GetX?

This is the screen file:

import 'package:flutter/material.dart';
import 'package:dynamic_lists/controllers/2_ListWithInputBoxGetxController.dart';
import 'package:get/get.dart';

class ListWithInputBoxGetx extends StatelessWidget {
  ListWithInputBoxGetx({Key? argKey, this.title}) : super(key: argKey);

  final String? title;
  ListWithInputBoxGetxController controller =
      Get.put(ListWithInputBoxGetxController());
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title!)),
      body: Padding(
          padding: const EdgeInsets.all(10),
          child: SingleChildScrollView(
              child: Column(
            children: <Widget>[
              Container(
                  height: 400,
                  color: Colors.limeAccent,
                  child: ListView.builder(
                      itemCount: controller.textFieldControllerList.length,
                      prototypeItem: const TextField(),
                      itemBuilder: ((context, index) {
                        return Obx(() => TextField(
                              controller: controller.getTextFieldController(
                                  index), 
                            ));
                      }))),
              const SizedBox(height: 10),
              ElevatedButton(
                  onPressed: controller.addTextField, child: const Text("+")),
              const SizedBox(height: 10),
              ElevatedButton(
                  onPressed: controller.submit,
                  child: const Icon(Icons.sailing))
            ],
          ))),
    );
  }
}

This is the controller file:

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

class ListWithInputBoxGetxController extends GetxController {
  RxList<TextEditingController> textFieldControllerList =
      <TextEditingController>[].obs;

  TextEditingController getTextFieldController(argIndex) {
    return textFieldControllerList[argIndex];
  }

  void addTextField() {
    textFieldControllerList.add(TextEditingController());
  }

  void submit() {}
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Well, the solution is to wrap Obx around the ListView.builder, not around the TextField inside the ListView.

    Container(
                  height: 400,
                  color: Colors.limeAccent,
                  child: Obx(() => ListView.builder(
                      itemCount: controller.textFieldControllerList.length,
                      prototypeItem: const TextField(),
                      itemBuilder: ((context, index) {
                        return TextField(
                          controller: controller.getTextFieldController(index),
                        );
                      })))),

  2. 0

    You can use this code, this code is the edited version of your code

    class ListWithInputBoxGetx extends StatelessWidget {
ListWithInputBoxGetx({Key? argKey, this.title}) : super(key: argKey);

final String? title;
ListWithInputBoxGetxController controller =
  Get.put(ListWithInputBoxGetxController());
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(title: Text(title!)),
  body: Padding(
      padding: const EdgeInsets.all(10),
      child: SingleChildScrollView(
          child: Column(
        children: <Widget>[
          Container(
              height: 400,
              color: Colors.limeAccent,
              child: Obx(
                () => ListView.builder(
                    itemCount: controller.textfieldList.length,
                    prototypeItem: const TextField(),
                    itemBuilder: ((context, index) {
                      return controller.textfieldList[index];
                    })),
              )),
          const SizedBox(height: 10),
          ElevatedButton(
              onPressed: () {
                controller.addTextField(TextEditingController());
              },
              child: const Text("+")),
          const SizedBox(height: 10),
          ElevatedButton(
              onPressed: controller.submit,
              child: const Icon(Icons.sailing))
        ],
      ))),
);
}
}
 class ListWithInputBoxGetxController extends GetxController {
 List textfieldList = [].obs;
 void addTextField(TextEditingController controller) {
 textfieldList.add(TextField(
  controller: controller,
 ));
 }

void submit() {}
}

    it looks like this

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search