Flutter - Create dynamic number of texteditingcontrollers

前端 未结 3 1263
我在风中等你
我在风中等你 2020-12-16 23:55

I am recreating an app I have previously made in Swift, and on one of my pages we call an API and based on the results, we present the user a dynamic number of textfields to

3条回答
  •  暖寄归人
    2020-12-17 00:14

    I just modified @Felix's answer with using Map to store TextEditingControllers instead of list. I think its easy to call textEditingControllers with key value pairs. Modified code block;

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: "MyHomePage",
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(
            title: "MyHomePage",
          ),
        );
      }
    }
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State {
    
      @override
      Widget build(BuildContext context) {
        var stringListReturnedFromApiCall = ["first", "second", "third", "fourth", "..."];
        // This list of controllers can be used to set and get the text from/to the TextFields
        Map textEditingControllers = {};
        var textFields = [];
        stringListReturnedFromApiCall.forEach((str) {
          var textEditingController = new TextEditingController(text: str);
          textEditingControllers.putIfAbsent(str, ()=>textEditingController);
          return textFields.add( TextField(controller: textEditingController));
        });
    
        return Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: SingleChildScrollView(
                child: new Column(
                  children:[
                  Column(children:  textFields),
                    RaisedButton(
                      child: Text("Print Values"),
                        onPressed: (){
                        stringListReturnedFromApiCall.forEach((str){
                          print(textEditingControllers[str].text);
                        });
                      })
                  ]
                )));
      }
    }
    

    when you write something to textfields and hit to print button results ;

    flutter: first controller text
    flutter: second controller text
    flutter: third controller text
    flutter: fourth controller text
    flutter: so on .......
    

提交回复
热议问题