search

timmaffett / material_symbols_icons

Complete Flutter support for google's Material DesignMaterial Symbols Icons
Apache License 2.0
32 stars 5 forks source link

Updated example web app #17

Open zTomz opened 3 months ago

zTomz commented 3 months ago

I updated the sample web application because I thought the old site didn't look very good and the code was very messy. The video is a demonstration of the new site.

image

https://github.com/timmaffett/material_symbols_icons/assets/85431690/18c9c936-fd56-4554-b186-c08db06d18b6

Edit: The link system is not working yet, but I will work on that in the near future

timmaffett commented 3 months ago

I appreciate the work you have put in on this.

One of the primary things I am trying to accomplish with the example is to have a live preview of adjusting the icon flexible font axis settings with the icons that are on display. The way you have changed the UI to go to a second page for icon settings adjustment defeats this. The idea is that you can interactively play with the settings in real time and see the results immediately.

I was also actually trying to get all of the code into the single file so that it shows up on the example page on pub.dev - I know this not a good way to architect a 'real' application, and you example accomplishes that much better.

I also like the icon preview on the search dropdown, providers, and your use of GridView.builder() to make the grid.., In general a much better example of how to program a proper flutter app!

Do you think you would want to make the changes to put the settings adjustment back top/front page and make the adjustments alwats visible and 'live' ?

Thanks again!

timmaffett commented 3 months ago

oh, and another thing I was trying to accomplish with the Splittable.flexibleRow() class is that as you dynamically resize a web window or on different mobile screens the settings section re-splits the settings widget rows in a sensible fashion (you can provide specific split widgets for different screen widths for each row). I have not looked closely at your app to see if this is preserved but I thought I would mention it, this is important to preserve this behavior, although there may be a better way to accomplish it.

zTomz commented 3 months ago

Thanks for the feedback, I will work on that

zTomz commented 3 months ago

Hey, I updated the example again. I hope it now works like you expect. I also fixed the urlStrategy bug and removed the android, ios, windows, macos and linux folders. I think, the project is just for web. Here is a video of the updatet app. The performance is a bit better on other computers, my laptop is not the best and when I also record a video, he reaches his limits.

https://github.com/timmaffett/material_symbols_icons/assets/85431690/c5d8b73f-332e-4fb5-9778-656c18deae7c

timmaffett commented 3 months ago

The example app was indeed designed and tested on linux, windows and mac desktop, web versions for chrome, firefox and safari, and also Android and IOS versions for various sized phones. That is one of the reasons that there is the option to run it with the example\lib\main_device_preview.dart which gives you the ability to test your layout in a variety of form factors. It should work well at tall/skinny layouts as well as wide/short layouts. One other nice feature of the current search parameter is that it filters the entire 'large' icon list as you type - showing the options in dropdown, with icon preview, is nice, but I think that it is also useful to filter the large list in real time also. (My eyesight doesn't really allow me to see too much with the tiny previews for example) It may be that I should just include your example app as an alternate we only example - until/if/when you feel like testing on desktop and mobile we could expand on that. Again, I appreciate the work that you have put in to this and it your example is very nice.