CODEWITHSUNDEEP
flutterdartgridviewwidget
Prasath S
Prasath S

Reputation: 4376

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

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

Upvotes: 1

Views: 1806

Answers (2)

Balasubramani Sundaram
Balasubramani Sundaram

Reputation: 1290

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.

Upvotes: 2

Priyesh
Priyesh

Reputation: 1313

enter image description here

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")))
        ],
      ),
    );
  }
}

Upvotes: 4

Related Questions