Co nowego we Flutterze 2?

W zeszłym roku napisałem tutaj dwa artykuły w Smashing Magazine o używaniu Fluttera na platformach internetowych i stacjonarnych. Pierwszy artykuł był ogólnym wprowadzeniem do tworzenia stron internetowych i komputerów stacjonarnych i skupiał się na tworzeniu responsywnego interfejsu użytkownika; drugi artykuł dotyczył wyzwań, jakie możesz napotkać, próbując opracować aplikację Flutter działającą na wielu platformach.

W tamtych czasach obsługa Fluttera dla platform niemobilnych nie była uważana przez zespół Flutter za stabilną i gotową do produkcji, ale teraz wszystko się zmieniło.

Flutter 2 jest tutaj

3 marca Google zorganizowało wydarzenie Flutter Engage, podczas którego uruchomiono Fluter 2.0. To wydanie jest naprawdę poprawną wersją 2.0, z wieloma zmianami obiecującymi, że Flutter będzie naprawdę gotowy do wyjścia poza tworzenie aplikacji mobilnych.

Zmiana, która jest kluczowa dla zrozumienia, dlaczego Flutter 2.0 ma znaczenie, polega na tym, że tworzenie stron internetowych jest teraz oficjalnie częścią stabilnego kanału, a wsparcie dla komputerów stacjonarnych wkrótce pojawi się również w stabilnym kanale. W rzeczywistości jest on obecnie dostępny w formie podobnej do wersji kandydującej do wydania jako migawka beta wczesnej wersji w kanale stabilnym.

W ogłoszeniu Google nie tylko podało wskazówkę, jaka będzie przyszłość Fluttera. Były również rzeczywiste przykłady tego, jak duże firmy już pracują nad aplikacjami Flutter, aby zastąpić istniejące aplikacje tymi, które działają lepiej i pozwalają programistom być bardziej produktywnymi. Np. największy na świecie producent samochodów, Toyota, będzie teraz budować system informacyjno-rozrywkowy w swoich samochodach za pomocą Fluttera.

Innym interesującym ogłoszeniem — tym, które pokazuje, jak szybko Flutter rozwija się jako wieloplatformowy SDK — jest ogłoszenie firmy Canonical, że oprócz rozwijania nowego instalatora Ubuntu przy użyciu Fluttera, będą również używać Fluttera jako domyślnej opcji do tworzenia aplikacji komputerowych.

Wydali również wersję Flutter motywu Yaru dla Ubuntu, której użyjemy w dalszej części artykułu do zbudowania aplikacji Flutter na komputer, która wygląda idealnie w domu na pulpicie Ubuntu, wykorzystując również kilka nowych funkcji Flutter. Możesz spojrzeć na ogłoszenie Google Flutter 2, aby uzyskać pełniejszy obraz.

Przyjrzyjmy się niektórym technicznym zmianom Fluttera , które weszły na stabilny kanał w wersji 2.0 i zbudujmy bardzo prostą przykładową aplikację desktopową z Flutterem, zanim wyciągniemy wnioski na temat konkretnych typów projektów, w których możemy i nie możemy używać Fluttera od Teraz.

Ogólne zmiany użyteczności dla większych urządzeń

Zgodnie z zapowiedzią, we Flutterze wprowadzono wiele zmian, aby zapewnić lepszą obsługę urządzeń, które nie są urządzeniami mobilnymi.

Na przykład oczywistym przykładem czegoś, co było potrzebne w aplikacjach webowych i desktopowych, a do tej pory musiało być wykonywane za pomocą pakietów innych firm lub przez implementację tego samodzielnie, jest pasek przewijania .

Teraz jest wbudowany pasek Scrollbar , który może zmieścić się bezpośrednio w Twojej aplikacji, dokładnie wyglądając jak pasek przewijania powinien wyglądać na konkretnej platformie: ze ścieżką lub bez, z możliwością przewijania na przykład poprzez kliknięcie w ścieżkę, która jest ogromne, jeśli chcesz, aby Twoi użytkownicy czuli się jak w domu od samego początku podczas korzystania z aplikacji Flutter. Możesz także motywować go i dostosowywać.

Wygląda też na to, że w pewnym momencie Flutter automatycznie pokaże odpowiednie paski przewijania , gdy zawartość aplikacji można przewijać.

