FLUTTER WEB - jak zapewnić responsywność appki ??

Question

Robię małą aplikację webową we Flutterze (PWA, mająca kilka podstron). Załóżmy, że to ma być e-sklep z butami zimowymi (idzie zima, więc trzeba wyjść na przeciw zapotrzebowaniom rynkowym!). Chciałbym zaprezentować różną liczbę butów, w zależności od typu ekranu.
Do tej pory robiłem tylko bardzo proste i małe appki mobilne we Flutterze. W przypadku appki webowej napotkałem (na razie) na jeden, ale to duży problem - responsywność. Chciałbym żeby appka dostosowywała się do wielkości okna przeglądarki i to zarówno na PC, jak i urządzeniach mobilnych.
I tu jest duży problem! Nie wiem jak to wszystko - jak to się teraz mówi często - "ogarnąć" :)
Problem jest dobrze znany - okno przeglądarki web na telefonie i w PC ma inny rozmiar, inną rozdzielczość i jeszcze jakby tego brakowało - inne proporcje :) (zakładam że telefon jest zwykle ustawiony pionowo).

Można oczywiście zrobić dwie appki - na PC-ty i osobno mobilną, która byłaby wyświetlana na podstawie rozdzielczości ekranu oraz User Agent - tak jak kiedyś się robiło. strona.pl i m.strona.pl (jeszcze część stron do dziś tak funkcjonuje). Ale to też nie do końca rozwiązuje problem. Bo dziś do PC można mieć ekranik 17 cali FullHD, 32 cale 4K, albo ultra wide o szerokości ponad metr :) i rzadko spotykanych proporcjach. Ale powiedzmy, ze oleje ultra wide monitory, bo rzadko kto je ma, to jednak nadal dostosować się do parametrów licznych ekranów jest trudno.

Mam zrobiony swój stateless widget, prostokąt (container) z pewnym contentem (zdjęcie buta i kilka wierszy tekstu). Ten widget powielam kilka razy w Column. I na PC jest OK. Mogę oczywiście zrobić coś w rodzaju siatki - połączenie kilku Row i Column, będę miał np siatkę 4x3. OK. Ale programowo raczej / chyba nie da się sterować liczbą kolumn i rzędów, więc musiałbym zrobić na sztywno np. trzy siatki:

- 4 x 1 na telefon
- 4 x 2 ma tablety i małe wyświetlacze laptopów
- 4 x 3 na PC z większym ekranem.

Ale to jest MZ bardzo głupie podejście, bardzo nie ładne :) Zgodzicie się?

Nie znam dobrze Fluttera, ale chyba sterować liczbą elementów i ich rozmieszczeniem (tj. pozycje kolumna/rząd w "siatce") w sposób programowy nie jest tak łatwo, jeśli w ogóle jest to możliwe (??). Tu interface z grubsza biorąc jest hard coded. Chyba, że coś przeoczyłem :)
 
Jeszcze mam pytanie, czy w aplikacji webowej można przy starcie appki wymusić powiększenie przeglądarki do wielkości ekranu. Wiem, że jest coś takiego jak Full Screen Mode, ale wtedy znika toolbar, status bar, itd. przeglądarki.

Czy można zmienić rozmiar okna przeglądarki? Lub wymusić minimalny rozmiar okna?
 
Liczę na Wasze wskazówki i podpowiedzi!

Dzięki!

Comments

Sprawdź: Progressive Web Applications (PWA) with Flutter

---

Chyba to nie jest świeżo napisany artykuł, ale kilka rzeczy być może wykorzystam. Dzięki!

W międzyczasie zacząłem szukać informacji i znalazłem przykład z widżetem  GridView, który przynajmniej część problemów z RWD we Flutterze rozwiązuje.