在 flutter 中使用用户输入（行和列）创建 Gridview

Question

How can we create Gridview with the user input? the user is allowed to enter the no of rows and columns.

Answer 1

class Class extends StatefulWidget {
  @override
  _ClassState createState() => _ClassState();
}

class _ClassState extends State<Class> {

  TextEditingController row = TextEditingController();
  TextEditingController column = TextEditingController();

  int rowC = 2;
  int colC = 2;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: 500,
            child: GridView.builder(
              itemCount: colC * rowC,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: rowC,childAspectRatio: colC*rowC/2 ,crossAxisSpacing: 10,mainAxisSpacing: 10),
              shrinkWrap: true,
              itemBuilder: (context, index) => Container(
                color: Colors.greenAccent,
              ),
            ),
          ),
          Text("Row"),
          TextField(
            controller: row,
          ),
          SizedBox(height: 20,),
          Text("Column"),
          TextField(
            controller: column,
          ),
          SizedBox(height: 20,),
          FlatButton(onPressed: (){
            rowC = int.parse(row.text);
            colC = int.parse(column.text);
            setState(() {

            });
          }, child: Container(
            color: Colors.purple,
              padding: EdgeInsets.all(20),
              child: Text("Add")))
        ],
      ),
    );
  }
}

Answer 2

You can achieve your requirement by using the GridView.builder.

GridView.builder(
          shrinkWrap: true,
          itemCount: (rowCount * ColumnCount),
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: ColumnCount),
          itemBuilder: (context, index) {
            return Container(
              child: Text(index.toString()),
            );
          },  );

1. Every user input you must to refresh the widget.