W międzyczasie możesz po prostu owinąć dowolny przewijany widok wybranym widżetem paska przewijania i utworzyć ScrollController , który zostanie dodany jako controller zarówno dla paska przewijania, jak i przewijanego widżetu (w przypadku, gdy nigdy nie ScrollController , używasz dokładnie tak jak TextEditingController dla TextField ). Możesz zobaczyć przykład użycia zwykłego paska przewijania materiału nieco dalej w tym artykule w przykładzie aplikacji komputerowej.

Flutter Web Zmiany

Flutter dla sieci był już w całkiem użytecznej formie, ale występowały problemy z wydajnością i użytecznością, co oznaczało, że nigdy nie wydawał się tak dopracowany jak mobilny Flutter. Wraz z wydaniem Fluttera 2.0 wprowadzono wiele ulepszeń, zwłaszcza jeśli chodzi o wydajność .

Cel kompilacji, wcześniej bardzo eksperymentalny i trudny w użyciu do renderowania aplikacji (z WebAssembly i Skia), teraz nazywa się CanvasKit . Został udoskonalony, aby oferować spójne i wydajne wrażenia podczas przechodzenia od uruchamiania aplikacji Flutter natywnie na urządzeniach mobilnych do uruchamiania jej w przeglądarce.

Teraz Twoja aplikacja będzie domyślnie renderowana przy użyciu CanvasKit dla użytkowników Internetu na komputerach i z domyślnym mechanizmem renderowania HTML (który również został ulepszony, ale nie jest tak dobry jak CanvasKit) dla mobilnych użytkowników Internetu.

Jeśli próbowałeś używać Fluttera do tworzenia aplikacji internetowych, być może zauważyłeś, że posiadanie czegoś tak prostego jak hiperłącze nie było szczególnie intuicyjne. Teraz przynajmniej możesz tworzyć hiperłącza trochę bardziej, jak przy użyciu HTML, używając klasy Link .

W rzeczywistości nie jest to dodatek do samego Fluttera, ale niedawny dodatek do pakietu url_launcher firmy Google. Pełny opis i przykłady użycia klasy Link znajdziesz w oficjalnej dokumentacji API.

Zaznaczanie tekstu zostało ulepszone, ponieważ teraz punkt obrotu odpowiada miejscu, w którym użytkownik zaczął zaznaczać tekst, a nie lewej krawędzi wybranego SelectableText . Ponadto, teraz opcje Kopiuj/Wytnij/Wklej istnieją i działają poprawnie.

Niemniej jednak zaznaczanie tekstu nadal nie jest na najwyższym poziomie, ponieważ nie można zaznaczać tekstu w różnych widżetach SelectableText , a tekst do zaznaczania nadal nie jest domyślny, ale porozmawiamy o tym, a także o innych wybitnych wadach Fluttera (brak obsługi SEO , przede wszystkim) na zakończenie tego artykułu.

Zmiany na pulpicie Flutter

Kiedy w zeszłym roku pisałem o tworzeniu stron internetowych i desktopów za pomocą Fluttera, skupiłem się głównie na tworzeniu aplikacji webowych za pomocą Fluttera, biorąc pod uwagę, że tworzenie desktopów wciąż było uważane za bardzo eksperymentalne (nawet na kanale beta ). Teraz jednak wsparcie dla komputerów stacjonarnych Flutter wkrótce pojawi się po wsparciu sieciowym i będzie stabilne.

Wydajność i stabilność zostały znacznie ulepszone, a poprawa ogólnej użyteczności dla większych urządzeń obsługiwanych za pomocą myszy i klawiatury, które tak bardzo przynoszą korzyści aplikacjom internetowym, oznaczają również, że aplikacje komputerowe Flutter są teraz bardziej użyteczne.

Wciąż brakuje narzędzi dla aplikacji komputerowych i wciąż jest wiele poważnych, zaległych błędów, więc nie próbuj używać go do następnego projektu aplikacji komputerowej przeznaczonej do publicznej dystrybucji.

Przykładowa aplikacja komputerowa zbudowana za pomocą Flutter

Wsparcie dla komputerów stacjonarnych Flutter jest teraz dość stabilne i użyteczne, a na pewno będzie się poprawiać w przyszłości, tak samo jak Flutter jako całość ulepszyło się do tej pory, więc spróbujmy zobaczyć go w akcji ! Możesz pobrać cały przykładowy kod z repozytorium GitHub.

