Flutter日志管理插件loggycian_flutter的使用

Flutter日志管理插件loggycian_flutter的使用

Loggycian Flutter 是一个强大的日志管理和调试工具包，适用于Flutter应用程序。目前它支持网络日志记录功能，并且还计划添加导航日志记录、分析事件跟踪和性能指标等功能。

特性 🚀

• 📊 网络日志记录

  • 实时查看HTTP请求和响应
  • 支持Dio、HTTP包和GraphQL
  • 过滤和搜索功能
  • 复制请求/响应数据和cURL命令

• 🔜 即将推出

  • 导航日志记录
  • 分析事件跟踪
  • 性能指标
  • 状态管理调试

安装 💻

要开始使用Loggycian Flutter，必须在您的机器上安装Flutter SDK。

通过以下命令安装：

dart pub add loggycian_flutter

基本用法 📱

1. 将您的应用包裹在Loggycian中：

void main() {
  runApp(
    Loggycian(
      app: MyApp(),
      visible: !kReleaseMode, // 可选：仅在调试模式下显示
    ),
  );
}

1. 向您的HTTP客户端添加拦截器：

// 对于Dio
final dio = Dio()..interceptors.add(DioInterceptor());

// 对于HTTP包
final client = HttpInterceptor(http.Client());

// 对于GraphQL
final link = GqlInterceptor(HttpLink('YOUR_GRAPHQL_ENDPOINT'));

1. 完成！调试按钮将出现在屏幕上。点击它以查看日志。

示例代码

以下是使用Loggycian Flutter的基本示例代码：

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart' as gqlflutter;
import 'package:http/http.dart' as http;
import 'package:loggycian_flutter/loggycian_flutter.dart';

/// 示例展示如何集成Loggycian与多个HTTP客户端。
///
/// 此示例演示了如何：
/// 1. 使用Loggycian设置Flutter
/// 2. 集成Dio、HTTP和GraphQL客户端
/// 3. 处理多个并发API调用
/// 4. 实现网络日志的最佳实践

/// API端点配置
class ApiConfig {
  static const String baseUrl = 'https://jsonplaceholder.typicode.com';
  static const String graphqlUrl = 'https://countries.trevorblades.com/';
  static const String postsEndpoint = '/posts';
}

/// 展示最佳实践的API服务实现
///
/// 主要特性：
/// * Dio集成 [DioInterceptor]
/// * HTTP客户端 [HttpInterceptor]
/// * GraphQL客户端 [GqlInterceptor]

/// 使用方法：
/// ```dart
/// final apiService = ApiService();
/// final results = await apiService.fetchAllData();
/// ```
class ApiService {
  final Dio _dio;
  final http.Client _httpClient;
  final gqlflutter.GraphQLClient _graphQLClient;

  /// 创建具有适当配置拦截器的 [ApiService]。
  ///
  /// 每个客户端都使用相应的Loggycian拦截器初始化：
  /// - Dio使用 [DioInterceptor]
  /// - HTTP客户端使用 [HttpInterceptor]
  /// - GraphQL客户端使用 [GqlInterceptor]
  ApiService()
    : _dio = Dio()..interceptors.add(DioInterceptor()),
      _httpClient = HttpInterceptor(http.Client()),
      _graphQLClient = gqlflutter.GraphQLClient(
        cache: gqlflutter.GraphQLCache(),
        link: GqlInterceptor(gqlflutter.HttpLink(ApiConfig.graphqlUrl)),
      );

  Future<List<String>> fetchAllData() async {
    final List<dynamic> responses = await Future.wait([
      _fetchDioPosts(),
      _fetchHttpPosts(),
      _fetchGraphQLCountries(),
    ]);

    final List<String> dioPosts = responses[0] as List<String>;
    final List<String> httpPosts = responses[1] as List<String>;
    final String graphqlResponse = responses[2] as String;

    return [...dioPosts, ...httpPosts, graphqlResponse];
  }

  Future<List<String>> _fetchDioPosts() async {
    List<Future<Response>> futures = List.generate(
      4,
      (i) => _dio.get('${ApiConfig.baseUrl}${ApiConfig.postsEndpoint}/${i + 1}'),
    );
    final responses = await Future.wait(futures);
    return responses.map((response) => response.data.toString()).toList();
  }

  Future<List<String>> _fetchHttpPosts() async {
    List<Future<http.Response>> futures = List.generate(
      4,
      (i) => _httpClient.get(
        Uri.parse('${ApiConfig.baseUrl}${ApiConfig.postsEndpoint}/${i + 1}'),
      ),
    );
    final responses = await Future.wait(futures);
    return responses.map((response) => response.body).toList();
  }

  Future<String> _fetchGraphQLCountries() async {
    final options = gqlflutter.QueryOptions(
      document: gqlflutter.gql("""
        query GetCountries {
          countries {
            code
            name
          }
        }
      """),
      fetchPolicy: gqlflutter.FetchPolicy.noCache,
      cacheRereadPolicy: gqlflutter.CacheRereadPolicy.ignoreAll,
    );
    final result = await _graphQLClient.query(options);
    return result.data.toString();
  }
}

/// 示例Flutter应用展示Loggycian集成
///
/// 此应用展示了：
/// 1. 使用 [Loggycian] 设置正确的Widget树
/// 2. 使用不同HTTP客户端的实际世界API调用
/// 3. 网络日志可视化
void main() {
  runApp(const MainApp());
}

/// Loggycian的Navigator键
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Loggycian(app: Scaffold(body: Center(child: ApiCaller()))),
    );
  }
}

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

  [@override](/user/override)
  State<StatefulWidget> createState() => _ApiCallerState();
}

class _ApiCallerState extends State<ApiCaller> {
  final ApiService _apiService = ApiService();
  late Future<List<String>> _apiFuture;

  [@override](/user/override)
  void initState() {
    super.initState();
    _apiFuture = _apiService.fetchAllData();
  }

  void _refreshApis() {
    setState(() {
      _apiFuture = _apiService.fetchAllData();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<String>>(
        future: _apiFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return const Text('No data found');
          } else {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return ListTile(title: Text(snapshot.data![index]));
              },
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _refreshApis,
        child: const Icon(Icons.refresh),
      ),
    );
  }
}