CODEWITHSUNDEEP
fluttercontrollertextformfield
Bright
Bright

Reputation: 1067

Adding list of items using TextFormField in Flutter

I am trying to implement the feature to add a list of emails input but the user. This is what i have so far

  List<String> _notificationEmails =[];
  var _notificationEmailsController = TextEditingController();
  Widget _buildNotificationEmailsInput() {
    return TextFormField(
      controller: _notificationEmailsController,
      style: inputTextStyle,
      maxLines: null,
      validator: (String value) {
        print(value);
        if (value.isEmpty) {
          return 'Emails Required';
        }
        return null;
      },
      onChanged: (String value){
        if(value.substring(value.length-1)==','){
          print('here');
            setState(() {
              _notificationEmails.add(value.substring(0,value.length-1));
            });
          _notificationEmailsController.clear();
        }
        print(_notificationEmails);
      },
    );
  }

My intended outcome is that when the user enters an email then adds a comma after it, the email is appended o the list and the input field cleared but i get a loop of the action resulting to this _notificationEmails.add(value.substring(0,value.length-1)); running to infinity.

Here are the logs

[   +3 ms] flutter: [[email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], je@gm<…>

This goes on and on. What have I done wrong?

Update

Incase it helps, i have realised the issue is brought about because every time the _notificationEmailsController.clear(); is called, it triggers onChange() thus the loop.

Upvotes: 2

Views: 5453

Answers (2)

Tanvir Ahmed
Tanvir Ahmed

Reputation: 681

**You have to add a list of *TextEditingController* and need to add the contoller text to that list and parse it as you need.**     
     
      List<String> selection = [];  
     List<Product> productList = []; 

     //---------Adding contoller to list   
      
     productProvider.getAll(user.guid).forEach((element) {//---List<Product>
     final TextEditingController quantityController = 
     TextEditingController(text: element.quantity);
     quantityControllers.add(quantityController);
     });

       //-------Adding list of products to list
      List<Map<String, dynamic>> productItems = [];
       List<Product> productOriginalList = 
       productProvider.getAll(user.guid);
       for (int i = 0; i < productOriginalList.length; i++) {
       final Product product = productOriginalList[i];
       if (selection.contains(product.equipmentId)) {
                   
       productItems.add(product.toJson(quantityControllers[i].text));
                  }

     /* Map<String, dynamic> toJson(String quan) => {
    'ProductId': id,
    'Quantity': quan,
     };     
    TextField(
    controller: quantityControllers[index],*/

Upvotes: 1

rickimaru
rickimaru

Reputation: 2490

Update: Please call TextEditingController.clear inside a Future.delayed. Because based from the description of clear...

this method should only be called between frames, e.g. in response to user actions, not during the build, layout, or paint phases.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyApp createState() => _MyApp();
}

class _MyApp extends State<MyApp> {
  final List<String> _notificationEmails = <String>[];
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            _buildNotificationEmailsInput(),
            Expanded(
              child: ListView.builder(
                itemCount: _notificationEmails.length,
                itemBuilder: (_, int idx) => ListTile(
                  title: Text(_notificationEmails[idx]),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildNotificationEmailsInput() {
    return TextFormField(
      controller: _controller,
      validator: (String value) {
        print('VALIDATOR: $value');
        if (value.isEmpty) {
          return 'Emails Required';
        }
        return null;
      },
      onChanged: (String value) {
        if (value.substring(value.length - 1) == ',') {
          print('>>>>>> value = $value : controller = ${_controller.hashCode}');
          setState(() {
            _notificationEmails.add(value.substring(0, value.length - 1));
          });
          Future<void>.delayed(
            const Duration(milliseconds: 10),
            _controller.clear,
          );
          print(_notificationEmails);
        }
      },
    );
  }
}

Upvotes: 2

Related Questions