Occurrences Widget - On Site Help

[Vanethos]

Description
Separate widget for the "On Site Help" of the Occurrences.

File Location

- presentation
|__ ui

Requirements

• Widget that with the Occurrences object displays information about:

  • The means that are on the site, be it human, land or aerial
  • Last update

• This widget must have a callback for the click on the map image, so that the details screen can show the Map screen with the marker centered on it

UI

NOTES
Until the API Is completed, assume that this widget has as an input 1 DateTime object and 3 int.

[hientranea]

@Vanethos Can i work on this issue ?

[Vanethos]

Yes!

I'll assign this issue to you

[Vanethos]

@hientranea any news on this issue?

[TomerPacific]

@Vanethos, do you need help with this issue?

[Vanethos]

Hey @TomerPacific !

Sure! I don't have access to the images yet but you can use one of logos in the assets folder

I'll assign this to you

[TomerPacific]

@Vanethos ,
below is a screenshot of what I have so far:

I have turned the background black so that the image asset can be shown (as it is white). I am also aware of the font size and will scale it accordingly.

I wanted to get some clarification about the callback. If you could provide some more detail on how it should work, that would help me code it. As of this moment, I do not understand how this callback works. To what do I attach it? As described it is not passed in the constructor.

Furthermore, I have taken the liberty to move the dateFormatter method, getFormattedDate, to the misc class inside the utils. I have done this, since this widget also needs to format the dateTime object. Let me know if this ok.

[Vanethos]

@TomerPacific the callback should be ignored for now, it is something that must be done after all these widgets are created.

Having the formatted date in another class is brilliant, thanks for that 👍

As with the previous widget that you have worked on, will this wrap nicely in a small card like we see in the original Post? What I mean is: If I use your item in a list, how will it look?

Also:

• The text is too large, please see the original post for a comparison
• The images are not aligned with the text: the first image is centered on the "Humanos" text while the "AEREOS" image is before the text, maybe instead of two rows uyou should use a row with 3 columns, one for each combo of image/text

[TomerPacific]

@Vanethos , thanks for the quick reply.
I will ignore the callback. As I mentioned, I am aware of the text size and will scale it. I just wanted to put a screenshot so you can get an idea of what I am working on.

It is supposed to wrap nicely as I have wrapped everything in a Container widget.
In regards to alignment, the layout of the widget is:

Material
|
Container
|
Column
| | |
Row Row Row
|
Column
|
Container
|
Row

The reason it is mapped this way is because I needed to have the image and the text in the same row. It does not align, as some rows/columns have the mainAxisSize attribute set with spaceEvenly.
I will work to align all the items accordingly.

-- UPDATE --
I have reorganized the layout and it now looks like so:

[Vanethos]

Now with the update it's perfect 👍

[TomerPacific]

@Vanethos , I have created a PR