responsive_staggered_grid 0.1.4

responsive_staggered_grid: ^0.1.4 copied to clipboard

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),
                    ),
                  ),
                ),
              ],
            ),
          ),
        )

Additional information #

Help you view fields with responsive.