flutter - 如何在 flutter 中使用下拉选择创建表单模式-6ren

flutter - 如何在 flutter 中使用下拉选择创建表单模式

转载作者：行者123 更新时间：2023-12-03 03:04:01

我是 Flutter 的新手，这是我的第一个应用程序。我一直在尝试创建一个带有下拉选择的表单模式将从服务器接收其数据。但现在我正在使用我创建的数组中的值，但在我选择一个项目后它没有设置值。我试图添加一个 setState() 但显示错误。有人可以帮助我吗？

下面是我的代码

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:erg_app/ProfilePage.dart';

void main() => runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: StockPage(),
    )
);

class StockPage extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Inventory Data',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: StockInventory(),
    );
  }
}

class StockInventory extends StatefulWidget {

  StockInventory({Key key}) : super(key: key); //Find out meaning

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


class _StockInventoryState extends State<StockInventory> {


   List<Products> products;
  List<Products> selectedProducts;
  bool sort;

  @override
  void initState() {
    sort = false;
    selectedProducts = [];
    products = Products.getProducts();
    super.initState();
  }

  onSortColum(int columnIndex, bool ascending) {
    if (columnIndex == 0) {
      if (ascending) {
        products.sort((a, b) => a.name.compareTo(b.name));
      } else {
        products.sort((a, b) => b.name.compareTo(a.name));
      }
    }
  }

   @override
  Widget build(BuildContext context){
        return Scaffold(
          appBar: AppBar(
          title: new Center(child: new Text('Daily Stock Taking', textAlign: TextAlign.center)),
          automaticallyImplyLeading: false,
          iconTheme: IconThemeData(color: Colors.white),
          backgroundColor: Colors.green,),

          body: Container(
            child: ListView(
              children: <Widget>[
                Container(
                  margin: const EdgeInsets.only(right: 20, top: 20),
                  child: Align(
                     alignment: Alignment.bottomRight,
                     child: RaisedButton(
                        padding: EdgeInsets.fromLTRB(14, 10, 14, 10),
                        color: Colors.green,
                        child: Text("Take Inventory", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14), ),
                        onPressed: () {
                          // Navigator.of(context).push(MaterialPageRoute(builder: (context) => ProfilePage()));
                          showSimpleCustomDialog(context);
                        },
                        shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50),

                      ),
                      ),
                    ),
                  ),

                Container(
                    padding: EdgeInsets.only(top: 30, bottom: 30),
                    child: DataTable(
                    sortAscending: sort,
                    sortColumnIndex: 0,
                    columns: [
                      DataColumn(
                        label: Text("S/No", style: TextStyle(fontSize: 16)),
                        numeric: false,
                      ),
                      DataColumn(
                          label: Text("Item", style: TextStyle(fontSize: 16)),
                          numeric: false,
                          onSort: (columnIndex, ascending) {
                            setState(() {
                              sort = !sort;
                            });
                            onSortColum(columnIndex, ascending);
                          }),
                      DataColumn(
                        label: Text("QtyInStock", style: TextStyle(fontSize: 16)),
                        numeric: false,
                      ),
                      DataColumn(
                        label: Text("Unit", style: TextStyle(fontSize: 16)),
                        numeric: false,
                      ),
                    ],
                    rows: products
                        .map(
                          (product) => DataRow(
                              selected: selectedProducts.contains(product),
                              cells: [
                                DataCell(
                                  Text(product.count),
                                  onTap: () {
                                    print('Selected ${product.count}');
                                  },
                                ),
                                DataCell(
                                  Text(product.name),
                                  onTap: () {
                                    print('Selected ${product.name}');
                                  },
                                ),
                                DataCell(
                                  Text(product.itemqty),
                                  onTap: () {
                                    print('Selected ${product.itemqty}');
                                  },
                                ),
                                DataCell(
                                  Text(product.itemqty),
                                  onTap: () {
                                    print('Selected ${product.itemqty}');
                                  },
                                ),
                              ]),
                        ).toList(),
                    ),          
                ),
                Container(
                    child: Center(
                      child: RaisedButton(
                        padding: EdgeInsets.fromLTRB(80, 10, 80, 10),
                        color: Colors.green,
                        child: Text("Post Inventory", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14), ),
                        onPressed: () {
                          Navigator.of(context).push(MaterialPageRoute(builder: (context) => ProfilePage()));
                        },
                        shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50),
                      ),
                      ),
                    ),
                  ),
              ],
            ),
          ),
        );
  }
}



class Products {
  String count;
  String name;
  String measuringunit;
  String itemqty;
  Products({this.count, this.name, this.itemqty, this.measuringunit});

