Flutter, how to add tab button on side?

Question

I want to implement like this

I don`t mind if it is just button or tab button

please click the image

Answer 1

Method 1: There is a flutter package to handle this. It's called vertical_tabs and can be found at this location:vertical_tabs 0.2.0

Make sure to add

vertical_tabs: ^0.2.0

to your pubspec.yaml file.

There is a full example on the example page

Method 2: If the above is too confining for your design needs, you can always build your own using a TabBar that is embedded in a Row() and RotatedBox() (this might give you the flexibility to do the rotate buttons that you seem to have in your example):

Widget build(BuildContext context) {
return Scaffold(
  body: Row(
    children: <Widget>[
      RotatedBox(
        quarterTurns: 1,
        child: TabBar(
          controller: _tabController,
          tabs: <Widget>[
            getItem(
              icon: Icon(
                Icons.person,
                color: Colors.black,
              ),
              text: Text(
                "Tab #1",
                style: TextStyle(color: Colors.black),
              ),
            ),
            getItem(
              icon: Icon(
                Icons.done,
                color: Colors.black,
              ),
              text: Text(
                "Tab #2",
                style: TextStyle(color: Colors.black),
              ),
            ),
            getItem(
              icon: Icon(
                Icons.dashboard,
                color: Colors.black,
              ),
              text: Text(
                "Tab #3",
                style: TextStyle(color: Colors.black),
              ),
            ),
          ],
        ),
      ),
      Expanded(
        child: NewScreen(
          title: title,
        ),
      )
    ],
  ),
);

}