Фильтры флаттера

Question

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

В настоящее время я сделал это, как показано ниже, мне интересно, есть ли более чистый или лучший способ с помощью кнопок et c ..

class GetFilters extends StatelessWidget {
  GetFilters();

  @override
  Widget build(BuildContext context) {
    return ListView(
      // This next line does the trick.
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(Icons.call),
              Text('Afterpay'),
            ],
          )
          ]
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Icon(Icons.call),
                Text('Afterpay'),
              ],
            )
          ]
        )
    ]
    );
  }
}

Answer 1

Для горизонтальной прокрутки вам нужны два разных ListView для каждого раздела

class GetFilters extends StatelessWidget {
  GetFilters();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Payment options'),
        ListView(
          scrollDirection: Axis.horizontal,
          children: [
            Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(Icons.call),
              Text('Afterpay'),
            ],
          ),
           //More items
          ] 
        ),
       Text('Categories'),
       ListView(
          scrollDirection: Axis.horizontal,
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Icon(Icons.call),
                Text('Afterpay'),
              ],
            ),
            //More items
          ]
        )
    ]
    );
  }
}

Для кнопок я бы обернул каждый элемент с помощью GestureDetector, например:

GestureDetector(
        onTap: () => {},
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(12),
              decoration: new BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
              ),
              child: Icon(Icons.call),
            ),
            Text('Afterpay'),
          ],
        ),
      ),

Вместо этого вы можете использовать InkWell GestureDetector на тот случай, если вы хотите получить визуальную обратную связь с материалом при нажатии на элемент

Также я рекомендую вам использовать предметы вместо действий в имени класса виджета. GetFilters можно назвать Filters, FiltersSection