Flutter TabBar 頁籤導航元件

 

TabBar

import 'package:flutter/material.dart';
import 'package:untitled/Page2.dart';  //TabBar 引入頁面
import 'package:untitled/Page3.dart';  //TabBar 引入頁面
import 'package:untitled/Constants.dart'; //常數

class page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Scaffold(
        body: _page1(),
      ),
    );
  }
}

class _page1 extends StatelessWidget {
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'Tab1'),
    Tab(text: 'Tab2'),
  ];

  final pages = [page2(), page3()];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: myTabs.length,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: appDarkGreyColor,
            title: Text("title"),
            bottom: TabBar(
              tabs: myTabs,
            ),
          ),
          body: TabBarView(
            children: <Widget>[page2(), page3()],
          ),
        ),
      ),
    );
  }
}