snap_wish/lib/main.dart

import 'package:flutter/material.dart';
import 'pages/photo_page.dart';
import 'pages/categories_page.dart';
import 'pages/add_photo_page.dart';

/// 应用入口函数
/// Flutter应用从main()函数开始执行，runApp()启动整个应用
void main() {
  runApp(const SnapWishApp());
}

/// 根应用组件
/// 负责全局配置：主题、路由、国际化等
class SnapWishApp extends StatelessWidget {
  const SnapWishApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnapWish',
      // 全局主题配置 - 使用深色模式
      theme: ThemeData(
        brightness: Brightness.dark,
        scaffoldBackgroundColor: const Color(0xFF0F1113),
        primaryColor: const Color(0xFFFF8A1F),
        useMaterial3: true,
        colorScheme: ColorScheme.dark(
          primary: const Color(0xFFFF8A1F),
          secondary: const Color(0xFFFFBE3D),
          surface: const Color(0xFF1A1D1F),
          background: const Color(0xFF0F1113),
          onBackground: const Color(0xFFEDEDED),
          onSurface: const Color(0xFFEDEDED),
          onSurfaceVariant: const Color(0xFF9CA3AF),
        ),
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.transparent,
          elevation: 0,
          centerTitle: false,
          titleTextStyle: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: Color(0xFFFF9A2A),
          ),
          iconTheme: IconThemeData(
            color: Color(0xFFEDEDED),
          ),
        ),
        floatingActionButtonTheme: const FloatingActionButtonThemeData(
          backgroundColor: Colors.transparent,
          elevation: 8,
          sizeConstraints: BoxConstraints.tightFor(width: 64, height: 64),
        ),
        bottomNavigationBarTheme: const BottomNavigationBarThemeData(
          backgroundColor: Color(0xFF1A1D1F),
          selectedItemColor: Color(0xFFFFFFFF),
          unselectedItemColor: Color(0xFF9CA3AF),
          type: BottomNavigationBarType.fixed,
          elevation: 0,
        ),
      ),
      home: const MainPage(),
      // 路由配置 - 命名路由便于管理
      routes: {
        '/add-photo': (context) => const AddPhotoPage(),
      },
    );
  }
}

/// 主页控制器
/// 管理底部导航和页面切换的核心组件
class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  // 当前选中的页面索引
  int _currentIndex = 0;

  // 页面列表 - 使用const构造函数提升性能
  final List<Widget> _pages = const [
    PhotoPage(),
    CategoriesPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 允许body延伸到bottomNavigationBar下方，实现沉浸式效果
      extendBody: true,
      
      // 当前显示的页面
      body: _pages[_currentIndex],
      
      // 悬浮按钮 - 使用自定义容器实现渐变效果
      floatingActionButton: _buildGradientFAB(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      
      // 底部导航栏 - 自定义样式
      bottomNavigationBar: _buildCustomBottomNav(),
    );
  }

  /// 构建渐变悬浮按钮
  /// 技巧：使用Container+BoxDecoration实现复杂渐变和阴影效果
  Widget _buildGradientFAB() {
    return Container(
      width: 64,
      height: 64,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(32),
        // 线性渐变背景
        gradient: const LinearGradient(
          colors: [Color(0xFFFF8A1F), Color(0xFFFFBE3D)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        // 阴影效果增强立体感
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.35),
            blurRadius: 24,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          borderRadius: BorderRadius.circular(32),
          onTap: () {
            // 使用命名路由跳转，便于维护
            Navigator.pushNamed(context, '/add-photo');
          },
          // 水波纹效果增强交互体验
          child: const Icon(
            Icons.add,
            color: Colors.white,
            size: 24,
          ),
        ),
      ),
    );
  }

  /// 构建自定义底部导航栏
  /// 技巧：使用Container+BoxDecoration实现圆角和阴影
  Widget _buildCustomBottomNav() {
    return Container(
      height: 72,
      margin: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: const Color(0xFF1A1D1F),
        borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.35),
            blurRadius: 24,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
        child: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            // 使用setState触发页面重建
            setState(() {
              _currentIndex = index;
            });
          },
          backgroundColor: const Color(0xFF1A1D1F),
          selectedItemColor: Colors.white,
          unselectedItemColor: const Color(0xFF9CA3AF),
          type: BottomNavigationBarType.fixed,
          elevation: 0,
          showSelectedLabels: false,
          showUnselectedLabels: false,
          items: [
            BottomNavigationBarItem(
              icon: _buildHomeIcon(),
              label: '照片',
            ),
            BottomNavigationBarItem(
              icon: const Icon(Icons.grid_view_rounded, size: 26),
              label: '分类',
            ),
          ],
        ),
      ),
    );
  }

  /// 构建带通知图标的首页按钮
  /// 技巧：使用Stack叠加小圆点通知
  Widget _buildHomeIcon() {
    return Stack(
      children: [
        const Icon(Icons.home_rounded, size: 26),
        Positioned(
          top: 0,
          right: 0,
          child: Container(
            width: 8,
            height: 8,
            decoration: const BoxDecoration(
              color: Color(0xFFFF4D4F),
              shape: BoxShape.circle,
            ),
          ),
        ),
      ],
    );
  }
}