Good day everyone!
My name is Alex, I am the founder and frontend developer of the “Operator 18” management company automation system.
Now I am rewriting the project from scratch, taking into account the errors in the application of the architecture and structure of the project itself.
You can view the second version of the system (what is ready) and press the buttons here.
Use this credentials to login to system: login operator@mail.ru, password operator.
Here is the first article in which I described one of the issues I encountered during development — to create or not my own widgets.
In this article I want to talk about the experience of using assets, namely images for a web application written on the Flutter framework.
In the “Operator 18”, the main element is the register of user requests. It looks like this:
Use requests can be regular, paid or emergency. At the same time, they may have one of the following statuses:
All status images are png images that I added to the project, namely, to the assets/icons folder in the root of the project. And I also prescribed dependencies in pubspec.yaml:
In the code itself, I get a picture simply by referring to the current status of the user’s request and, depending on the status, the getter gives me this or that picture:
Well, it seems that’s it! Build the project, upload it to the server and … get the following result:
As you can see, not a single picture has loaded. But if you open the Google Chrome console, it becomes clear that the it doesn’t know where to get these very images (even though they are on the server).
To correct this, you need to prescribe some more points, namely:
1. Opening the file web/index.html and add a description of the pictures to it:
2. Next, open the web/manifest.json and add the following code:
Build again and deploy to the server. Now the pictures are loading!
But some pictures end up not looking very good, as if the resolution of the picture is not suitable for the screen resolution. By the way, I use flutter_screenutil, and the screen size is 1920 x 1080 pixels (maybe that’s the problem).
I admit, I did not understand the question of why some of the pictures looked crooked. But I realized for myself that I don’t want to track a lot of changes in several places every time when adding/changing images. That’s why I started using the regular Icon widget. It looks not quite by design now, but for that there are fewer problems, in my opinion.
The status icon itself is now decorated as follows:
And the user request’s page looks like this:
As a result, I got:
- saving time;
- lack of need to control multiple files;
- there is no need to use a lot of images for different screen resolutions (1x, 2x, etc.);
- simplified procedure for deploying the next build to the server.
Thanks for reading! I will be grateful for criticism/ advice/ other comments.
