responsive_staggered_grid

Description:

responsive staggered grid

Help you view fields with responsive.
Features #
Help you view fields with responsive.
Getting started #
Help you view fields with responsive.
Usage #
Form(
key: controller.formKey,
child: SingleChildScrollView(
child: ResponsiveStaggeredGrid.count(
crossAxisCount: 120, // default is 120 columns
contantPadding: const EdgeInsets.all(10),
mainAxisSpacing: 10,
crossAxisSpacing: 10,
children: [
ResponsiveStaggeredGridTile.fit(
crossAxisCellCount: const ResponsiveInt(s: 120 /*default is 120*/, m: 60, l: 40),
child: TextFormField(
controller: controller.nameAr,
decoration: InputDecoration(
labelText: AppStrings.name.tr,
prefixIcon: const Icon(Icons.person),
),
validator: (value) {
value ??= "";

if (value.length < 4) return "Enter more than 3 letters";
return null;
},
),
),

ResponsiveStaggeredGridTile.fit(
crossAxisCellCount:
const ResponsiveInt(s: 120, m: 60, l: 40),
child: DropdownButtonFormField<int>(
value: controller.typeId.value,
items: [
for (final type in AccountTypeTable.find().rows)
DropdownMenuItem<int>(
value: type.id,
child: Text(type.name),
)
],
onChanged: (value) {
controller.typeId.value = value;
},
decoration: InputDecoration(
labelText: AppStrings.type.tr,
prefixIcon: const Icon(Icons.person),
),
validator: (value) {
if (value == null) return "Select an account type";
return null;
},
),
),
ResponsiveStaggeredGridTile.fit(
crossAxisCellCount: const ResponsiveInt(s: 120, m: 60, l: 40),
child: MoneyFormField(
controller: controller.price,
mode: TextFormMode.windowForm,
decoration: InputDecoration(
labelText: AppStrings.price.tr,
prefixIcon: SvgIcon.container(AppAssets.svgs.coins),
),
),
),
ResponsiveStaggeredGridTile.fit(
crossAxisCellCount: const ResponsiveInt(s: 120, m: 60, l: 40),
child: TextFormField(
controller: controller.description,
decoration: InputDecoration(
labelText: AppStrings.description.tr,
prefixIcon: const Icon(Icons.description),
),
),
),
],
),
),
)
copied to clipboard
Additional information #
Help you view fields with responsive.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter