Flutter 플러터: 버튼을 사용하여 탭 바 뷰의 현재 탭 변경하기, Flutter: Changing the current tab in tab bar view using a button

질문

저는 홈페이지에 탭 바가 포함된 앱을 만들고 있습니다. FloatingActionButton을 사용하여 탭 중 하나로 이동할 수 있기를 원합니다. 또한, 화면을 스와이프하거나 탭을 클릭하여 해당 탭으로 이동하는 기본 메소드를 유지하고 싶습니다.

또한, 그 탭을 다른 버튼에 링크하는 방법도 알고 싶습니다.

다음은 홈페이지의 스크린샷입니다.

답변

아래의 HTML을 한국어로 번역하되, HTML 태그와 태그 안의 텍스트는 영어로 유지하세요.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter 데모',
      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: '왼쪽'),
    new Tab(text: '오른쪽'),
  ];

  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("탭 데모"),
        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), // 탭 전환
        child: new Icon(Icons.swap_horiz),
      ),
    );
  }
}

MyTabbedPageState에 GlobalKey를 사용하면 어떤 위치에서든 컨트롤러를 가져올 수 있으므로 animateTo()를 어떤 버튼에서든 호출할 수 있습니다.

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

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

어디서든 다음과 같이 호출할 수 있습니다:

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