ispect 1.0.4

Wrapper around Inspector, Talker and etc. This package was not created as something unique, it is a set of good tools from the expanse of pub.dev and my kind of implementation of all this for future projects

Wrapper around Inspector, Talker and etc 🚀

This package was not created as something unique, it is a set of good tools from the expanse of pub.dev and my kind of implementation of all this for future projects, I decided to share it, maybe it will be useful to someone. I will improve, add along with the growth of the main packages used, and maybe add new functions. 😊
Show some ❤️ and star the repo to support the project!

📌 Features

• ✅ Draggable button for route to ISpect page, manage Inspector tools
• ✅ Localizations: ru, en. (I will add more translations in the future.)
• ✅ Talker logger implementation
• ✅ Feedback
• ✅ Debug tools
• ✅ Cache manager
• ✅ Device and app info

📌 Getting Started

Follow these steps to use this package

Add dependency

dependencies:
  ispect: ^1.0.4

Add import package

import 'package:ispect/ispect.dart';
import 'package:talker_flutter/talker_flutter.dart';

Easy to use

Simple example of use ISpect
You can manage ISpect using ISpect.read(context). Put this code in your project at an screen and learn how it works. 😊

Code:

Note: For handle Dio: see
The simplest realization:

import 'package:flutter/material.dart';
import 'package:ispect/ispect.dart';
import 'package:ispect_example/src/core/localization/generated/l10n.dart';
import 'package:talker_flutter/talker_flutter.dart';

GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

void main() {
  final talker = TalkerFlutter.init();

  /// Use global variable [talkerWrapper] for logging.
  talkerWrapper.debug('Hello World!');
  talkerWrapper.initHandling(talker: talker);
  runApp(App(talker: talker));
}

class App extends StatefulWidget {
  final Talker talker;
  const App({super.key, required this.talker});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final ISpectOptions options = ISpectOptions(
      talker: widget.talker,
      themeMode: ThemeMode.dark,
      lightTheme: ThemeData.light(),
      darkTheme: ThemeData.from(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.dark,
        ),
      ),
      locale: const Locale('en'),
    );

    /// It is necessary to wrap `MaterialApp` with `ISpectScopeWrapper`.
    return ISpectScopeWrapper(
      options: options,
      child: MaterialApp(
        navigatorKey: navigatorKey,
        navigatorObservers: [
          TalkerRouteObserver(widget.talker),
        ],

        /// Add this to `MaterialApp`'s localizationsDelegates for add `ISpect` localization. You can also add your own localization delegates.
        localizationsDelegates: ISpectLocalizations.localizationDelegates([AppGeneratedLocalization.delegate]),
        theme: options.lightTheme,
        darkTheme: options.darkTheme,
        themeMode: options.themeMode,
        builder: (context, child) {
          /// Add this to `MaterialApp`'s builder for add `Draggable ISpect` button.
          child = ISpectBuilder(
            navigatorKey: navigatorKey,
            child: child,
          );

          return child;
        },
        home: const _Home(),
      ),
    );
  }
}

class _Home extends StatelessWidget {
  const _Home();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(AppGeneratedLocalization.of(context).app_title),
            ElevatedButton(
              onPressed: () {
                /// Use `ISpect` to toggle `ISpect` visibility.
                ISpect.read(context).toggleISpect();
              },
              child: const Text('Toggle ISpect'),
            ),
          ],
        ),
      ),
    );
  }
}

For handle routing (GoRouter)

You can use NavigatorObserver, but in practice it does not always work correctly.
Alternatively, you can use a listener:

    _router.routerDelegate.addListener(() {
      final String location =
          _router.routerDelegate.currentConfiguration.last.matchedLocation;
      talkerWrapper.route(location);
    });

For handle providers (Riverpod)

You can use ProviderObserver:

class ProviderLoggerObserver extends ProviderObserver {
  @override
  void didAddProvider(
    ProviderBase<Object?> provider,
    Object? value,
    ProviderContainer container,
  ) {
    talkerWrapper.provider(
      message: 'Provider ${provider.name} was initialized with $value',
    );
  }

  @override
  void didDisposeProvider(
    ProviderBase<Object?> provider,
    ProviderContainer container,
  ) {
    talkerWrapper.provider(
      message: 'Provider ${provider.name} was disposed',
    );
  }

  @override
  void didUpdateProvider(
    ProviderBase<Object?> provider,
    Object? previousValue,
    Object? newValue,
    ProviderContainer container,
  ) {
    talkerWrapper.provider(
      message:
          'Provider ${provider.name} was updated from $previousValue to $newValue',
    );
  }

  @override
  void providerDidFail(
    ProviderBase<Object?> provider,
    Object error,
    StackTrace stackTrace,
    ProviderContainer container,
  ) {
    talkerWrapper.handle(
      exception: error,
      stackTrace: stackTrace,
      message: 'Provider ${provider.name} failed with error $error',
    );
  }
}

Thanks to all contributors of this package