Flutter: How to replicate inspect widget feature like in devtools - flutter

I know the code is literally in the devtools repository regarding the solution but as an learning flutter developer the code is very hard to understand and also there is no article or videos on how to create own inspectable or devtools like features.
What I am trying to do now is find the underlying Widget lets say ElevatedButton depending on the user's tap.
Below is the image i am trying to replicate.
I am able to get the specific coordinates and its renderObject but am not sure where to look for next.
final box = context.findRenderObject() as RenderBox;
final local = (context.findRenderObject() as RenderBox)
.globalToLocal(details.globalPosition);
final hitTestResult = BoxHitTestResult();
(context.findRenderObject() as RenderBox).hitTest(
hitTestResult,
position: local,
);
BoxHitTestEntry entry = hitTestResult.path
.firstWhere((element) => element is BoxHitTestEntry) as BoxHitTestEntry;

Related

Clunky animation with Dismissible and Provider (NotifyListener)

I am trying to fix an issue that occurred when using the Dismissible widget and the Provider package.
When I dismissed a card this is called :
Provider.of<NMyProvider>(context, listen: false).toggleIsDone(object.id);
The provider :
Future<void> deleteNotebook(int id) async {
...
final notebookId = _items.indexWhere((notebook) => notebook.id == id);
...
_items.removeAt(notebookId);
notifyListeners();
}
This makes the animation clunky with noticeable lag but does not occur when removing the NotifyListeners.
Most probably the entire screen is being rebuilt upon notification from the provider. There are some solutions for that:
Move the Consumer<NMyProvider>/context.watch<NMyProvider>(context)/Provider.of<NMyProvider>(context, listen: true) closer to its usage. Flutter only rebuilds the widgets that use the same context;
Use a unique key for every notebook. Not the index position, but a unique key like the notebookId. Flutter will re-use the already built notebook widget where the key is the same in between builds;
Split the NMyProvider: Move everything that doesn't make sense to this provider into other providers. If a lot of unrelated states are together the chance of this provider being used by the root widget gets higher. NMyProvider should deal only with the list of notebooks state;

How to make google-mlkit text recognition work in a flutter app

I'm trying to make a flutter app that uses google-mlkit text recognition to extract the text of receipts. I got it working but there are still isues. Some single letters don't get recognized and sometimes even full words or numbers dont get picked up.
I implemented my app following this guide https://blog.codemagic.io/text-recognition-using-firebase-ml-kit-flutter/.
In this picture you can see what i mean that some numbers and text dont get picked up. [1]
[1]: https://i.stack.imgur.com/nR5SP.jpg
Does anyone know what the problem could be? Any suggestions? Thanks in advance for the help and I will list some ways i have tried to fix it.
-Changed the cameracontroller picture resolution from high to max and ultra.
-Changed my dependecy to the newest version.
-Changed to mlkit text recognition v2
-Tried using the google_ml_vision https://pub.dev/packages/google_ml_vision
(Its also not the case that these missing words/numbers dont get marked with a rectangle.)
You can use google_ml_kit package. It works with Google's standalone ML Kit. So no need to register project on firebase. It is a recommended package for standalone ml kit as firebase_ml_vission package is discontinued.
Recently google_ml_kit package is split into a set of packages. For text recognition, google_mlkit_text_recognition package is created.
For text recognition, you can use below code,
final textRecognizer = TextRecognizer();
final RecognizedText recognizedText = await textRecognizer.processImage(inputImage);
String text = recognizedText.text;
for (TextBlock block in recognizedText.blocks) {
final Rect rect = block.rect;
final List<Offset> cornerPoints = block.cornerPoints;
final String text = block.text;
final List<String> languages = block.recognizedLanguages;
for (TextLine line in block.lines) {
// Same getters as TextBlock
for (TextElement element in line.elements) {
// Same getters as TextBlock
}
}
}
To know, how to add text recognition using google_ml_kit, you can refer this link.

How can you get the flutter visible page's state or context?

Sometimes an event (eg upload) starts async while the user is on one page. If they navigate away from that page the task's .then(...) will try to display the result on the page which is no longer visible, eg by means of a toast.
How can I get the context of the currently visible page at the time when the Future completes to display a snackbar, toast or dialog?
EDIT:
I see in the description of oktoast (https://pub.dev/packages/oktoast) that version 2 "Does not need the buildContext to be passed", and further
Quote:
Explain #
There are two reasons why you need to wrap MaterialApp
Because this ensures that toast can be displayed in front of all other
controls Context can be cached so that it can be invoked anywhere
without passing in context
This implies to me that there is a better way by providing a Material app ancestor somewhere....
For a simple Solution I would use the Provider Package. Keyword here is StateManagement (https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple)
The Model would look sth like this:
class UploadModel extends ChangeNotifier {
final bool loading = false;
void uploadXY() async{
loading = true;
// This call tells the widgets that are listening to this model to rebuild.
notifyListeners();
await realUploadStuff();
loading = true;
notifyListeners();
}
}
To start the upload:
Provider.of<UploadModel>(this).uploadXY()
To react if loading-bool changes:
if(Provider.of<UploadModel>(this).loading)...
You can find a simple Example here:
https://github.com/flutter/samples/blob/master/provider_counter/lib/main.dart

Flutter using GlobalKey to trigger another states function

Basic App to reproduce the error has two widget
Home Widget contains a gesture detector triggering the following function:
GlobalKey<MainMapState> mapKey = GlobalKey<MainMapState>();
void getCurrentLocation() async{ // I am using async property for something different but it not our concern right now
mapKey.currentState.asdd();
}
MainMap is a stateful widget and it's state contains the following function:
void asdd(){
print("triggered");
}
As a result I am getting this
Note: I am using GlobalKey to animate CameraPosition to my current location on GoogleMap widget which is inside the MainMapState
I'm sorry I don't have enough reputation points to merely comment on your post.
Based on the error you are receiving I suspect you have the same issue to which I have yet to find a correct answer. A couple of alternate approaches are listed on my same question as noted at link:
How to smoothly update a Flutter AnimatedList without using a GlobalKey.currentState?

How To Scan a Seven Segment Display by Firebase ML kit Text Recognition?

The Text Recognition API in Firebase Ml kit is not recognizing the digital numbers or a seven segment display numbers that i am trying to scan out from a weight scale , is there anyway to work it out ?
I tried the Dart package for firebase ml vision for flutter apps , and i used the firebaseVisionImage class and Text Recognizer class and visionText class as shown .
// get image file
final File imageFile = File(widget.imagePath);
// create vision image from that file
final FirebaseVisionImage visionImage =
FirebaseVisionImage.fromFile(imageFile);
// create detector index
final TextRecognizer textRecognizer =
FirebaseVision.instance.textRecognizer();
// find text in image
final VisionText visionText =
await textRecognizer.processImage(visionImage);
I expected to have the numbers as an output but , it's not recognized at all ,
If the ML Kit model doesn't automatically recognize the text in your image, there isn't a lot you can do to tweak it.
Instead you'll want to:
Check if the Cloud Vision model is better able to extract the text from your image.
Look into training a custom model for extracting your specific type of text.
Look at other dedicated text extraction packages.
You need to process the image in this type
final inputImage = InputImage.fromFilePath(imageFile.path);
final RecognizedText recognizedText = await textRecognizer.processImage(inputImage);
i hope it works :)