CODEWITHSUNDEEP
fluttertabsflutter-appbar
Wei Xiong
Wei Xiong

Reputation: 209

flutter TabBarView doesn't change by TabController by tapping on tabs/tabs doesn't change when swiping but tabbarview does

i have been trying lots of solutions on changing appbar title with tabs, and i solved it but now there is a small problem; the appbar does change with the tabs when the tabs are pressed, but not the tabbarview. Swiping left or right on the tab bar view changes the tabbarview but not the tabs(appbar title does not change too).

my code below:

final List<Tabs> _tabs = [new Tabs(title: "Registered UAS", icon: new IconData(58826, fontFamily: 'MaterialIcons')),
new Tabs(title: "Registration", icon: IconData(57680, fontFamily: 'MaterialIcons'))
];

Tabs _myHandler ;

void initState() {
super.initState();
_controller = new TabController(length: 2, vsync: this);
_myHandler = _tabs[0];
_controller.addListener(_handleSelected);
}
void _handleSelected() {
setState(() {
  _myHandler= _tabs[_controller.index];
});
}

@override
Widget build(BuildContext context) {
return WillPopScope(
    child: DefaultTabController(
      length: 2,
      child: new Scaffold(
          appBar: AppBar(
            title: Text(_myHandler.title),
            bottom: new TabBar(
              controller: _controller,
              tabs: <Widget>[
                new Tab(icon: new Icon(_tabs[0].icon)),
                new Tab(icon: new Icon(_tabs[1].icon))
              ],
            ),
          ),
          body: new TabBarView(children: [...])

I followed this for changing appbar title on tab change and now im stuck with a similar situation like this, except i dont think the solution for it works for me(i have tried it)

Upvotes: 5

Views: 4275

Answers (2)

Andrey Molochko
Andrey Molochko

Reputation: 768

If you want to use own controller, then you shouldn't use DefaultTabControllerwidget. In example, which you use DefaultTabController is absent.

If you want to use own controller you should use this example. https://api.flutter.dev/flutter/material/TabController-class.html

If you want to use DefaultTabController without own controller, you should this example.

import 'package:flutter/material.dart';

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

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 1

Wei Xiong
Wei Xiong

Reputation: 209

solved it by adding controller: _controller, under TabBarView

Upvotes: 5

Related Questions