[又重學flutter]BottomNavigationBar / TabBar

 

BottomNavigationBar / BottomNavigationBarItem

//main.dart
import 'package:flutter/material.dart';
import 'a_page.dart';
import 'b_page.dart';

void main() {
  runApp(MaterialApp(home: HomePage()));
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _page = [APage(), BPage()];
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _page[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'A頁'),
          BottomNavigationBarItem(icon: Icon(Icons.cabin), label: 'B頁'),
        ],
        currentIndex: _currentIndex,
        fixedColor: Colors.blue,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

//a_page.dart
import 'package:flutter/material.dart';

class APage extends StatefulWidget {
  const APage({Key? key}) : super(key: key);

  @override
  _APageState createState() => _APageState();
}

class _APageState extends State<APage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('A頁'),
      ));
  }
}

//b_page.dart
import 'package:flutter/material.dart';

class BPage extends StatefulWidget {
  const BPage({Key? key}) : super(key: key);

  @override
  _BPageState createState() => _BPageState();
}

class _BPageState extends State<BPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('B頁'),
      ));
  }
}

呈現效果：https://github.com/fenturechance/flutterPractice2021/tree/5f97f59f3c40ff89d39b0cc92e61b389c37cf0c0

DefaultTabController / TabBar / TabBarView

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(home: HomePage()));
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Tab> _tabs = [Tab(text: 'A頁'), Tab(text: 'B頁')];
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: _tabs.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text('這是APP'),
            bottom: TabBar(
              tabs: _tabs,
            ),
          ),
          body: TabBarView(
            children: [
              Center(
                child: Text('A頁'),
              ),
              Center(
                child: Text('B頁'),
              ),
            ],
        ),
        )
    );
  }
}