Как реализовать горизонтальное меню списка значков с помощью флаттера

Question

В основном я хочу реализовать что-то вроде ниже,

• В правом верхнем углу мобильного телефона есть кнопка меню. Если пользователь нажимает на это, в левой части открывается горизонтальная полоса (например, панель поиска Google на Android-мобильном телефоне) , которая содержит список прокручиваемых иконок по горизонтали.

Есть ли какие-либо существующиевиджет уже присутствует во флаттере? Пожалуйста, дайте мне знать, как разработать эту функцию

Answer 1

Вот пример того, чего я хочу достичь:

bool showHorizontalBar = false;

Widget buildBarItem(IconData icon) {
  return Container(
    width: 100.0,
    margin: EdgeInsets.all(4.0),
    color: Colors.white,
    child: Icon(icon),
  );
}

Widget buildBar() {
  return SizedBox(
    height: 50.0,
    child: ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        buildBarItem(Icons.directions_car),
        buildBarItem(Icons.directions_bike),
        buildBarItem(Icons.directions_bus),
        buildBarItem(Icons.directions_run),
        buildBarItem(Icons.directions_railway),
      ],
    ),
  );
}

Widget buildMenuIcon() {
  return IconButton(
    icon: Icon(showHorizontalBar ? Icons.close : Icons.menu),
    onPressed: () {
      setState(() {
        showHorizontalBar = !showHorizontalBar;
      });
    },
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Stack(
        children: <Widget>[
          showHorizontalBar ? buildBar() : SizedBox.shrink(),
          Align(
            alignment: Alignment.topRight,
            child: buildMenuIcon(),
          )
        ],
      ),
    ),
  );
}

Answer 2

Вы можете использовать listview для горизонтального отображения значков

ListView(scrollDirection:Axis.horizontal,
children:[.. Icon(Icons.home).... ])