autorstwa Ashity Prasad ( LinkedIn , Twitter ), fluttergems.dev

Jest to drugi artykuł z serii szczegółowych artykułów „Mastering Dart & Flutter DevTools” . W tym artykule dowiesz się o Flutter Inspector DevTools poprzez przykładowe studium przypadku aplikacji. Jeśli chcesz zapoznać się z innym artykułem z tej serii, po prostu kliknij poniższy link:

• Część 1: Wprowadzenie i instalacja
• Część 2: Flutter Inspector [Jesteś tutaj]
• Część 3: Narzędzie rozmiaru aplikacji
• Część 4: Widok sieci
• Część 5: Widok rejestrowania
• Część 6: Widok CPU Profiler
• Część 7: Widok pamięci
• Część 8: Widok wydajności

Ponieważ aplikacje mobilne rozwijają się w szybkim tempie (łącznie około 6 000 aplikacji dziennie w Apple i Google Play Store), istnieje ostra konkurencja o przyciągnięcie uwagi i utrzymanie użytkowników. Interfejs użytkownika (UI) aplikacji odgrywa kluczową rolę w ogólnym doświadczeniu użytkownika, które jest ważne dla utrzymania użytkowników. Dobrze zaprojektowany interfejs użytkownika może sprawić, że aplikacja będzie bardziej intuicyjna i łatwa w użyciu, a źle zaprojektowany interfejs użytkownika może sprawić, że nawet najpotężniejsza aplikacja będzie trudna i frustrująca w użyciu. Dobry interfejs użytkownika może również pomóc odróżnić Twoją aplikację od innych na rynku i uczynić ją bardziej atrakcyjną dla użytkowników. Dlatego dobrze zaprojektowany interfejs użytkownika jest niezbędny do sukcesu każdej aplikacji.

We Flutter możesz zaprojektować i zbudować piękny interfejs użytkownika (UI) za pomocą widżetów. Aby utworzyć układ we Flutterze, możesz użyć kombinacji tych widżetów do stworzenia struktury i wyglądu interfejsu użytkownika aplikacji. Ale co się dzieje, gdy układ Twojej aplikacji ma problemy, a interfejs użytkownika nie pasuje do zamierzonego projektu?

I tu z pomocą przychodzi Flutter Inspector. Można go używać do zrozumienia istniejących układów, a także do diagnozowania wszelkich problemów z układem, które mogą występować w aplikacji. A najlepsze jest to, że wizualne debugowanie układu można wykonać w locie.

Celem tego artykułu jest zapoznanie Cię z narzędziem Flutter Inspector, którego można użyć do debugowania wszelkich problemów z układem i lepszego zrozumienia go za pomocą przykładowej aplikacji z prawdziwego życia.

Inspektor Fluttera

Flutter Inspector to narzędzie, którego można użyć do sprawdzenia drzewa widżetów aplikacji Flutter. Za pomocą tego narzędzia można łatwo wizualizować i sprawdzać układ, rozmiar i właściwości wizualne widżetów tworzących interfejs aplikacji. To narzędzie może być również używane do identyfikowania problemów z wydajnością, przeprowadzania wizualnego debugowania aplikacji i dostarczania szczegółowych informacji o widżetach.

Aby lepiej zrozumieć, w jaki sposób można wykorzystać narzędzie Flutter Inspector, przyjrzyjmy się analizie przypadku. W tym ćwiczeniu zaczniemy od układu interfejsu użytkownika po lewej stronie, jak pokazano na poniższym obrazku. Naszym celem jest identyfikacja problemów w interfejsie użytkownika i wizualne debugowanie ich za pomocą Flutter Inspector. Po wizualnym rozwiązaniu wszystkich problemów z interfejsem użytkownika dokonamy niezbędnych zmian w kodzie i przekształcimy układ w pożądany interfejs użytkownika (prawy ekran).

A teraz zacznijmy od studium przypadku.

Krok 1: Uzyskanie kodu źródłowego

Utwórz lokalną kopię poniższego repozytorium

Otwórz repozytorium w GitHub, jak pokazano poniżej.

