如何在Flutter中创建带下拉选择框的表单模态框

3

我是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


1个回答

1
也许我认为在对话框中使用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的新手,不知道在哪里放置StatefulBuilder。 - jonah rimsy
嘿@jonahrimsy,请检查一下我所做的更改,也许这会对你有用。如果有效,请告诉我。 - Sagar Acharya
请点个赞,这样问题就解决了,也会对其他人有所帮助。 - Sagar Acharya

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接