Блог

Вопрос, на который вам нужно ответить, заключается в том, что бы вы хотели, чтобы произошло, если ширина этой карты настолько мала? Вы хотите другое расположение этих элементов? Если вы решите, как это будет выглядеть, и проверьте ограничение LayoutBuilder или всю ширину экрана с MediaQuery тем, что вы считаете лучшим. Вы также можете сделать так, чтобы этот бит прокручивался горизонтально с помощью SingleChildScrollView . Это дизайнерское решение. Вы должны представить себе, как все выглядит при изменении размера экрана, и быть как можно более внимательным к реакции, а не просто пытаться найти какой-нибудь волшебный виджет, в чем мы все иногда виноваты.

Попробуйте приведенный ниже код, надеюсь, он вам поможет, я попробовал похожий на ваш код и добавил ваши виджеты в расширенные или гибкие виджеты.

гибкие виджеты

расширенные виджеты

    GridView.builder(
      padding: const EdgeInsets.all(8),
      itemCount: 4,
      itemBuilder: (ctx, i) {
        return Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                child: Text('data'),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 5.0),
                      margin: EdgeInsets.all(10),
                      height: 35.0,
                      width: 100.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        border: Border.all(
                          color: Colors.grey,
                        ),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          InkWell(
                            child: Icon(Icons.remove, color: Colors.green),
                            onTap: () {},
                          ),
                          Spacer(),
                          Text(
                            '0',
                            style: Theme.of(context)
                                .textTheme
                                .subtitle2!
                                .copyWith(fontSize: 16.0),
                          ),
                          Spacer(),
                          InkWell(
                            child: Icon(
                              Icons.add,
                              color: Colors.green,
                            ),
                            onTap: () {},
                          ),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: ElevatedButton(
                      onPressed: () {},
                      child: Text(
                        'Sub Total',
                        style: TextStyle(
                          fontSize: 15,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        );
      },
       gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 170.0,
                  mainAxisExtent: 93,
                ),
    ),
 

Ваш экран результатов, как->