FittedBox

Widżet FittedBox służy do tworzenia responsywnych układów dla aplikacji Flutter.

Nadaje aplikacji bardziej przejrzysty wygląd interfejsu użytkownika. Jest to przydatne, gdy dynamiczne dane mają być wyświetlane w interfejsie użytkownika (takie jak obrazy, akapity).

---

Jeśli nie użyjemy FittedBox będzie to wyglądało tak:

Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Card(
              color: Colors.amber,
              child: Row(
                children: [
                  Container(
                    child: const Text(
                      'Użycie bez FittedBox',
                      style: TextStyle(
                        fontSize: 20,
                        color: Colors.black,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 200,
                    child: Image.network(
                      'url',
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

Jak widzimy obraz jest przepełniony po prawej stronie i aplikacja nie może go renderować. Widżet FittedBox zapewnia, że ​​ostateczne dane są odpowiednio renderowane dla użytkownika, niezależnie od ich wyglądu.

---

Zobaczymy, co się stanie, gdy do aplikacji zostanie dodany widżet FittedBox:

Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FittedBox(
              child: Card(
                color: Colors.amber,
                child: Row(
                  children: [
                    Container(
                      child: const Text(
                        'Użycie widżetu FittedBox',
                        style: TextStyle(
                          fontSize: 20,
                          color: Colors.black,
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 200,
                      child: Image.network(
                        'url',
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),

Tak zmienił się układ, a aplikacja wygląda lepiej 🙂

---

PODSUMOWANIE

W artykule wyjaśniłam podstawową różnicę między brakiem widżetu FittedBox a zastosowaniem tego widżetu. Możesz modyfikować ten kod według własnego wyboru, a to było małe podstawowe wprowadzenie FittedBox z mojej strony i jego pracy z Flutterem. Mam nadzieję, że ten blog dostarczy Ci wystarczających informacji na temat testowania responsywnego układu z widżetem FittedBox w swoich projektach.

FittedBox jest przede wszystkim pomocny w obsłudze dynamicznych danych z serwera. Zapewnia to, że interfejs użytkownika wygląda niezawodnie. ❤ ❤ Dzięki za przeczytanie tego artykułu ❤❤