如何在颤动中单击按钮添加字段

Question

当我点击添加按钮时如何添加文本字段。这是在应用程序栏中。当我单击添加按钮时，它将添加我已经在我尝试过的示例代码中创建的 FOur 字段。所以请任何人都可以帮忙。你的帮助可以让我开心:)。

在这段代码中有四个这样的字段。 _buildidentificationtype1,_builddocumentnumber1,_buildexpirydate1,_buildissuingauthority1 当我点击添加按钮时，我想生成这四个字段。

import 'dart:io';

import 'package:datetime_picker_formfield/datetime_picker_formfield.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:image_picker/image_picker.dart';
import 'package:intl/intl.dart';
import 'package:tudo/src/modules/bsp_signup/bsp_licensed_signup_terms/bsp_licensed_signup_terms_page.dart';
import 'package:tudo/src/modules/bsp_signup/bsp_signup_common_model.dart';
import 'package:tudo/src/styles/colors.dart';

import 'package:tudo/src/utils/navigation_helper.dart';
import 'package:tudo/src/utils/validator.dart';
import 'package:tudo/src/widgets/tudo_selection_widget/TudoConditionWidget.dart';
import 'package:tudo/src/widgets/tudo_text_widget/TudoTextWidget.dart';

class BspUnlicensedSignupPage extends StatefulWidget {
  static const String routeName = "/bspUnlicensedSignup";
  final BspSignupCommonModel bspSignupCommonModel;

  BspUnlicensedSignupPage({
    Key key,
    @required this.bspSignupCommonModel,
  }) : super(key: key);

  @override
  _BspUnlicensedSignupPageState createState() =>
      _BspUnlicensedSignupPageState();
}