Kliknij zielony przycisk <> Code, a następnie przejdź do Localzakładki i kliknij Download ZIP, aby pobrać kod źródłowy tego ćwiczenia.

Wyodrębnij plik za pomocą dowolnego narzędzia do rozpakowywania.

Mamy teraz lokalną kopię źródła w folderze flutter_inspector_demo-master.

Krok 2: Otwarcie projektu w VS Code

Uruchom VS Code, otwórz folder projektu w VS Code i przejdź do pubspec.yamlpliku.

Kliknij, Get Packagesaby pobrać wszystkie pakiety wymagane dla projektu.

Krok 3: Uruchomienie Flutter Inspector w VS Code

Zanim uruchomimy Flutter Inspector, musimy uruchomić aplikację.

Kliknij ikonę na No Devicepasku stanu i wybierz urządzenie docelowe. Jeśli urządzenie domyślne jest już wybrane, możesz je kliknąć i zmienić urządzenie docelowe.

Pójdziemy dalej i wybierzemy emulator Androida jako urządzenie docelowe.

Teraz kliknij, Runaby uruchomić aplikację (funkcja główna), jak pokazano na poniższym obrazku.

Flutter Inspector można uruchomić, korzystając z następujących instrukcji:

Click Dart DevTools in status bar > 
Click Open DevTools in Web Browser > Click Flutter Inspector tab

      
                

                    
                    
                
            

Okno Flutter Inspector składa się z trzech głównych części:

1. pasek narzędzi
2. Panel drzewa widżetów
3. Eksplorator układu / Okno drzewa szczegółów widżetu

1. Pasek narzędzi Flutter Inspector

Pasek narzędzi Flutter Inspector zapewnia funkcje, które pomagają w wizualnym debugowaniu problemów z układem. Aby aktywować dowolną funkcję, wystarczy nacisnąć odpowiedni przycisk na pasku narzędzi. Dostępne funkcje to:

• Wybierz tryb widżetów — widżety można wybierać w interaktywnym panelu drzewa widżetów, aby sprawdzić ich właściwości. Może to być jednak uciążliwe, jeśli drzewo widżetów jest głębokie. Włączenie tego trybu umożliwia użytkownikowi wybranie widżetu bezpośrednio w interfejsie aplikacji, dzięki czemu można go dokładniej sprawdzić.
• Powolne animacje — gdy włączone są wolne animacje, wszystkie animacje są uruchamiane 5 razy wolniej, co pozwala na łatwą kontrolę wizualną. Jest to przydatne do obserwowania i poprawiania animacji, która może nie wyglądać w pełni poprawnie.
• Pokaż prowadnice — gdy ta funkcja jest włączona, w aplikacji rysowane są prowadnice wyświetlające ramki renderowania, wyrównania, wypełnienia, przewijane widoki, przycinanie i odstępy. Tego narzędzia można użyć do lepszego zrozumienia i zmodyfikowania układu, na przykład lepszego wyrównania widżetów lub usunięcia niechcianych dopełnień.
• Pokaż linie bazowe — to narzędzie jest przydatne do wizualnej kontroli wyrównania tekstów przy użyciu linii bazowych, które są poziomymi liniami używanymi do pozycjonowania tekstów. Wybranie tej opcji spowoduje wyświetlenie wszystkich linii bazowych, co pozwoli na dokładne sprawdzenie pionowego wyrównania tekstu.
• Podświetl odświeżanie — to narzędzie jest przydatne do wyróżniania widżetów, które często się odświeżają, co może utrudniać działanie aplikacji. Za każdym razem, gdy pudełko jest przemalowywane, wokół niego rysowana jest ramka w obracającym się kolorze tęczy.
• Podświetl zbyt duże obrazy — jak sama nazwa wskazuje, to narzędzie wyróżnia obrazy o wysokiej rozdzielczości, które zużywają zbyt dużo pamięci, poprzez odwracanie kolorów i odwracanie ich. Naprawianie tych obrazów jest ważne, ponieważ mogą one powodować niską wydajność, zwłaszcza na urządzeniach niższego rzędu oraz w przypadku, gdy na ekranie jest wiele obrazów, takich jak GridView lub ListView.

