Słów kilka na temat Fluttera i list, czyli androidowego standardu
Lista? Aplikacja z listą? Brzmi cudownie! Jak wiele aplikacji znasz, w których nie znajduje się lista? Około 90% aplikacji posiada przynajmniej jedną listę na swoim pokładzie. Celowo mówię o liście, a nie o ListView ponieważ RecyclerView też może pełnić funkcję listy.
Skoro tutaj jesteś to zakładam, że wiesz czym jest jest Flutter, prawda? Dla przypomnienia “narzędzie do tworzenie natywnych interfejsów na urządzenia z systemem android i iOS” - pamiętałeś, prawda? Będziemy powoli zagłębiać się w temat, jeśli któryś moment przestanie być dla Ciebie jasny zawsze może mnie zapytać o dane zagadnienie oznaczając mnie przy swoim pytaniu pod tym artykułem. Lecimy!
Niezależnie czego używasz do pisania (Visual Code / Android Studio) nie powinieneś napotkać na większych problemów z wykonaniem tego zadania.
Ustalmy jaką strukturę będzie miał UI, który zaraz stworzysz:
Strona (Page)
Lista (List)
Element listy (Item)
Tekst
Grafika
Tekst
Ok, to teraz do dzieła!
Utwórz nowy projekt, jeśli wszystko pójdzie dobrze to Twoim oczom ukaże się domyślny kod z ekranem posiadającym jeden przycisk oraz pole z tekstem na środku ekranu.
Skasuj wszystko co znajduje się w klasie MyApp. Zaraz sam napiszesz tam swój kod, którego znaczenie będziesz rozumiał. Możemy też zmienić nazwę tej klasy, proponuję “TutorialApp”.
Jak zapewne już zauważyłeś musisz nadpisać metodę build(). Tylko po co? Czemu ona służy? Śpieszę z odpowiedzią na to pytanie. Jest to “element wyjścia” tego co tworzysz. Jeśli spróbujesz uruchomić teraz ten kod to uzyskasz informację o błędzie wyświetlaną w mało elegancki sposób na ekranie emulatora/symulatora. Aby pozbyć się tego błędu powinieneś sprawić, by funkcja ta zwracała np. MaterialApp - ponieważ rozszerza ono o Widget. Jak widzisz MaterialApp przyjmuje dwa argumenty “title” oraz “home”.
W “title” wpisz nazwę swojej aplikacji, w
home możesz teraz wpisać np. Text(“Witaj świecie!”). Sprawdź teraz jak wygląda to co do tej pory stworzyliśmy, sądzę że efekt Cię zaskoczy.
Wiem, że to co się dzieje może być nieco przerażające, ale zaraz załapiesz o co w tym chodzi. Teraz sprawisz, że tekst który się pokazał po zabiegach dokonanych do tej pory pojawi się na środku ekranu. Aby to zrobić musisz na chwilę pozbyć się naszego cudownego tekstu wpisanego w polu “home”, a w jego miejsce wpisz “Center”. Center posiada pole “child”, w jego wartości ustaw Text(“Ziemia nie jest płaska”) i sprawdź efekt na urządzeniu.
Teraz sprawisz, że interfejs który tworzysz nabierze nieco świeższego wyglądu - a przynajmniej będzie jaśniejszy. Aby to zrobić znowu musimy zmodyfikować napisany już kod, a dokładniej w miejsce “home” w “MaterialApp” wstaw “Scaffold”, tekst przenieść do pola “body” w “Scaffold”. Teraz pozostało sprawdzić jaki efekt otrzymałeś.
Udało Ci się uzyskać coś co nie powoduje już totalnego załamania gdy patrzysz na urządzenie. Brawo! Teraz dodasz do aplikacji pasek z jej nazwą. Aby to zrobić ustaw w polu “appBar” w “Scaffold” “AppBar”. “AppBar” posiada pole “title”, wpisz tam “Text(“Aplikacja lista”)”, po sprawie. Sprawdź!
Kolejny punkt na liście do zrobienia. Lista! Podmienisz teraz tekst, który pokazujesz na środku ekranu na listę. Aby to zrobić ładnie i wygodnie przejdź na sam dół dokumentu i utwórz tam nową klasę, którą rozszerzysz o “StatelessWidget”. Oczywiście musisz nadpisać metodę “build()” by kod przestał świecić na czerwono. To co będzie zwracać ta metoda to lista, a dokładniej “ListView”. “ListView” posiada builder, zdefiniujesz tam ilość elementów oraz to jak będą wyglądać elementy.
Ilość elementów niech będzie równa godzinie o czytasz ten artykuł - zawsze to jakieś urozmaicenie.
Aby ustawić wygląd swoich elementów musisz wpisać coś w pole “itemBuilder”, tym czymś jest kod “(context, rowNumber){}” - jeśli teraz zechcesz możesz wypisać numery jakie posiadają poszczególne elementy. Tutaj tego nie pokażę, ale jeśli Ci się uda to koniecznie pochwal się pod tym artykułem.
Teraz potrzebujemy dodać pojemnik na dane naszego elementu, czyli “Container”. Wrzuć go jako wartość zwracaną przez funkcję w “itemBuilder”. Nasz pojemnik posiada pole “child”, w to właśnie pole wstawimy nasze dane.
Jak wcześniej ustaliliśmy nasz element to [tekst, zdjęcie, tekst] czyli komórka danych, a we Flatturze to nawet “Column” z danymi jako pole “children”, którego wartość ustaw na “<Widget>[]”. Teraz wewnątrz tej tablicy możesz wpisać po przecinku Widgety jakie planowaliśmy dodać, będą to następująco: Text(“1”), Text(“2”), Text(“3”).
Teraz podmień środkowy Text na Image.network(“
https://bit.ly/2k43O3V ”) - tak, magia istnieje i obrazki pobierają się z Internetu same.
Żeby było ładnie możesz dorzucić trochę powietrza (padding) wokoło listy. Zrobisz to przez ustawienie polu “padding” wartości “EdgeInset.all(12.0)”
Efekt
Kod
import 'package:flutter/material.dart';
// void main() => runApp(new MyApp());
void main() => runApp(new TutorialApp());
class TutorialApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "Flutter tutorial",
home : new Scaffold(
appBar: new AppBar(title: new Text("Aplikacja lista")),
body: new Center(child: new MyList())));
}
}
class MyList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new ListView.builder(
itemCount: 20,
itemBuilder: (context, i) {
return new Column(
children: <Widget>[
new Container(
padding: new EdgeInsets.all(12.0),
child: new Column(
children: <Widget>[
new Text(
"Android.com.pl",
),
new Image.network("https://bit.ly/2k43O3V"),
new Text(
"Najlepsze forum na świecie!!",
)
],
),
),
],
);
},
);
}
}
To już wszystko na dzisiaj. Mam nadzieję, że wszystko działa tak jak powinno i jesteś zadowolony, że poświęciłeś swój czas na przeczytanie tego artykułu. Jeśli chodzą Ci po głowie jakieś pytania związane z tym tematem pytaj śmiało!
Specjalnie dla Android.com.pl
Łukasz Bednarczyk