Create Gridview with user input(Row and Column) in flutter

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.