We Flutter każdy element interfejsu użytkownika renderowany na ekranie jest widżetem. Układ interfejsu użytkownika aplikacji Flutter składa się z hierarchii widżetów, lepiej znanej jako drzewo widżetów. Drzewo składa się z pojedynczych widżetów, z których każdy ma swoje własne właściwości i widżety podrzędne. Ta hierarchiczna struktura jest głównym powodem, dla którego Flutter jest w stanie efektywnie komponować i renderować interfejs użytkownika. Panel Drzewo widżetów jest przydatny do przeglądania tego drzewa widżetów i można go użyć do wybrania dowolnego widżetu w drzewie w celu dalszej kontroli jego układu i właściwości.

3. Eksplorator układu / Okno drzewa szczegółów widżetu

Kiedykolwiek widżet flex ( Row, Column, Flex) lub dowolny element potomny widżetu flex zostanie wybrany w okienku drzewa widżetów, jego układ można zwizualizować w Eksploratorze układu (pokazanym powyżej). Ten widok udostępnia również różne narzędzia, za pomocą których możemy wizualnie zmienić istniejący układ. Aby uzyskać bardziej szczegółowy widok wszystkich właściwości i wartości wybranego widżetu, możesz kliknąć kartę Drzewo szczegółów widżetu, jak pokazano poniżej.

Po zapoznaniu się z interfejsem (anatomią) Flutter Inspector Page, przejdźmy teraz do studium przypadku.

Studium przypadku

Naszym celem jest użycie Flutter Inspector do wizualnego debugowania problemów z układem w przykładowej aplikacji, abyśmy mogli uzyskać pożądany interfejs użytkownika.

Patrząc na dwa interfejsy użytkownika, możemy zidentyfikować 4 główne problemy w układzie:

• Problem z układem nr 1 — Przepełniony tekst w pierwszym wierszu.
• Problem z układem nr 2 — emotikony nie są odpowiednio rozmieszczone i nie znajdują się na środku pozostałej dostępnej pionowej przestrzeni na stronie.
• Problem z układem nr 3 — Brak poziomej przegrody.
• Problem z układem nr 4 — przycisk Prześlij nie jest wyrównany do środka.

Problem z układem nr 1

Pierwszym problemem, który musimy rozwiązać w naszym interfejsie użytkownika, jest przepełniony tekst.

Po uruchomieniu Flutter Inspector możemy zobaczyć Error 1/1w panelu drzewa widżetów.

Kliknij przycisk w dół, jak pokazano na poniższym obrazku, aby przejść do widżetu powodującego błąd. Wystąpił ‘A RenderFlex overflowed by...’błąd, który jest jednym z najczęściej występujących błędów. Możesz zobaczyć żółto-czarne paski wskazujące obszar przepełnienia zarówno w interfejsie aplikacji, jak i Eksploratorze układu.

Jak pokazano na poniższym obrazku, przyczyną tego błędu jest fakt, że widżet podrzędny Textnie ma ograniczeń co do rozmiaru i stara się być szerszy ( by 237 pixels) niż szerokość dozwolona przez jego element nadrzędny ( Row).

Jak pokazano na poniższym obrazku, możemy debugować ten problem bezpośrednio z Eksploratora układu, ustawiając flexwidżet Textna 1. W ten sposób informujemy Textwidżet, że może się rozwijać tylko do momentu wypełnienia dostępnej przestrzeni wzdłuż głównej osi widżetu Rowwidżet.

Voila! Problem został rozwiązany.

Ale poczekaj chwilę. Jeśli pójdziesz dalej i ponownie uruchomisz aplikację, problem powróci, by nas prześladować.

Dzieje się tak, ponieważ wizualne naprawienie jakiegokolwiek problemu za pomocą Eksploracji układu nie jest trwałe, ponieważ nie wprowadza się żadnych zmian w kodzie. Jest to wizualne narzędzie do debugowania, za pomocą którego można bawić się i identyfikować właściwe rozwiązanie. Po dotarciu do rozwiązania należy teraz wprowadzić niezbędne zmiany w kodzie, aby zachować rozwiązanie.

Przejdźmy dalej i zmodyfikujmy istniejący kod problemu nr 1 podany poniżej