class _BspUnlicensedSignupPageState extends State<BspUnlicensedSignupPage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  List<Object> images = List<Object>();
  Future<File> _imageFile;
  @override
  void initState() {
    super.initState();
    debugPrint(
        'BSP SIGNUP DATA: ${widget.bspSignupCommonModel.businessPhoneNo}');
    debugPrint('BSP SIGNUP DATA: ${widget.bspSignupCommonModel.businessYear}');
    debugPrint(
        'BSP SIGNUP DATA: ${widget.bspSignupCommonModel.numberofEmployees}');
    debugPrint('BSP SIGNUP DATA: ${widget.bspSignupCommonModel.businessType}');
    debugPrint(
        'BSP SIGNUP DATA: ${widget.bspSignupCommonModel.businessLegalName}');
    setState(() {
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
    });
  }

  bool informationislegitimate = false;
  DateTime expirydate1 = DateTime.now();
  DateTime expirydate2 = DateTime.now();

  final format = DateFormat("yyyy-MM-dd");
  final format2 = DateFormat("yyyy-MM-dd");
  final TextEditingController clrbusinesslicense = TextEditingController();
  final TextEditingController clrbusinesslicense2 = TextEditingController();
  final TextEditingController clrissuingauthority = TextEditingController();
  final TextEditingController clrissuingauthority2 = TextEditingController();
  String _licenseno;
  String _licenseno2;
  String illusingauthority;
  String illusingauthority2;
  List<String> _type2 = <String>[
    'Passport',
    'Driving License',
    'Voter ID card',
    'Ration Card',
    'Aadhar'
        'Other Id'
  ];
  String type2 = 'Passport';
  List<String> _type = <String>[
    'Passport',
    'Driving License',
    'Voter ID card',
    'Ration Card',
    'Aadhar'
        'Other Id'
  ];
  String type = 'Passport';
  Map<String, String> _formdata = {};
  var _myPets = List<Widget>();
  int _index = 1;

  void _add() {
    int keyValue = _index;
    _myPets = List.from(_myPets)
      ..add(Column(
        key: Key("${keyValue}"),
        children: <Widget>[
          ListTile(
            leading: Text('Pet $_index : '),
            title: TextField(
              onChanged: (val) => _formdata['pet${keyValue - 1}'] = val,
            ),
          ),
          ListTile(
            leading: Text('Name of Pet $_index : '),
            title: TextField(
              onChanged: (val) {
                _formdata['name${keyValue - 1}'] = val;
              },
            ),
          ),
        ],
      ));

    setState(() => ++_index);
  }

  Widget _buildidentificationtype1() {
    return FormBuilder(
      autovalidate: true,
      child: FormBuilderCustomField(
          attribute: "Identification type",
          validators: [FormBuilderValidators.required()],
          formField: FormField(
            builder: (FormFieldState<dynamic> field) {
              return InputDecorator(
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.location_on),
                  labelText: 'Select Personal Identification type',
                  errorText: field.errorText,
                ),
                isEmpty: type == '',
                child: new DropdownButtonHideUnderline(
                  child: new DropdownButton(
                    value: type,
                    isDense: true,
                    onChanged: (String newValue) {
                      setState(() {
                        type = newValue;
                        field.didChange(newValue);
                      });
                    },
                    items: _type.map(
                      (String value) {
                        return new DropdownMenuItem(
                          value: value,
                          child: new Text(value),
                        );
                      },
                    ).toList(),
                  ),
                ),
              );
            },
          )),
    );
  }

  Widget _builddocumentnumber1() {
    return new TudoTextWidget(
      controller: clrbusinesslicense,
      prefixIcon: Icon(FontAwesomeIcons.idCard),
      labelText: "Business License No",
      hintText: "Business License No",
      validator: Validators().validateLicenseno,
      onSaved: (val) {
        _licenseno = val;
      },
    );
  }

  Widget _buildexpirydate1() {
    return FormField(builder: (FormFieldState state) {
      return DateTimeField(
        decoration: InputDecoration(
            labelText: expirydate1.toString(),
            prefixIcon: Icon(Icons.date_range)),
        format: format,
        onShowPicker: (context, currentValue) async {
          final DateTime picked = await showDatePicker(
              context: context,
              initialDate: expirydate1,
              firstDate: DateTime(1900),
              lastDate: DateTime.now());
          if (picked != null && picked != expirydate1)
            setState(() {
              expirydate1 = picked;
              print(expirydate1);
            });
        },
      );
    });
  }

  Widget _buildissuingauthority1() {
    return new TudoTextWidget(
      prefixIcon: Icon(FontAwesomeIcons.idCard),
      labelText: "Photo Identification issuing authority ",
      hintText: "Photo Identification issuing authority ",
      validator: (val) => Validators.validateName(val, "Issuing Authority"),
      onSaved: (val) {
        illusingauthority = val;
      },
      controller: clrissuingauthority,
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("BSP Unlicensed Signup"),
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: () {
            NavigationHelper.navigatetoBack(context);
          },
        ),
        actions: <Widget>[IconButton(icon: Icon(Icons.add), onPressed: _add)],
        centerTitle: true,
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Form(
          autovalidate: true,
          key: _formKey,
          child: Stack(
            children: <Widget>[
              // Background(),
              SingleChildScrollView(
                padding: const EdgeInsets.all(30.0),
                child: new Container(
                  child: new Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      _buildidentificationtype1(),
                      _builddocumentnumber1(),
                      _buildexpirydate1(),
                      _buildissuingauthority1(),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Flutter 是一种声明式 UI 框架，而不是命令式框架。您不会急于创建新字段。

Flutter（声明式）执行此操作的方式是在单击按钮时更改小部件的状态并调用 setState，在重建小部件时，它将考虑您对状态的更改并构建新组件。总结一下，你可以这样做：

//initialize with false
isClicked = false;

_add() {
  setState(() {
   isClicked = true;
  })
}

isClicked ? _buildidentificationtype1() : Container(),
isClicked ? _builddocumentnumber1() : Container(),
isClicked ? _buildexpirydate1() : Container(),
isClicked ? _buildissuingauthority1() : Container(),

Answer 2

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
  home: MyHomePage(),
 );
}
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
 }

 class _MyHomePageState extends State<MyHomePage> {
 List<Item> itemList = [
 Item("ID1", "First product"),
  Item("ID2", "Second product"),
 ];

  Map<String, int> quantities = {};

  void takeNumber(String text, String itemId) {
  try {
  int number = int.parse(text);
  quantities[itemId] = number;
  print(quantities);
 } on FormatException {}
  }

 Widget singleItemList(int index) {
Item item = itemList[index];

return Container(
  decoration: BoxDecoration(
    color: Colors.white,
  ),
  child: Row(
    children: [
      Expanded(flex: 1, child: Text("${index + 1}")),
      Expanded(
        flex: 3,
        child: TextField(
          keyboardType: TextInputType.number,
          onChanged: (text) {
            takeNumber(text, item.id);
          },
          decoration: InputDecoration(
            labelText: "Qty",
          ),
        ),
      ),
    ],
  ),
);
 }

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Demo")),
    body: Center(
      child: ListView.builder(
         shrinkWrap: true,
          itemCount: itemList.length,
          itemBuilder: (context, index) {
           if (itemList.isEmpty) {
            return CircularProgressIndicator();
            } else {
             return singleItemList(index);
           }
         }),
        ),
      );
    }
   }

  class Item {
  final String id;
  final String name;

  Item(this.id, this.name);
   }