CODEWITHSUNDEEP
flutterdartdart-pub
janithcooray
janithcooray

Reputation: 308

Flutter Vertical Tabs only scrolls in horizontal direction

i used vertical_tabs: ^0.2.0 package on flutter 2.0.2 and running on an android virtual device. but the vertical tabs only scrolls horizontally. i copied the exact code from the demo Flutter Vertical_tabs. can't find whats wrong.

    import 'package:flutter/material.dart';
    import 'package:vertical_tabs/vertical_tabs.dart';

    void main() {
      runApp(Home());
    }

    class Home extends StatefulWidget {
      @override
      _HomeState createState() => _HomeState();
    }

    class _HomeState extends State<Home> {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: VerticalTabs(
            tabs: <Tab>[
              Tab(child: Text('Flutter'), icon: Icon(Icons.phone)),
              Tab(child: Text('Dart')),
              Tab(child: Text('NodeJS')),
              Tab(child: Text('PHP')),
              Tab(child: Text('HTML 5')),
            ],
            contents: <Widget>[
              Container(child: Text('Flutter'), padding: EdgeInsets.all(20)),
              Container(child: Text('Dart'), padding: EdgeInsets.all(20)),
              Container(child: Text('NodeJS'), padding: EdgeInsets.all(20)),
              Container(child: Text('PHP'), padding: EdgeInsets.all(20)),
              Container(child: Text('HTML 5'), padding: EdgeInsets.all(20))
            ],
          ),
        );
      }
    }

Upvotes: 2

Views: 1886

Answers (2)

Ruchit
Ruchit

Reputation: 2700

here,

import 'package:flutter/material.dart';
import 'package:vertical_tabs/vertical_tabs.dart';

void main() {
  runApp(Home());
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VerticalTabs(
        contentScrollAxis: Axis.vertical,
        tabs: <Tab>[
          Tab(child: Text('Flutter'), icon: Icon(Icons.phone)),
          Tab(child: Text('Dart')),
          Tab(child: Text('NodeJS')),
          Tab(child: Text('PHP')),
          Tab(child: Text('HTML 5')),
        ],
        contents: <Widget>[
          Container(child: Text('Flutter'), padding: EdgeInsets.all(20)),
          Container(child: Text('Dart'), padding: EdgeInsets.all(20)),
          Container(child: Text('NodeJS'), padding: EdgeInsets.all(20)),
          Container(child: Text('PHP'), padding: EdgeInsets.all(20)),
          Container(child: Text('HTML 5'), padding: EdgeInsets.all(20))
        ],
      ),
    );
  }
}

Upvotes: 0

Isti01
Isti01

Reputation: 873

The VerticalTab widget has two possible content scroll directions: vertical and horizontal. Even though the widget is called VerticalTab, the scroll axis defaults to horizontal. The fix is easy, set the contentScrollAxis to Axis.vertical, like this:

@override
Widget build(BuildContext context) {
  return VerticalTabs(
    contentScrollAxis: Axis.vertical,
    tabs: <Tab>[
      // Your tabs
    ],
    contents: <Widget>[
      // Your content
    ],
  );
}

Upvotes: 3

Related Questions