// Problem #1
Row(
  children: const [
    Text(
      'Please provide your valuable feedback by sharing your experience with us!',
      style: TextStyle(
        fontSize: 18.0,
      ),
    ),
  ],
),

Zmodyfikowany kod podano poniżej:

// Problem #1
Row(
  children: const [
    Expanded(
      child: Text(
        'Please provide your valuable feedback by sharing your experience with us!',
        style: TextStyle(
          fontSize: 18.0,
        ),
      ),
    ),
  ],
),

Po naprawieniu pierwszego problemu z układem, nasz interfejs aplikacji wygląda następująco.

Problem z układem nr 2

Kolejnym problemem, który musimy naprawić, jest układ emotikonów.

Jak pokazano na powyższym obrazku, emotikony powinny znajdować się na środku pozostałej dostępnej przestrzeni pionowej. Ponadto emotikony powinny być równomiernie rozmieszczone.

Zanim przejdziemy dalej, przejdźmy dalej i włączmy Show Guidelinestryb z paska narzędzi, jak pokazano na poniższym obrazku. Te wskazówki pomogą nam lepiej wizualnie debugować układ.

Zacznijmy od stworzenia równych odstępów między emoji.

Jak pokazano na powyższym obrazku, kliknij Rowwidżet w drzewie widżetów, które zawiera Emojiwidżety. W Eksploratorze układu widżety wewnątrz Rowsą obecnie wyrównane startwzdłuż głównej osi. Kliknij listę rozwijaną i wybierz wyrównanie jako spaceEvenly. Teraz możesz zauważyć, że Emojiwidżety są równomiernie rozmieszczone, tak jak chcieliśmy.

Następnie chcemy rozszerzyć to Rowzawierające emotikony, aby zajmowały całą pozostałą przestrzeń pionową.

Jak widać w okienku drzewa widżetów na powyższym obrazku, Rowzawierające Emojiwidżety są drugim dzieckiem Column. Śmiało, kliknij Columnwidżet nadrzędny i przewiń w dół, aby zlokalizować go Roww eksploratorze układu. Teraz ustaw wartość flextego Rowjako 1. Ponieważ rodzicem tego Rowjest a Column, jego główna oś przebiega wzdłuż kierunku pionowego. Tak więc ustawienie flexas 1mówi Row, że może rozszerzać się w pionie, o ile na to Columnpozwala.

Chociaż udało nam się rozszerzyć rząd emotikonów w pionie, nadal emotikony nie znajdują się na środku zgodnie z oczekiwaniami. Dzieje się tak, ponieważ każdy Emojiwidżet Columnzawiera emoji Texti etykietę Textjako elementy podrzędne. Gdy rząd rozszerza się w pionie, kolumny również się rozszerzają, co można zobaczyć za pomocą prowadnic. Ale te elementy podrzędne są wyrównane w kierunku początku głównej osi Columnwidżetu, więc ich pozycja się nie zmienia. Jak pokazano na poniższym obrazku, możemy zmienić ich wyrównanie za pomocą Eksploratora układu. Kliknij Columnwidżet wewnątrz każdego Emojiwidżetu i zmień wyrównanie głównej osi na center.

Ponieważ jest to wymagane rozwiązanie, przejdźmy dalej i wprowadźmy niezbędne zmiany w kodzie.

class Emoji extends StatelessWidget {
  ....

  @override
  Widget build(BuildContext context) {
    return Column(
      
      // Add this line to align Emoji & Text to center
      mainAxisAlignment: MainAxisAlignment.center,

      children: [
        ...      
      ],
    );
  }
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {

  ...
              //Problem #2

              // Wrap the Row widget inside an expanded widget to 
              // expand vertically
              Expanded(
                child: Row(
                  
                  // Add spaceEvenly main axis alignment inside Row
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,

                  children: const [
                    Emoji('', 'Good'),
                    Emoji('', 'Average'),
                    Emoji('', 'Bad'),
                  ],
                ),
              ),
    ...
  }
}

