-
In the below code, i need to align the
grid viewitem based on the count, let’s say the first row is filled with 3 items and 2nd row is filled with 2 items means my 2nd row items to be aligned centre to the first row and vice versa -
All this says for the dynamic row count that fitting based on the device width.
-
Here with i attached the sample expected output
class SocialLoginWidget extends StatelessWidget {
const SocialLoginWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return GridView.builder(
padding: const EdgeInsets.only(left: 28, right: 18, top: 22),
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 100.0,
crossAxisSpacing: 12.0,
mainAxisSpacing: 12.0,
childAspectRatio: 1.0,
),
itemBuilder: (BuildContext context, int index) {
if (index == 4) { // Assuming itemCount is 5 and index is zero-based
return Align(
alignment: Alignment.center,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.black,
width: 1.0,
),
),
),
);
} else {
return Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.black,
width: 1.0,
),
),
);
}
},
itemCount: 5,
);
}
}
>Solution :
I would use the Wrap widget instead and set crossAxisAlignment to center.
I don’t believe this is possible using GridView.