vertical_tabs 0.1.0

A vertical tabs package for flutter framework.

Vertical Tabs

A vertical tabs package for flutter framework

Getting Started

...

  VerticalTabs(
    tabsWidth: 150,
    tabs: <Tab>[
      Tab(child: Text('Flutter'), icon: Icon(Icons.phone)),
      Tab(child: Text('Dart')),
      Tab(
        child: Container(
          child: Row(
            children: <Widget>[
              Icon(Icons.favorite),
              SizedBox(width: 25),
              Text('Javascript'),
            ],
          ),
        ),
      ),
      Tab(child: Text('NodeJS')),
      Tab(child: Text('PHP')),
      Tab(child: Text('HTML 5')),
      Tab(child: Text('CSS 3')),
    ],
    contents: <Widget>[
      tabsContent('Flutter', 'Change page by scrolling content is disabled in settings. Changing contents pages is only available via tapping on tabs'),
      tabsContent('Dart'),
      tabsContent('Javascript'),
      tabsContent('NodeJS'),
      Container(
          color: Colors.black12,
          child: ListView.builder(
              itemCount: 10,
              itemExtent: 100,
              itemBuilder: (context, index){
                return Container(
                  margin: EdgeInsets.all(10),
                  color: Colors.white30,
                );
              })
      ),
      tabsContent('HTML 5'),
      Container(
          color: Colors.black12,
          child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemExtent: 100,
              itemBuilder: (context, index){
                return Container(
                  margin: EdgeInsets.all(10),
                  color: Colors.white30,
                );
              })
      ),
    ],
  ),
  
  ...
  
  
  
  // THIS IS JUST FOR DEMO
Widget tabsContent(String caption, [ String description = '' ] ) {
  return Container(
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.all(20),
    color: Colors.black12,
    child: Column(
      children: <Widget>[
        Text(
          caption,
          style: TextStyle(fontSize: 25),
        ),
        Divider(height: 20, color: Colors.black45,),
        Text(
          description,
          style: TextStyle(fontSize: 15, color: Colors.black87),
        ),
      ],
    ),
  );
}
  
  

---

Scroll direction of content

---

RTL