Aplikacja, którą zbudujemy, to bardzo prosta aplikacja. Mamy nawigację na pasku bocznym wraz z niektórymi elementami treści dla każdej z sekcji nawigacji.

Pierwszą rzeczą do zrobienia jest ustalenie zależności .

Przede wszystkim musisz mieć włączony program Flutter Desktop za pomocą polecenia

 flutter config --enable-${OS_NAME}-desktop

gdzie zamieniłbyś ${OS_NAME} na wybrany system operacyjny dla komputerów stacjonarnych, windows , linux lub macos . W tym przykładzie użyję Linuksa, biorąc pod uwagę, że będziemy używać motywu Ubuntu.

Istnieją również inne zależności potrzebne do zbudowania natywnych aplikacji dla każdej platformy, na przykład na Windows potrzebujesz Visual Studio 2019, na macOS potrzebujesz Xcode i CocoaPods, a aktualną listę zależności Linuksa możesz znaleźć na oficjalnej stronie Fluttera.

Następnie utwórz projekt Flutter, uruchamiając:

 flutter create flutter_ubuntu_desktop_example

Następnie musimy pobrać sam motyw (jedyna zależność naszej aplikacji), dodając yaru do dependencies Twojej aplikacji w pubspec.yaml (w katalogu głównym drzewa źródłowego):

 dependencies: yaru: ^0.0.0-dev.8 flutter: sdk: flutter

Następnie przejdźmy do lib/main.dart , gdzie znajduje się kod naszej aplikacji.

Najpierw importujemy potrzebne nam rzeczy. W tym przypadku po prostu zaimportujemy zwykłą bibliotekę Flutter Material Design i motyw Yaru (w tym przykładzie użyjemy tylko motywu jasnego, więc show tylko ten jeden obiekt w pakiecie Yaru):

 import 'package:flutter/material.dart'; import 'package:yaru/yaru.dart' show yaruLightTheme;

Zamiast mieć oddzielną klasę aplikacji, będziemy wywoływać wykonawców MaterialApp bezpośrednio w main podczas wywoływania runApp , więc tam ustawiamy motyw aplikacji, który będzie motywem Yaru, a dokładniej motywem świetlnym o nazwie yaruLightTheme :

 void main() => runApp(MaterialApp( theme: yaruLightTheme, home: HomePage(), ));

HomePage będzie StatefulWidget , przechowującym dane, które pokażemy, biorąc pod uwagę, że są niezmienne (pamiętaj, że widżety są zawsze niezmienne, zmienność jest obsługiwana w State StatefulWidget ):

 class HomePage extends StatefulWidget { final dataToShow = { "First example data": [ "First string in first list item", "Second in first", "Example", "One" ], "Second example": [ "This is another example", "Check", "It", "Out", "Here's other data" ], "Third example": [ "Flutter is", "really", "awesome", "and", "it", "now", "works", "everywhere,", "this", "is", "incredible", "and", "everyone", "should", "know", "about", "it", "because", "someone", "must", "be", "missing", "out", "on", "a lot" ] }.entries.toList(); @override createState() => HomePageState(); }

HomePageState to miejsce, w którym definiujemy interfejs użytkownika i zachowanie aplikacji. Przede wszystkim spójrzmy na drzewo widżetów, które chcemy zbudować (z wyłączeniem elementów listy i siatki oraz widżetów z odstępami):

Zamierzamy ograniczyć Column po lewej stronie (ta, która pokazuje kontrolki dla widżetów, które mają być wyświetlane po prawej stronie aplikacji) do określonej szerokości (na przykład 400 pikseli) za pomocą Container , podczas gdy GridView po prawej powinien być Expanded , aby wypełnić widok.

Po lewej stronie Row (w ramach Column ) ListView powinien rozwinąć się, aby wypełnić pionową przestrzeń poniżej Row przycisków u góry. W Row u góry musimy również rozwinąć TextButton (przycisk resetowania), aby wypełnić przestrzeń po prawej stronie lewego i prawego IconButton s.

