Can We control flutter tabs position with drawer button

Question

I want to create a UI where a person can switch the tabs with either click on them or by pressing the button on the drawer. Kind of like 2 controls for doing one thing.

Is this possible or I am asking the wrong question?

Answer 1

It is not a very wrong question. Yes, it is possible. You can define the same method for two controls.

EDIT

Here is a full example of code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

  @override
  void initState() {
    super.initState();

    _tabController = new TabController(vsync: this, length: myTabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            onTap: (index) {
              print("index");
              print(index);
            },
            controller: _tabController,
            tabs: myTabs,
          ),
          title: Text('Tabs Demo'),
        ),
        body: TabBarView(
          controller: _tabController,
          children: myTabs.map((Tab tab) {
            return Center(child: Text(tab.text));
          }).toList(),
        ),
        drawer: Drawer(
          // Add a ListView to the drawer. This ensures the user can scroll
          // through the options in the drawer if there isn't enough vertical
          // space to fit everything.
          child: ListView(
            // Important: Remove any padding from the ListView.
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                title: Text('LEFT'),
                onTap: () {
                  // Update the state of the app
                  // ...
                  // Then close the drawer
                  setState(() {
                    _tabController.index = 0;
                  });
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('RIGHT'),
                onTap: () {
                  // Update the state of the app
                  // ...
                  // Then close the drawer
                  setState(() {
                    _tabController.index = 1;
                  });
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}