简体   繁体   中英

Change tab with a button in flutter

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM