flutter_clock_example/lib/home.dart

import 'package:flutter/material.dart';

import 'about_page.dart';
import 'timers_page.dart';
import 'settings_page.dart';

import 'constants.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {

  var selectedIndex = 0;
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  void _handleTabSelection(int index) {
    setState(() {
      selectedIndex = _tabController.index = index;
    });
  }

  static const List<Widget> pages = [
    TimersPage(),
    AboutPage(),
    SettingsPage(),
  ];

  Widget getPage(int selectedIndex) {
    Widget page;
    
    switch (selectedIndex) {
      case 0:
        page = const TimersPage();
        break;
      case 1:
        page = const AboutPage();
        break;
      case 2:
        page = const SettingsPage();
        break;
      default:
        throw UnimplementedError('no widget for $selectedIndex');
    }  
    return page;
  }

  static List<NavigationRailDestination> navRailDestinations = [
    const NavigationRailDestination(
      icon: Icon(Icons.timer_outlined),
      selectedIcon: Icon(Icons.timer),
      label: Text('Timers'),
    ),
    const NavigationRailDestination(
      icon: Icon(Icons.access_time),
      selectedIcon: Icon(Icons.access_time_filled),
      label: Text('Alarms'),
    ),
    const NavigationRailDestination(
      icon: Icon(Icons.settings_outlined),
      selectedIcon: Icon(Icons.settings),
      label: Text('Settings'),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        centerTitle: true,
        toolbarHeight: 0,
        bottom: (MediaQuery.of(context).size.width > 600)
            ? null
            : TabBar(
                indicatorSize: TabBarIndicatorSize.tab,
                isScrollable: false, // If true, the tabbar cannot be center aligned
                controller: _tabController,
                onTap: _handleTabSelection,
                tabs: const <Widget>[
                  Tab(text: 'Timers'),
                  Tab(text: 'Alarms'),
                  Tab(text: 'Settings'),
                ],
              ),
      ),
      body: (MediaQuery.of(context).size.width > 600)
        ? LayoutBuilder(
          builder: (context, constraints) {
            return Scaffold(
              body: Row(
                children: [
                  SafeArea(
                    child: NavigationRail(
                      extended: constraints.maxWidth >= 900,
                      selectedIndex: _tabController.index,
                      onDestinationSelected: (value) {
                        setState(() {
                          selectedIndex = value;
                          _tabController.index = value;
                        });
                      },
                      destinations: navRailDestinations,
                    ),
                  ),
                  Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: myBorderRadius, // 设置圆角程度
                        color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3), // 设置 Container 的背景颜色
                      ),
                      child: getPage(_tabController.index),
                    )
                  )
                ]
              ),
            );
          }
        )
        : Container(
          decoration: BoxDecoration(
            borderRadius: myBorderRadius,
            color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
          ),
          child: TabBarView(
            controller: _tabController,
            children: pages,
          ),
        ),
    );
  }
}