How can we create Gridview with the user input? the user is allowed to enter the no of rows and columns.
-
api.flutter.dev/flutter/widgets/GridView/GridView.builder.html you can use the grid view builder with delegate to achieve your requirement.Balasubramani Sundaram– Balasubramani Sundaram2021-02-17 09:29:49 +00:00Commented Feb 17, 2021 at 9:29
Add a comment
|
2 Answers
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")))
],
),
);
}
}
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()),
);
}, );
- Every user input you must to refresh the widget.
