sc_flutter_component_library 0.0.7

A Flutter component library with rich text input widgets supporting multiple input types and automatic format validation.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'platforms/desktop_application_page.dart';
import 'platforms/mobile_application_page.dart';
import 'platforms/web_application_page.dart';
import 'platforms/platform_comparison_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SC Flutter Component Library - Platform Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
        // 优化Web和桌面端的视觉效果
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const PlatformDemoPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<PlatformDemoPage> createState() => _PlatformDemoPageState();
}

class _PlatformDemoPageState extends State<PlatformDemoPage>
    with TickerProviderStateMixin {
  late TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SC Flutter Component Library - 平台使用演示'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        elevation: 2,
        bottom: TabBar(
          controller: _tabController,
          tabs: const [
            Tab(icon: Icon(Icons.desktop_windows), text: '桌面端应用'),
            Tab(icon: Icon(Icons.phone_android), text: '移动端应用'),
            Tab(icon: Icon(Icons.web), text: 'Web应用'),
            Tab(icon: Icon(Icons.compare), text: '平台对比'),
          ],
          labelStyle: const TextStyle(fontSize: 12),
          unselectedLabelStyle: const TextStyle(fontSize: 11),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          DesktopApplicationPage(),
          MobileApplicationPage(),
          WebApplicationPage(),
          PlatformComparisonPage(),
        ],
      ),
      // 添加浮动操作按钮用于快速导航
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _showQuickNavigation();
        },
        tooltip: '快速导航',
        child: const Icon(Icons.navigation),
      ),
    );
  }

  void _showQuickNavigation() {
    showModalBottomSheet(
      context: context,
      builder: (context) => Container(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              '快速导航',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                _buildNavButton(
                  '桌面端',
                  Icons.desktop_windows,
                  Colors.blue,
                  () => _navigateToTab(0),
                ),
                _buildNavButton(
                  '移动端',
                  Icons.phone_android,
                  Colors.orange,
                  () => _navigateToTab(1),
                ),
                _buildNavButton(
                  'Web端',
                  Icons.web,
                  Colors.green,
                  () => _navigateToTab(2),
                ),
                _buildNavButton(
                  '对比',
                  Icons.compare,
                  Colors.purple,
                  () => _navigateToTab(3),
                ),
              ],
            ),
            const SizedBox(height: 16),
            const Text(
              '选择不同平台查看组件库的使用示例',
              style: TextStyle(color: Colors.grey, fontSize: 12),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildNavButton(
    String label,
    IconData icon,
    Color color,
    VoidCallback onPressed,
  ) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
            onPressed();
          },
          style: ElevatedButton.styleFrom(
            backgroundColor: color,
            foregroundColor: Colors.white,
            shape: const CircleBorder(),
            padding: const EdgeInsets.all(16),
          ),
          child: Icon(icon, size: 24),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: TextStyle(
            fontSize: 12,
            color: color,
            fontWeight: FontWeight.w500,
          ),
        ),
      ],
    );
  }

  void _navigateToTab(int index) {
    _tabController.animateTo(index);
  }
}