Home > Net >  How can I pass data into textformfield in Flutter?
How can I pass data into textformfield in Flutter?

Time:11-16

enter image description here

    class CardWidget extends StatefulWidget {
  final String title;
  final Color? color;
  final IconData? icon;
  final Widget? child;
  const CardWidget({
    super.key,
    required this.title,
    this.color,
    this.icon,
    this.child,
  });

  @override
  State<CardWidget> createState() => _CardWidgetState();
}

final controllers = List.generate(12, (index) => TextEditingController());

class _CardWidgetState extends State<CardWidget> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      width: 200,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Card(
          elevation: 10,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
          color: widget.color,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Icon(
                widget.icon,
                color: Colors.white,
                size: 32,
              ),
              Center(
                child: Text(
                  widget.title,
              
              ),
              GestureDetector(
                  child: Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 30,
                ),
                child: TextFormField(
                 
                  controller: controllers[],

                  onTap: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: ((context) => AddCard())));
                  },
                ),
              ))
            ],
          ),
        ),
      ),
    );
  }
}

CardWidget I use to show on homepage

    class AddCard extends StatelessWidget {
  const AddCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        padding: const EdgeInsets.all(50),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        ),
        itemCount: 12,
         itemBuilder: (context, index) => ItemTile(
          cardNo: index,
          callback: (p0) {
            controllers[index].text = p0.toString();
          })),
      ),
    );
  }
}

The page where I redirect the user when clicking on the TextFormField.

   class ItemTile extends StatelessWidget {
  final int cardNo;

  const ItemTile(
    this.cardNo,
  );

  @override
  Widget build(BuildContext context) {
    return  ListTile(
        onTap: () { 
        },
        title: Center(
          child: Text(
            'Tuş ${cardNo   1}',
            key: Key('text_$cardNo'),
          ),
        ),
      ),
    );
  }

I have cards 1 to 12 and each card has numbers 1 to 12 inside. I want to pass these texts to TextFormField when the user clicks on the card.

There are 12 Card designs on my homepage. There is a textFormField inside each of these cards. When the TextFormField is clicked, it goes to a list that I created with GridView in AddCard. There are 12 elements in this list. There are numbers from 1 to 12 inside these 12 elements. When I click on one of them, I want the number there to be assigned to the one I clicked, in the 12 textFormField on the homepage.

CodePudding user response:

set the TextEditingController to the global scope, and don't make it private with _

final myController = TextEditingController();

then use it in your TextFormField:

TextFormField(
          controller: myController,
          onTap: () {
            Navigator.push(context,
                MaterialPageRoute(builder: ((context) => AddCard())));
          },
        ),

now in the onTap of ListTile, assign a value to the TextFormField:

onTap: () { 
 myController.text = "your text value";     
 },

CodePudding user response:

On ListTile ontap use navigator pop and pass data on second position.

  onTap: () {
          Navigator.pop(context, "cardNo");
        },

And on main file

child: TextFormField(
   controller: controllers[1], /// your TextFiled index
    onTap: () async{
    final data  = await Navigator.push(context,
      MaterialPageRoute(builder: ((context) => AddCard())));
  controllers[1].text  = "$data";
 },
    ),

You can use a callback method, I passing data for future case, or could just use VoidCallback

class ItemTile extends StatelessWidget {
  final int cardNo;
  final Function(int) callback;

  const ItemTile({
    Key? key,
    required this.cardNo,
    required this.callback,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Color color = Colors.primaries[cardNo % Colors.primaries.length];
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
      child: ListTile(
        tileColor: color.withOpacity(0.3),
        onTap: () {
          callback(cardNo);
        },
        title: Center(
          child: Text(
            'Tuş ${cardNo   1}',
            key: Key('text_$cardNo'),
          ),
        ),
      ),
    );
  }
}

And you can get the value like

itemBuilder: (context, index) => ItemTile(
    cardNo: index,
    callback: (p0) {
      _controller.text = p0.toString();
    }),
  • Related