How to implement Horizontal Icon list menu using flutter

Question

Basically I want to implement something like below ,

• There is a menu button in the right up corner of the mobile. If user clicks that, horizontal bar (like a google search bar in the android mobile) opens in the left which contains the list of scrollable icons horizontally.

Is there any existing widget already present in Flutter ? Kindly let me know how to develop this feature

Answer 1

Here is an example of what I think you want to achieve:

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

You can use listview to display icons horizontally

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