Flutter web vertical tab navigation

Viewed 1767

How to create vertical tab navigation for dashboard in flutter web and whats it the best way?

enter image description here

2 Answers

You can you a NavigationRail to get this look. It was added to flutter this year. It works almost like the bottom tab bar.

I believe you want something similiar to what is shown in the screenshot right?

If so, I would recommend you to use the Scaffold Widget and making use of the attributes appBar and drawer.

For further information about the Scaffold Widget please check this link.

Here a simple example: In your main Widget modify the build function like this.

     @override
  Widget build(BuildContext context) {
    GlobalKey<ScaffoldState> key = GlobalKey();
    return Scaffold(
        key: key,
        drawer: Padding(
          padding: const EdgeInsets.fromLTRB(0, 70, 0, 0),
          child: Container(
              color: Colors.red,
              width: 300,
              child: Column(children: [Text("1"), Text("2"), Text("3")])),
        ),
        appBar: AppBar(
          toolbarHeight: 70,
          elevation: 5,
          centerTitle: true,
          backgroundColor: Colors.black,
          leading: RawMaterialButton(
            child: Icon(Icons.menu),
            onPressed: () => key.currentState.openDrawer(),
          ),
          title: Container(child: Text("Title Widget")),
        ),
        body: Container(
          child: Text("Main Widget"),
        ));
  }

The result would look like this: Ui when drawer is open Ui when drawer is closed

Related