Saltar al contenido

Flutter: Cambiar la pestaña actual en la vista de la barra de pestañas usando un botón

Solución:

Necesitas conseguir el TabBar controlador y llamar a su animateTo() método desde el botón onPressed() resolver.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyTabbedPage(),
    );
  }
}

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: myTabs.map((Tab tab) {
          return new Center(child: new Text(tab.text));
        }).toList(),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: () => _tabController.animateTo((_tabController.index + 1) % 2), // Switch tabs
        child: new Icon(Icons.swap_horiz),
      ),
    );
  }
}

Si usa un GlobalKey Para el MyTabbedPageState puede obtener el controlador desde cualquier lugar, por lo que puede llamar al animateTo() desde cualquier botón.

class MyApp extends StatelessWidget {
  static final _myTabbedPageKey = new GlobalKey<_MyTabbedPageState>();

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyTabbedPage(
        key: _myTabbedPageKey,
      ),
    );
  }
}

Podrías llamarlo desde cualquier lugar haciendo:

MyApp._myTabbedPageKey.currentState._tabController.animateTo(...);

Llego muy tarde, pero espero que alguien se beneficie de esto. simplemente agregue esta línea a su onPressed de su botón y asegúrese de cambiar el número de índice a su índice preferido:

DefaultTabController.of(context).animateTo(1);

La respuesta de chemamolin anterior es correcta, pero para una aclaración / sugerencia adicional, si desea llamar a su tabcontroller “desde cualquier lugar”, también asegúrese de que el tabcontroller no sea una propiedad privada de la clase eliminando el guión bajo, de lo contrario, la clase distante no será capaz de ver el tabcontroller con el ejemplo proporcionado incluso cuando se usa GlobalKey.

En otras palabras, cambia

TabController _tabController;

para:

TabController tabController;

y cambio

MyApp._myTabbedPageKey.currentState._tabController.animateTo(...);

para:

MyApp._myTabbedPageKey.currentState.tabController.animateTo(...);

y en cualquier otro lugar se hace referencia a tabcontroller.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *