Horizontal sliding menu item in navigation draw in flutter?

Question

I am new to flutter. Is it possible to create horizontal sliding menu item in navigation drawer in flutter ? If possible, how to archive this widget ? I am providing the UI below

Answer 1

Use this code and create a Separate MenuItemWidget

drawer: Drawer(
      child: new Container(
          color: UIHelper.getColorFromHex("#F6F7F9"),
          child: new Column(
            children: <Widget>[
              new Container(
                height: 30,
              ),
              new Container(
              height: 120,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: ExactAssetImage('images/nav_bg.png'),
                        fit: BoxFit.fill),
                    shape: BoxShape.rectangle),
                child: Column(children: [
                  ListTile(
                    leading: Icon(
                      Icons.person,
                      color: Colors.white,
                    ),
                    title: Text(
                      '${Const.user}',
                      style: TextStyle(color: Colors.white),
                    ),
                    //subtitle: Text("Branch name",style: TextStyle(color: Colors.cyan),),
                    trailing: IconButton(
                      icon:
                      Icon(Icons.power_settings_new, color: Colors.cyan),
                      onPressed: () {
                        logout();
                      },
                    ),
                  ),

                  SizedBox(
                    height: 50,
                    child: ListView(
                      scrollDirection: Axis.horizontal,

                      children: [
                        ...(menuItem as List<String>).map((e) => MenuItemWidget(e.toString())).toList(),


                      ],
                    ),
                  )
                ],)

              ),
              
              
            ],
          ))),

Here is MenuItemWidget

class MenuItemWidget extends StatelessWidget {
 String _label;

MenuItemWidget(this._label);

@override
 Widget build(BuildContext context) {
   return Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.white),
    borderRadius: BorderRadius.circular(20.0),
    color: UIHelper.getColorFromHex("#303876"),

  ),
  child: Text(this._label, style: TextStyle(
      color: Colors.white, fontSize: 14, fontWeight: FontWeight.bold),),
  padding: EdgeInsets.only(left: 16, right: 16, top: 0, bottom: 0),
  alignment: Alignment.center,
  margin: EdgeInsets.only(top: 8, bottom: 8,left: 4,right: 4),
);
 }
}

Answer 2

List View has scrollDirection. So scrollDirection: Axis.horizontal will make it horizontal.

ListView(
  // This next line does the trick.
  scrollDirection: Axis.horizontal,
  children: <Widget>[
    Container(
      width: 160.0,
      color: Colors.red,
    ),
    Container(
      width: 160.0,
      color: Colors.blue,
    ),
    Container(
      width: 160.0,
      color: Colors.green,
    ),
    Container(
      width: 160.0,
      color: Colors.yellow,
    ),
    Container(
      width: 160.0,
      color: Colors.orange,
    ),
  ],
)

You can Do it will Row() with SliverList

Row(
          children: <Widget>[
            Flexible(
              child: CustomScrollView(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                slivers: <Widget>[
                  SliverPadding(
                    padding: const EdgeInsets.all(20.0),
                    sliver: SliverList(
                      delegate: SliverChildListDelegate(
                        <Widget>[
                          const Text('this horizontal'),
                          const Text('is horizontal'),
                          const Text('scroll horizontal'),
                          const Text('view horizontal'),
                          const Text('inside horizontal'),
                          const Text('list horizontal'),
                          const Text('view horizontal'),
                          const Text('in horizontal'),
                          const Text('horizontal horizontal'),
                          const Text('direction horizontal')
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        )

Same logic with scrollDirection: Axis.horizontal

Answer 3

You could use the scrollDirection field of the SingleChildScrollViewer or ListView (Axis.horizontal).

Answer 4

It can be using ListView inside Drawer, in this case you need to provide height for ListView

class AppDrawer extends StatelessWidget {
  const AppDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: [
          DrawerHeader(
              child: Column(
            children: [
              Text("Logo"),
              SizedBox(
                height: 50, // the amount you want
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: 12,
                  itemBuilder: (context, index) => Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.green),
                      borderRadius: BorderRadius.circular(12),
                    ),
                    margin: EdgeInsets.only(right: 10),
                    padding: EdgeInsets.all(12),
                    child: Text("item $index"),
                  ),
                ),
              )
            ],
          ))
        ],
      ),
    );
  }
}

And use

  return Scaffold(
        drawer: AppDrawer(),