  static List<Products> getProducts() {
    return <Products>[
      Products(count:"1", name: "NPK Fertilizer", itemqty: "50", measuringunit: "bag",),
      Products(count:"2", name: "Urea Fertilizer", itemqty: "560", measuringunit: "bag",),
      Products(count:"3", name: "Spray", itemqty: "150", measuringunit: "bottles",),
    ];
  }


}


void showSimpleCustomDialog(BuildContext context) {
  String dropdownValue = 'SelectItem';

  // TextEditingController _controller = TextEditingController(text: dropdownValue);

    Dialog simpleDialog = Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12.0),
      ),
      child: Container(
        height: 300.0,
        width: 300.0,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
           Padding( 
                padding: EdgeInsets.only(top:20, bottom: 20, left: 30, right: 10),
                child: Row(
                children: <Widget>[
                  Expanded(child: 
                    Text(
                      'Item',
                      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, ),
                      ),
                  ),
                  Container(width: 2,),
                  Container(

                    child:DropdownButton<String>(
                      value: dropdownValue,

                       onChanged: (String newValue) {
                        // This set state is trowing an error
                        setState((){
                          dropdownValue = newValue;
                        });
                      },

                      items: <String>['Fertilizers', 'Bags', 'Spray', 'Equipments']
                      .map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: new Text(value),
                        );
                      })
                      .toList(),        
                    ),

                  ),
                ],
              )),  

            Padding( 
                padding: EdgeInsets.only(top:5, bottom: 5, left: 30, right: 10),
                child: Row(
                children: <Widget>[
                  Expanded(child: 
                    Text(
                      'Quantity',
                      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, ),
                      ),
                  ),
                  Container(width: 2,),
                  Expanded(child: TextField(
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                        labelText: 'Quantity',
                        hintText: 'Enter Cost Quantity',
                        border:OutlineInputBorder(borderRadius: BorderRadius.circular(5.0))
                    ),
                  )),  
                ],
              )),  

            Padding(
              padding: const EdgeInsets.only(left: 10, right: 10, top: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  RaisedButton(
                    color: Colors.blue,
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text(
                      'Add',
                      style: TextStyle(fontSize: 18.0, color: Colors.white),
                    ),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  RaisedButton(
                    color: Colors.red,
                    onPressed: () {
                      Navigator.pop(context);
                      // Navigator.of(context).push(MaterialPageRoute(builder: (context) => StockPage()));
                    },
                    child: Text(
                      'Cancel!',
                      style: TextStyle(fontSize: 18.0, color: Colors.white),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
    showDialog(context: context, builder: (BuildContext context) => simpleDialog);  


}


// Dropdown Menu Class below

最佳答案

也许我认为在对话中使用 Statefulbuilder。因此，您可以在那里更改状态，只需检查示例即可。

根据需要更改:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: StockPage(),
    ));

class StockPage extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Inventory Data',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: StockInventory(),
    );
  }
}

class StockInventory extends StatefulWidget {
  StockInventory({Key key}) : super(key: key); //Find out meaning

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

class _StockInventoryState extends State<StockInventory> {
  List<Products> products;
  List<Products> selectedProducts;
  bool sort;

  @override
  void initState() {
    super.initState();
    sort = false;
    selectedProducts = [];
    products = Products.getProducts();
  }

  onSortColum(int columnIndex, bool ascending) {
    if (columnIndex == 0) {
      if (ascending) {
        products.sort((a, b) => a.name.compareTo(b.name));
      } else {
        products.sort((a, b) => b.name.compareTo(a.name));
      }
    }
  }

