ispect 1.0.3 ispect: ^1.0.3 copied to clipboard
Wrapper around Inspector, Talker and etc.
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
- ✅ Localizations: ru, en. (I will add more translations in the future.)
- ✅ Talker logger implementation
- ✅ Feedback
- ✅ Inspector
- ✅ Debug tools
- ✅ Cache manager
- ✅ Device and app info
📌 Getting Started #
Follow these steps to use this package
Add dependency #
dependencies:
ispect: ^1.0.2
Add import package #
import 'package:ispect/ispect.dart';
import 'package:talker_flutter/talker_flutter.dart';
Easy to use #
Simple example of use ISpect
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();
talker.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> {
final ISpectController controller = ISpectController();
@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'),
controller: controller,
);
return MaterialApp(
navigatorKey: navigatorKey,
navigatorObservers: [
TalkerRouteObserver(widget.talker),
],
localizationsDelegates: ISpectLocalizations.localizationDelegates([AppGeneratedLocalization.delegate]),
theme: ThemeData.light(),
darkTheme: options.darkTheme,
themeMode: ThemeMode.dark,
builder: (context, child) {
child = ISpectWrapper(
navigatorKey: navigatorKey,
options: options,
isPanelVisible: true,
child: child,
);
return child;
},
home: const _Home(),
);
}
}
class _Home extends StatelessWidget {
const _Home();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(AppGeneratedLocalization.of(context).app_title),
),
);
}
}
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',
);
}
}