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 ❤❤
Comments