Flutter - Create dynamic number of texteditingcontrollers

前端 未结 3 1265
我在风中等你
我在风中等你 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:21

    More or less as @Günter Zöchbauer mentioned, you can just build a list of widgets which are nested then in a container.

    Here's a simple example:

    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
        var textEditingControllers = [];
    
        var textFields = [];
        stringListReturnedFromApiCall.forEach((str) {
          var textEditingController = new TextEditingController(text: str);
          textEditingControllers.add(textEditingController);
          return textFields.add(new TextField(controller: textEditingController));
        });
    
        return Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: SingleChildScrollView(
                child: new Column(
              children: textFields,
            )));
      }
    }
    

    Edit: Added list for TextEditingControllers to interact with all the TextFields

提交回复
热议问题