Wynikowy HomePageState , który robi to wszystko, wraz z niezbędną logiką, aby pokazać właściwe rzeczy po prawej stronie, w zależności od tego, co użytkownik wybierze po lewej stronie, jest następujący:

 class HomePageState extends State<HomePage> { int selected = 0; ScrollController _gridScrollController = ScrollController(); incrementSelected() { if (selected != widget.dataToShow.length - 1) { setState(() { selected++; }); } } decrementSelected() { if (selected != 0) { setState(() { selected--; }); } } @override Widget build(BuildContext context) { return Scaffold( body: Row( children: [ Container( color: Colors.black12, width: 400.0, child: Column( children: [ Row( children: [ IconButton( icon: Icon(Icons.chevron_left), onPressed: decrementSelected, ), IconButton( icon: Icon(Icons.chevron_right), onPressed: incrementSelected, ), Expanded( child: Center( child: TextButton( child: Text("Reset"), onPressed: () => setState(() => selected = 0), ), )) ], ), Expanded( child: ListView.builder( itemCount: widget.dataToShow.length, itemBuilder: (_, i) => ListTile( title: Text(widget.dataToShow[i].key), leading: i == selected ? Icon(Icons.check) : Icon(Icons.not_interested), onTap: () { setState(() { selected = i; }); }, ), ), ), ], )), Expanded( child: Scrollbar( isAlwaysShown: true, controller: _gridScrollController, child: GridView.builder( controller: _gridScrollController, itemCount: widget.dataToShow[selected].value.length, gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 200.0), itemBuilder: (_, i) => Container( width: 200.0, height: 200.0, child: Padding( padding: const EdgeInsets.all(8.0), child: Card( child: Center( child: Text(widget.dataToShow[selected].value[i])), ), ), )), ), ), ], ), ); } }

i gotowe!

Następnie budujesz swoją aplikację za pomocą

 flutter build ${OS_NAME}

gdzie ${OS_NAME} to nazwa twojego systemu operacyjnego, ta sama, której użyłeś wcześniej, aby umożliwić tworzenie pulpitu Flutter przy użyciu flutter config .

Skompilowany plik binarny do uruchomienia Twojej aplikacji będzie

 build/linux/x64/release/bundle/flutter_ubuntu_desktop_example

na Linuksie i

 build\windows\runner\Release\flutter_ubuntu_desktop_example.exe

w systemie Windows możesz to uruchomić, a otrzymasz aplikację, którą pokazałem na początku tej sekcji.

W systemie macOS musisz otworzyć macos/Runner.xcworkspace w Xcode, a następnie użyć Xcode do skompilowania i uruchomienia aplikacji.

Inne zmiany w trzepotaniu

Wprowadzono również kilka zmian, które również wpływają na rozwój urządzeń mobilnych we Flutterze, a oto tylko krótki wybór niektórych z nich.

Funkcja, której tak wielu z nas, programistów Flutter, pragnęło, to lepsza obsługa reklam AdMob , która została w końcu dołączona do oficjalnego pakietu google_mobile_ads . Innym jest autocomplete ; istnieje dla niego widżet materiału Autocomplete , a także bardziej konfigurowalny widżet RawAutocomplete .

Dodanie Link , o którym mówiliśmy w sekcji poświęconej tworzeniu stron internetowych, w rzeczywistości dotyczy wszystkich platform , mimo że jego efekty najbardziej odczują osoby pracujące nad projektami internetowymi Fluttera.

Ostatnie zmiany w języku Dart

Ważne jest, aby zdawać sobie sprawę ze zmian wprowadzonych w języku Dart, które wpływają na rozwój aplikacji Flutter.

W szczególności Dart 2.12 przyniósł obsługę interoperacyjności w języku C (opisany szczegółowo i z instrukcjami dla różnych platform na oficjalnej stronie Flutter); ponadto do stabilnego kanału wydania Dart dodano dźwięk null-safety .

null-safety

Największą zmianą wprowadzoną w Dart jest wprowadzenie dźwięku null-safety , który otrzymuje coraz większe wsparcie z pakietów innych firm, a także z bibliotek i pakietów opracowanych przez Google.

Bezpieczeństwo Null zapewnia optymalizacje kompilatora i zmniejsza ryzyko wystąpienia błędów w czasie wykonywania, więc nawet jeśli obecnie jest to opcjonalne, należy zacząć przynajmniej rozumieć, jak sprawić, by Twoja aplikacja była bezpieczna dla wartości null.