• Widżety są opakowane wewnątrz Rowwidżetu , dzięki czemu mogą zajmować całą pozostałą przestrzeń pionową.EmojiExpanded
• mainAxisAlignment: MainAxisAlignment.spaceEvenlydodany do powyższego wiersza, aby Emojirównomiernie rozmieścić widżety w kierunku poziomym.
• mainAxisAlignment: MainAxisAlignment.centerdodany do Columnwidżetu Emojido środka, wyrównaj jego elementy potomne w pionie.

Problem z układem nr 3

Następnym zadaniem jest wymyślenie ciekawego przypadku braku poziomego dzielnika.

Sprawdzając drzewo widżetów, jak pokazano poniżej, widzimy, że chociaż Dividerwidżet jest obecny, nadal nie jest widoczny w interfejsie użytkownika. Jeśli klikniemy widżet i spojrzymy na Eksplorator układu, jego szerokość zostanie obliczona, 0.0ponieważ nie ma ograniczenia szerokości.

Śmiało i ustaw wartość flexas 1, aby podać ograniczenie szerokości i rozszerzyć się, aby zajmowało całą dostępną szerokość pliku Row.

Wprowadźmy niezbędne zmiany w kodzie, zawijając Dividerwewnątrz Expandedwidżet, jak pokazano poniżej:

// Problem #3
Row(
  children: const [
    // Wrap the Divider inside the Expanded widget
    // to provide width constrain
    Expanded(
      child: Divider(
        color: Colors.black,
      ),
    ),
  ],
),

Problem z układem nr 4

Ostatnim zadaniem, które pozostało pod ręką, jest wyśrodkowanie Submitprzycisku.

Ten problem można szybko rozwiązać, zmieniając wyrównanie głównej osi elementów podrzędnych w ostatnim Rowwidgecie. Kliknij widżet i wybierz centerz listy rozwijanej wyrównanie osi głównej, jak pokazano poniżej.

Przejdźmy dalej i wprowadźmy odpowiednie zmiany w kodzie.

// Problem #4
Row(
  // Add mainAxisAlignment as center
  mainAxisAlignment: MainAxisAlignment.center,

  children: [
    ElevatedButton(
      onPressed: () {
        debugPrint('Submit button pressed.');
      },
      child: const Text(
        'Submit',
      ),
    ),
  ],
),

Tak! Udało nam się uzyskać pożądany układ interfejsu użytkownika za pomocą narzędzia Flutter Inspector, które pomogło nam w wizualnym debugowaniu problemów.

W tym artykule skorzystaliśmy z narzędzia Flutter Inspector firmy DevTools, aby wizualnie debugować układ interfejsu użytkownika zawierający różne problemy. Zaczęliśmy od danego układu i zidentyfikowaliśmy różne problemy z układem, takie jak przepełniony tekst, nierówne odstępy między emotikonami, brak poziomego podziału i przycisk wysyłania, który nie jest wyśrodkowany. Korzystając z narzędzi dostarczonych w Flutter Inspector, rozwiązaliśmy te problemy, dokonaliśmy niezbędnych zmian w kodzie i ostatecznie uzyskaliśmy pożądany interfejs użytkownika.

Chcielibyśmy poznać Twoje doświadczenia z Flutter Inspector. Jeśli napotkałeś jakiekolwiek problemy podczas wykonywania tego ćwiczenia lub podczas uruchamiania narzędzia w swoim projekcie, możesz wspomnieć o tym w komentarzach, a my na pewno możemy się temu przyjrzeć. Ponadto, jeśli masz inne sugestie, dodaj je w komentarzach.

W pozostałych artykułach z tej serii omówiliśmy inne narzędzia dostępne w pakiecie DevTools, które mogą pomóc w tworzeniu wysokowydajnych aplikacji Flutter. Nie zapomnij sprawdzić poniższych linków, aby przejść do narzędzia, którego chcesz się nauczyć:

• Część 1: Wprowadzenie i instalacja
• Część 3: Narzędzie rozmiaru aplikacji
• Część 4: Widok sieci
• Część 5: Widok rejestrowania
• Część 6: Widok CPU Profiler
• Część 7: Widok pamięci
• Część 8: Widok wydajności

Specjalne podziękowania dla Kamala Shree (GDE — Dart & Flutter) za przejrzenie tego artykułu.