DefaultTabBarController with flutter - flutter

Question

I am using defaulttabbarcontroller
Here is the code
tab.dart
void main() => runApp(TabBar1());
final key = new GlobalKey<TabBar1State>();
class TabBar1 extends StatefulWidget {
TabBar1({Key key}) : super(key: key);
#override
State<StatefulWidget> createState() => TabBar1State();
}
class TabBar1State extends State<TabBar1> with SingleTickerProviderStateMixin {
TabController tabController;
#override
void initState() {
super.initState();
tabController = TabController(vsync: this, length: 2);
}
#override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: PreferredSize(
child: AppBar(
backgroundColor: Colors.greenAccent,
bottom: TabBar(
controller: tabController,
tabs: [
Tab(
child: Text("Login"),
),
Tab(
child: Text("Sign Up"),
),
],
indicatorColor: Colors.black,
),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.red,
Colors.orange,
],
),
),
),
),
preferredSize: Size.fromHeight(200.0),
),
body: TabBarView(
controller: tabController,
children: [
LoginApp(),
SignUpApp(),
],
),
),
),
);
}
}
and here is my snippet where I want to call my SignUp() tab from login page
LoginApp() page code snippet
Padding(
padding: EdgeInsets.only(top: 30, bottom: 30),
child: new RichText(
text: TextSpan(
text: "Don't have an account? ",
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
new TextSpan(
text: 'Sign Up',
style: new TextStyle(
fontWeight: FontWeight.bold),
recognizer: TapGestureRecognizer()
..onTap = () {
key.currentState.tabController.animateTo(
(key.currentState.tabController
.index +
1) %
2);
}),
]),
))
but I am getting following error
The following NoSuchMethodError was thrown while handling a gesture:
I/flutter (17770): The getter 'tabController' was called on null.
I/flutter (17770): Receiver: null
I/flutter (17770): Tried calling: tabController
I/flutter (17770):
How to do the same and what I have done wrong?
Please help

Answer 1

Obviously the tabcontroller isn't getting anything. The following code is probably what you're looking for
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
static final _myTabbedPageKey = new GlobalKey<_MyTabbedPageState>();
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyTabbedPage(
key: MyApp._myTabbedPageKey,
),
);
}
}
class MyTabbedPage extends StatefulWidget {
const MyTabbedPage({Key key}) : super(key: key);
#override
_MyTabbedPageState createState() => new _MyTabbedPageState();
}
class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
final List<Tab> myTabs = <Tab>[
new Tab(text: 'LEFT'),
new Tab(text: 'RIGHT'),
];
TabController _tabController;
#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 new Scaffold(
appBar: new AppBar(
title: new Text("Tab demo"),
bottom: new TabBar(
controller: _tabController,
tabs: myTabs,
),
),
body: new TabBarView(
controller: _tabController,
children: [
LoginApp(),
SignUpApp(),
],
),
);
}
}
class LoginApp extends StatefulWidget {
#override
_LoginAppState createState() => _LoginAppState();
}
class _LoginAppState extends State<LoginApp> {
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(top: 30, bottom: 30),
child: new RichText(
text: TextSpan(
text: "Don't have an account? ",
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
new TextSpan(
text: 'Sign Up',
style: new TextStyle(
fontWeight: FontWeight.bold),
recognizer: TapGestureRecognizer()
..onTap = () =>
MyApp._myTabbedPageKey.currentState._tabController.animateTo((MyApp._myTabbedPageKey.currentState._tabController.index + 1) % 2),
),
]),
));
}
}
class SignUpApp extends StatefulWidget {
#override
_SignUpAppState createState() => _SignUpAppState();
}
class _SignUpAppState extends State<SignUpApp> {
#override
Widget build(BuildContext context) {
return Text('godbye');
}
}

Answer 2

Here is the answer to my own question
Reference link
tab.dart
void main() => runApp(TabBar1());
//I took stateless widget
class TabBar1 extends StatelessWidget {
static final myTabbedPageKey = new GlobalKey<_TabLoginSignUpState>();
#override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
//called my stateful widget
home: TabLoginSignUp(
key: TabBar1.myTabbedPageKey,
));
}
}
class TabLoginSignUp extends StatefulWidget {
TabLoginSignUp({Key key}) : super(key: key);
#override
_TabLoginSignUpState createState() => _TabLoginSignUpState();
}
class _TabLoginSignUpState extends State<TabLoginSignUp>
with SingleTickerProviderStateMixin {
TabController tabController;
#override
void initState() {
super.initState();
tabController = TabController(vsync: this, length: 2);
}
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: PreferredSize(
child: AppBar(
backgroundColor: Colors.greenAccent,
bottom: TabBar(
controller: tabController,
tabs: [
Tab(
child: Text("Login"),
),
Tab(
child: Text("Sign Up"),
),
],
indicatorColor: Colors.black,
),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.red,
Colors.orange,
],
),
),
),
),
preferredSize: Size.fromHeight(200.0),
),
body: TabBarView(
controller: tabController,
children: [
LoginApp(),
SignUpApp(),
],
),
),
);
}
}
updated snippet in LoginApp()
Padding(
padding: EdgeInsets.only(top: 30, bottom: 30),
child: new RichText(
text: TextSpan(
text: "Don't have an account? ",
style: DefaultTextStyle.of(context).style,
children: <TextSpan>[
new TextSpan(
text: 'Sign Up',
style: new TextStyle(
fontWeight: FontWeight.bold),
recognizer: TapGestureRecognizer()
..onTap = () {
//called like this on click TabBar1.myTabbedPageKey.currentState.tabController
.animateTo((TabBar1.myTabbedPageKey.currentState
.tabController.index +
1) %
2);
}),
]),
))