I'm trying to make a payment screen with numeric keypad for a tablet screen. I'm using StaggeredGridView (https://pub.dev/packages/flutter_staggered_grid_view). What I want to achieve is screen like this preview of POST payment screen
So I code it like this
Container(
height: 450,
padding: EdgeInsets.all(10),
child: StaggeredGridView.count(
crossAxisCount: 4,
crossAxisSpacing: 1,
mainAxisSpacing: 1,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
staggeredTiles: [
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, 1),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, 1),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
],
children: [
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('1');
},
child: Text('1'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('2');
},
child: Text('2'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('3');
},
child: Text('3'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: _bayar > 0
? () {
_hapusAngka();
}
: null,
child: Icon(Icons.backspace_outlined),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('4');
},
child: Text('4'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('5');
},
child: Text('5'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('6');
},
child: Text('6'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('7');
},
child: Text('7'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('8');
},
child: Text('8'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('9');
},
child: Text('9'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: RaisedButton(
color: t5ColorPrimary,
onPressed: _bayar > 0 && _bayar >= _total
? () {
_bayarTransaksi();
}
: null,
child: Text(
'OK',
style: TextStyle(color: t5White),
),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: _bayar > 0
? () {
_clearAngka();
}
: null,
child: Text('C'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('0');
},
child: Text('0'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('000');
},
child: Text('000'),
),
),
],
))
But the result I got is like this attempt to make payment screen. The bottom button cropped, and it's not what I wanted. I'm still don't understand clearly how to use StaggeredGrid. What is the right way to make the keypad?
Finally I found solution After seeing the example project of StaggeredGridView, I made the tile to extent, so the code is like this
Container(
height: 420,
padding: EdgeInsets.all(10),
child: StaggeredGridView.count(
crossAxisCount: 4,
crossAxisSpacing: 1,
mainAxisSpacing: 1,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
staggeredTiles: [
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 201),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 201),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
],
children: [
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('1');
},
child: Text('1'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('2');
},
child: Text('2'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('3');
},
child: Text('3'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: _bayar > 0
? () {
_hapusAngka();
}
: null,
child: Icon(Icons.backspace_outlined),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('4');
},
child: Text('4'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('5');
},
child: Text('5'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('6');
},
child: Text('6'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('7');
},
child: Text('7'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('8');
},
child: Text('8'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('9');
},
child: Text('9'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: RaisedButton(
color: t5ColorPrimary,
onPressed: _bayar > 0 && _bayar >= _total
? () {
_bayarTransaksi();
}
: null,
child: Text(
'OK',
style: TextStyle(color: t5White),
),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: _bayar > 0
? () {
_clearAngka();
}
: null,
child: Text('C'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('0');
},
child: Text('0'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('000');
},
child: Text('000'),
),
),
],
))
And that will give this result layouting staggeredgrid using extent tile
