Hello I am trying to make an app with tabs and so far I have 2 tabs. I need to create a button that goes to a specific tab but I ran in some issues. To make this I used this question: Flutter: Changing the current tab in tab bar view using a button
Here is my code (shorter)
First there is my main.dart were I organise the tabs:
import 'package:flutter/material.dart';
import 'package:projetradioactif/accueil.dart';
import 'package:projetradioactif/page1.dart';
void main() {
runApp(MaterialApp(home:MyTabbedPage()));
}
class MyTabbedPage extends StatefulWidget {
//const Screen({Key key}) : super(key: key);
@override
_MyTabbedPageState createState() => _MyTabbedPageState();
}
class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
TabController tabController;
@override
void initState() {
super.initState();
tabController = new TabController(vsync: this, length: 4);
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length:2,
child : Scaffold(
appBar: AppBar(
title:Text(
"Accueil",
style: TextStyle(fontSize: 22),
),
centerTitle: true,
backgroundColor: Color.fromRGBO(248, 160, 8, 1),
//you click to have tabs
bottom:TabBar(
controller: tabController,
tabs: [
Tab(icon: Image(image:AssetImage("assets/centrale.png"))),
Tab(icon: Image(image:AssetImage("assets/bouteille.png"))),
],
),
),
body: TabBarView(
controller: tabController,
children: [
Accueil(),
Page2(),
]
),
),
)
);
}
}
And this is the class Acceuil were I have a button which needs to change tab:
import 'package:flutter/material.dart';
import 'package:projetradioactif/main.dart';
class Acceuil extends StatelessWidget {
static final _myTabbedPageKey = new GlobalKey<_MyTabbedPageState>();
@override
Widget build(BuildContext context) {
return Container(
key: _myTabbedPageKey,
color: Colors.yellow,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
RaisedButton.icon(
elevation: 10,
//padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
color: Colors.yellow,
icon: Icon(Icons.add),
label: Text("Voir l'exposé"),
onPressed: () {
Acceuil._myTabbedPageKey.currentState.tabController.animateTo(1);
},
),
],
),
);
}
}
The line in static final _myTabbedPageKey = new GlobalKey<_MyTabbedPageState>();
the one were there is a problem: 'dynamic' doesn't extend 'State<StatefulWidget>'
Try changing
onPressed: () {
Acceuil._myTabbedPageKey.currentState.tabController.animateTo(1);
},
To This:
onPressed: () {
setState(){
Acceuil._myTabbedPageKey.currentState.tabController.animateTo(1);
}
},
I changed:
body: TabBarView(
controller: tabController,
children: [
Accueil(),
Page2(),
]
To:
body: TabBarView(
controller: tabController,
children: [
Acceuil(tabController),
Page1(tabController),
Page2(tabController),
Page3(tabController),
]
),
And in class Acceuil I changed this:
static final _myTabbedPageKey = new GlobalKey<_MyTabbedPageState>();
To this:
TabController tabController;
Acceuil(TabController ptabController){
this.tabController = ptabController;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.