  void showSimpleCustomDialog(BuildContext context) {
    String dropdownValue ;

    // TextEditingController _controller = TextEditingController(text: dropdownValue);

      AlertDialog simpleDialog1 = AlertDialog(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0))),
        content: StatefulBuilder(
          builder :(BuildContext context, StateSetter setState) {
              return Container(
        height: 300.0,
        width: 300.0,

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
                padding:
                    EdgeInsets.only(top: 20, bottom: 20, left: 30, right: 10),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: Text(
                        'Item',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    Container(
                      width: 2,
                    ),
                    Container(
                      child: DropdownButton<String>(
                        hint: Text('Enter value'),
                        value: dropdownValue,
                        onChanged: (String newValue) {
                          // This set state is trowing an error
                          setState(() {
                            dropdownValue = newValue;
                          });
                        },
                        items: <String>[
                          'Fertilizers',
                          'Bags',
                          'Spray',
                          'Equipments'
                        ].map<DropdownMenuItem<String>>((String value) {
                          return DropdownMenuItem<String>(
                            value: value,
                            child: new Text(value),
                          );
                        }).toList(),
                      ),
                    ),
                  ],
                )),
            Padding(
                padding:
                    EdgeInsets.only(top: 5, bottom: 5, left: 30, right: 10),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: Text(
                        'Quantity',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    Container(
                      width: 2,
                    ),
                    Expanded(
                        child: TextField(
                      keyboardType: TextInputType.number,
                      decoration: InputDecoration(
                          labelText: 'Quantity',
                          hintText: 'Enter Cost Quantity',
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(5.0))),
                    )),
                  ],
                )),
            Padding(
              padding: const EdgeInsets.only(left: 10, right: 10, top: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  RaisedButton(
                    color: Colors.blue,
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text(
                      'Add',
                      style: TextStyle(fontSize: 18.0, color: Colors.white),
                    ),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  RaisedButton(
                    color: Colors.red,
                    onPressed: () {
                      Navigator.pop(context);
                      // Navigator.of(context).push(MaterialPageRoute(builder: (context) => StockPage()));
                    },
                    child: Text(
                      'Cancel!',
                      style: TextStyle(fontSize: 18.0, color: Colors.white),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      );
          }
        ),
      );

    /* Dialog simpleDialog = Dialog(

      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12.0),
      ),
      child:
    ); */
    showDialog(
        context: context, builder: (BuildContext context) => simpleDialog1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Center(
            child: new Text('Daily Stock Taking', textAlign: TextAlign.center)),
        automaticallyImplyLeading: false,
        iconTheme: IconThemeData(color: Colors.white),
        backgroundColor: Colors.green,
      ),
      body: Container(
        child: ListView(
          children: <Widget>[
            Container(
              margin: const EdgeInsets.only(right: 20, top: 20),
              child: Align(
                alignment: Alignment.bottomRight,
                child: RaisedButton(
                  padding: EdgeInsets.fromLTRB(14, 10, 14, 10),
                  color: Colors.green,
                  child: Text(
                    "Take Inventory",
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 14),
                  ),
                  onPressed: () {
                    // Navigator.of(context).push(MaterialPageRoute(builder: (context) => ProfilePage()));
                    showSimpleCustomDialog(context);
                  },
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(50),
                  ),
                ),
              ),
            ),
            Container(
              padding: EdgeInsets.only(top: 30, bottom: 30),
              child: DataTable(
                sortAscending: sort,
                sortColumnIndex: 0,
                columns: [
                  DataColumn(
                    label: Text("S/No", style: TextStyle(fontSize: 16)),
                    numeric: false,
                  ),
                  DataColumn(
                      label: Text("Item", style: TextStyle(fontSize: 16)),
                      numeric: false,
                      onSort: (columnIndex, ascending) {
                        setState(() {
                          sort = !sort;
                        });
                        onSortColum(columnIndex, ascending);
                      }),
                  DataColumn(
                    label: Text("QtyInStock", style: TextStyle(fontSize: 16)),
                    numeric: false,
                  ),
                  DataColumn(
                    label: Text("Unit", style: TextStyle(fontSize: 16)),
                    numeric: false,
                  ),
                ],
                rows: products
                    .map(
                      (product) => DataRow(
                          selected: selectedProducts.contains(product),
                          cells: [
                            DataCell(
                              Text(product.count),
                              onTap: () {
                                print('Selected ${product.count}');
                              },
                            ),
                            DataCell(
                              Text(product.name),
                              onTap: () {
                                print('Selected ${product.name}');
                              },
                            ),
                            DataCell(
                              Text(product.itemqty),
                              onTap: () {
                                print('Selected ${product.itemqty}');
                              },
                            ),
                            DataCell(
                              Text(product.itemqty),
                              onTap: () {
                                print('Selected ${product.itemqty}');
                              },
                            ),
                          ]),
                    )
                    .toList(),
              ),
            ),
            Container(
              child: Center(
                child: RaisedButton(
                  padding: EdgeInsets.fromLTRB(80, 10, 80, 10),
                  color: Colors.green,
                  child: Text(
                    "Post Inventory",
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 14),
                  ),
                  onPressed: () {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => ProfilePage()));
                  },
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(50),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Products {
  String count;
  String name;
  String measuringunit;
  String itemqty;
  Products({this.count, this.name, this.itemqty, this.measuringunit});

  static List<Products> getProducts() {
    return <Products>[
      Products(
        count: "1",
        name: "NPK Fertilizer",
        itemqty: "50",
        measuringunit: "bag",
      ),
      Products(
        count: "2",
        name: "Urea Fertilizer",
        itemqty: "560",
        measuringunit: "bag",
      ),
      Products(
        count: "3",
        name: "Spray",
        itemqty: "150",
        measuringunit: "bottles",
      ),
    ];
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

只需检查代码。让我知道它是否有效

关于flutter - 如何在 flutter 中使用下拉选择创建表单模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62325618/

文章推荐： dart - 如何读取分块流的一部分

文章推荐： http - 如何为 Rocket.rs 设置 CORS 或 OPTIONS

webpack - Webpack:未知参数:模式/配置具有未知属性“模式”
对此感到疯狂，真的缺少一些东西。我有webpack 4.6.0，webpack-cli ^ 2.1.2，所以是最新的。在文档（https://webpack.js.org/concepts/mod
linux - 在文件中的匹配字符串(模式 1)上方打印特定单词直到匹配字符串(模式 2)
object Host "os.google.com" { import "windows" address = "linux.google.com" groups = ["linux"] } obj
android - OpenGLRenderer 刷新缓存(模式 0)和(模式 1)
每当我安装我的应用程序时，我都可以将数据库从 Assets 文件夹复制到 /data/data/packagename/databases/ .到此为止，应用程序工作得很好。但 10 或 15 秒后
xml - emacs:HideShow 是否适用于 xml 模式(sgml 模式)？
我在 cc 模式缓冲区中使用 hideshow.el 来折叠我不查看的文件部分。如果能够在 XML 文档中做到这一点就好了。我使用 emacs 22.2.1 和内置的 sgml-mode 进行 xm
xml - 从 XML 模式 (XSD) 生成 Json 模式
已结束。此问题不符合 Stack Overflow guidelines .它目前不接受答案。我们不允许提出有关书籍、工具、软件库等方面的建议的问题。您可以编辑问题，以便用事实和引用来回答它。关闭
java - 为什么使用 useDelimiter(Pattern 模式) 与 useDelimiter(String 模式)
根据java: public Scanner useDelimiter(String pattern) Sets this scanner's delimiting pattern to a patt
php - 为什么 Post/Redirect/Get 模式(PRG 模式)有效？
我读过一些关于 PRG 模式以及它如何防止用户重新提交表单的文章。比如this post有一张不错的图: 我能理解为什么在收到 2xx 后用户刷新页面时不会发生表单提交。但我仍然想知道: (1) 如果
android - 如何在 React Native 中使用 "Spinner"模式 "DatePickerAndroid"而没有任何对话框/模式/弹出窗口？
看看下面的图片，您可能会清楚地看到这一点。那么如何在带有其他一些 View 的简单屏幕中实现没有任何弹出/对话框/模式的微调器日期选择器？我在整个网络上进行了谷歌搜索，但没有找到与之相关的任何合适
Python 模式
我不知道该怎么做，我一直遇到问题。以下是代码: rows = int(input()) for i in range(1,rows): for j in range(1,i+1):
正则表达式重写 AND 模式
我想为重写创建一个正则表达式。将所有请求重写为 index.php(不需要匹配)，它不是以/api 开头，或者不是以('.html'，或'.js'或'.css'或'.png'结束) 我的例子还是这样
30、MVC 模式
MVC模式代表 Model-View-Controller（模型-视图-控制器）模式 MVC模式用于应用程序的分层开发 Model（模型） - 模型代表一个存取数据的对象或 JAVA PO
组织模式的 RDF 模式
我想为组织模式创建一个 RDF 模式世界。您可能知道，组织模式文档基于层次结构大纲，其中标题是主要的分组实体。 * March auxiliary :PROPERTIES: :HLEVEL: 1 :E
值为对象数组的对象的 JSON 模式
我正在编写一个可以从文件中读取 JSON 数据的软件。该文件包含“person”——一个值为对象数组的对象。我打算使用 JSON 模式验证库来验证内容，而不是自己编写代码。符合代表以下数据的 JSON
用于多个多对多关系的 SQL 模式
假设我有 4 张 table 人公司团体和账单现在bills/persons和bills/companys和bills/groups之间是多对多的关系。我看到了 4 种可能的 sql 模式
用于处理多个连接的多值字段的 SOLR 模式
假设您有这样的文档: doc1: id:1 text: ... references: Journal1, 2013, pag 123 references: Journal2, 2014,
JSON 模式 - 多种类型
我有这个架构。它检查评论，目前工作正常。 var schema = { id: '', type: 'object', additionalProperties: false, pro
与参数匹配的 F# 模式
这可能很简单，但有人可以解释为什么以下模式匹配不明智吗？它说其他规则，例如1, 0, _ 永远不会匹配。 let matchTest(n : int) = let ran = new Rand
XML 模式 - 命名空间选择歧义
我有以下选择序列作为 XML 模式的一部分。理想情况下，我想要一个序列: 来自 my:namespace 的元素必须严格解析。来自任何其他命名空间的元素，不包括 ##targetNamespace和
相似对象映射的 json 模式
我希望编写一个 json 模式来涵盖这个(简化的)示例 { "errorMessage": "", "nbRunningQueries": 0, "isError": Fals
永远不会匹配与元组规则匹配的 F# 模式
首先，我是 f# 的新手，所以也许答案很明显，但我没有看到。所以我有一些带有 id 和值的元组。我知道我正在寻找的 id，我想从我传入的三个元组中选择正确的元组。我打算用两个 match 语句来做到这

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

flutter - 如何在 flutter 中使用下拉选择创建表单模式