Jednak w tej chwili może to nie być dla Ciebie opcją, ponieważ nie wszystkie pakiety Pub są w pełni bezpieczne dla null, co oznacza, że ​​jeśli potrzebujesz jednego z tych pakietów dla swojej aplikacji, nie będziesz w stanie skorzystać z korzyści na zerowe bezpieczeństwo.

Zabezpieczanie Twojej aplikacji null-safe

Jeśli kiedykolwiek pracowałeś z Kotlinem, podejście Darta do zerowego bezpieczeństwa będzie ci trochę znajome. Zajrzyj do oficjalnego przewodnika Darta, aby uzyskać pełniejszy przewodnik po null-safety Darta.

Wszystkie typy, które znasz ( String , int , Object , List , twoje własne klasy itp.) są teraz nie dopuszczające wartości null: ich wartość nigdy nie może być null .

Oznacza to, że funkcja, która ma typ zwracany nie dopuszczający wartości null, musi zawsze zwracać wartość , w przeciwnym razie otrzymasz błąd kompilacji i zawsze będziesz musiał zainicjować zmienne, które nie dopuszczają wartości null, chyba że jest to zmienna lokalna, do której wcześniej przypisana jest wartość jest zawsze używany.

Jeśli chcesz, aby zmienna miała wartość null, musisz dodać znak zapytania na końcu nazwy typu, np. podczas deklarowania liczby całkowitej w następujący sposób:

 int? a = 1

W dowolnym momencie możesz ustawić ją na null , a kompilator nie będzie z tego powodu płakał.

A co, jeśli masz wartość dopuszczającą wartość null i użyj jej do czegoś, co wymaga wartości niepodlegającej wartości null? Aby to zrobić, możesz po prostu sprawdzić, czy nie jest null:

 void function(int? a) { if(a != null) { // a is an int here } }

Jeśli wiesz ze 100% pewnością, że zmienna istnieje i nie jest pusta, możesz po prostu użyć ! operator, w ten sposób:

 String unSafeCode(String? s) => s!;

Wyciąganie wniosków: co możemy zrobić z Flutter 2?

Ponieważ Flutter wciąż się rozwija, jest coraz więcej rzeczy, które możemy z nim zrobić, ale nadal nie jest rozsądne mówienie, że Flutter może być używany do dowolnego projektu tworzenia aplikacji.

Po stronie mobilnej jest mało prawdopodobne, że natkniesz się na coś, w czym Flutter nie jest świetny, ponieważ jest wspierany od samego początku i dopracowany. Większość rzeczy, których będziesz potrzebować, już tam jest.

Z drugiej strony nie ma jeszcze sieci i pulpitu.

Pulpit nadal jest nieco błędny , a aplikacje dla systemu Windows (które są ważną częścią tworzenia pulpitu) nadal wymagają wiele pracy, zanim będą dobrze wyglądać. Sytuacja jest lepsza na Linuksie i macOS tylko do pewnego stopnia.

Sieć jest w znacznie lepszym miejscu niż komputer . Możesz tworzyć przyzwoite aplikacje internetowe, ale nadal ograniczasz się głównie do aplikacji jednostronicowych i progresywnych aplikacji internetowych. Nadal z pewnością nie chcemy go używać w aplikacjach zorientowanych na treść, w których potrzebna jest indeksowalność i SEO.

Aplikacje zorientowane na treść prawdopodobnie nie będą tak świetne, ponieważ wybór tekstu nadal nie jest na najwyższym poziomie, jak widzieliśmy w sekcji o obecnym stanie Fluttera dla sieci.

Jeśli jednak potrzebujesz internetowej wersji swojej aplikacji Flutter, Flutter dla sieci prawdopodobnie będzie w porządku, zwłaszcza że istnieje już ogromna liczba pakietów kompatybilnych z siecią, a lista stale rośnie.

Dodatkowe zasoby

• Przemówienie (Flutter Engage), YouTube
• Co nowego we Flutter 2, Flutter, Medium
• Zrozumienie null safety , Dart.dev
• Responsywne tworzenie stron internetowych i pulpitów za pomocą Flutter, Smashing Magazine
• Rozwiązywanie typowych problemów między platformami podczas pracy z Flutter, Smashing Magazine