Flutter - könnyű az indulás

Mivel a Javascript nagyon jól fejlődött, találkoztunk olyan hibrid mobil alkalmazási keretekkel, mint például az Ionic, az Angular segítségével. Ezután a React Native és a NativeScript lépett a színpadra, amelyek lehetővé teszik natív mobilalkalmazások készítését Java vagy Swift ismerete nélkül.

Az Ionic eleinte isteni jellegű találmány volt, ám a React Native gyorsan átvette azt. Aztán Telerik bemutatta a Nativecriptet, de véleményem szerint ez nem gyakorolt ​​nagy hatást.

Felépíthetnénk mobil alkalmazásokat ezen lehetőségek nélkül? Naná! Ez a cikk vezeti Önt az első Flutter alkalmazás elkészítéséhez (ha még nem ).

A Flutter a Google új alfa projektje, amely lehetővé teszi natív alkalmazások készítését. Mivel a Flutter egy alfa projekt, nem javasoljuk a termelés fejlesztésére (de ki érdekli? ¯ \ _ (ツ) _ / ¯)

Cél: Bevásárlólista alkalmazás a Flutter & Firebase segítségével.

Amit telepíteni kell

Flutter: Telepítse a csapkodást erről a linkről. Ne felejtsd el követni a telepítési lépéseket, és telepítsd a plugineket is. Fájdalom lehet a seggben, ha átugorja

Xcode: Ha Mac számítógépen van, akkor szüksége lesz Xcode-ra, amelyet itt tölthet le az App Store-ból. Szüksége van Xcode-ra is a Flutter alkalmazás iOS oldalának fejlesztéséhez.

Android Studio: Ehhez feltétlenül szükség van a Flutter alkalmazás Android oldalának fejlesztésére. Szerezd meg innen.

IDE: A VSCode-ot használtam fő szöveges szerkesztőként, és vannak Flutter & Dart plugins ehhez, de nagyon ajánlom az Intellij IDEA-t a Flutter fejlesztéséhez. Teljes eszközökkel rendelkezik a Flutter alkalmazás fejlesztéséhez. Tehát szerezd innen.

A mintaalkalmazás futtatása

Indítsa el az IDE-t, majd kattintson az Új projekt létrehozása elemre, majd válassza a bal oldali Flutter lehetőséget.

Mint már korábban mondtam, ha kihagyja a telepítési lépéseket, akkor előfordulhat, hogy nem látja a Flutter opciót. Tehát menj vissza

Azok számára, akik figyelembe vették a tanácsomat, menjünk tovább!

Töltse meg a többi cuccot, ahogy szeretné.

Az Android nyelv alapértelmezésben a Java opció, de az iOS nyelvét Swiftre váltottam, mert fogalmam sincs a Objective-C-ről, tehát ez az Ön döntése.

Most már készen áll a csontváz alkalmazásra. Kérjük, távolítsa el az összes megjegyzés sort, mert nem találom hasznosnak. Távolítsa el a floatingActionButton, a testtartalom és az _incrementCounter módszert is.

Most tiszta állvány van

Hozzuk létre a felületet

Hozzon létre egy új végső karakterláncot az osztályban, és cserélje ki az Material App és az otthoni eszköz címét. Az alkalmazás színmintáját pirosra is cseréltem. Tetszik !
Most már készen állsz ennek a szépségnek a futtatására

A _MyHomePageState alkalmazásban hozzon létre egy végleges TextEditingController alkalmazást, amely a szerkeszthető szövegmező vezérlője.

final TextEditingController _textController = új TextEditingController ();

majd hozzon létre _handleSubmissions metódust, hogy csodálatos dolgokat csináljon a felhasználói bevitellel

void _handleSubmissions (szöveges szöveg) {
    
}

és végül adjuk hozzá ezt a kódot, hogy alul hozzunk létre egy bemeneti tárolót.

_CreateInputContainer () {
        új konténer visszaadása (
          margin: const EdgeInsets.symmetric (vízszintes: 16.0),
          gyermek: új sor (
            gyermekek:  [
              új rugalmas (
                gyermek: új TextField (
                    vezérlő: _textController,
                    onSubmissions: _handleSubmissions,
                    dekoráció: új InputDecoration.collapsed (
                        hintText: "Adj hozzá valamit"),
                ),
            ),
            új konténer (
                gyerek: új IconButton (
                    szín: Colors.red,
                    ikon: új ikon (Icons.list),
                    onPressed: () {}),
            ),
            új konténer (
                gyerek: új IconButton (
                    szín: Colors.red,
                    ikon: új ikon (Icons.send),
                    onPressed: () {}),
            ),
        ],
    ),
);
}

Eddig jól csinálunk !! Készítettünk egy tárolót a bemeneti elemhez, a list gombhoz és a beküldési gombhoz. onPressed funkciók jelenleg üresek, később dolgozunk rajta.

Most térjünk vissza az állványunk testéhez. Szerkessze a testkódot így:

test: új oszlop (
  gyermekek:  [
      új rugalmas (
          gyermek: új ListaView.builder (
              párnázás: új EdgeInsets.all (8.0),
              fordított: hamis,
              itemBuilder: (_, int index) => null,
              itemCount: 1,
          ),
      ),
      új elválasztó (magasság: 1,0),
      új konténer (
          dekoráció: új BoxDecoration (
              szín: Theme.of (kontextus) .cardColor),
          gyermek: _createInputContainer (),
      ),
  ],
)

Rendben, a test már majdnem kész. Van egy lista, elválasztó a tételek és a bemeneti elemek között. Mint láthatja, a _createInputContainer () modult a tároló gyermekeként használtam. Ez egy jó módszer a kód tisztaságának és szervezésének megőrzésére.

Úgy gondolom, hogy mindannyian jók vagytok ezen a pontig

Nos, őszintén szólva ez az első bemutatóm, tehát nagyon izgatott vagyok. Nem vagyok biztos benne, érthető-e az oktatási módszereim, ám hiszem, hogy

Beszéljünk a tennivalókról

  1. Hozzon létre egy _handleSubmissions metódust.
  2. Adja hozzá a benyújtott szöveget új listaelemként, és jelenítse meg őket.
  3. Tedd listánkat felhasználóbarát, interaktív listává.
  4. Adja hozzá a Firebase adatbázist a projekthez.

Tegyük fel!

Ha egy közönséges alkalmazásra gondolunk, amely kezeli a felhasználói bemeneteket, akkor az első dolog, ami a fejében felbukkan, az az, hogy elküldjük a bevitelt, submit

void _handleSubmissions (String newItem) {
    _textController.clear ();
}

és módosítsa a Küldés gombot mint

új konténer (
    gyerek: új IconButton (
        szín: Colors.red,
        ikon: új ikon (Icons.send),
        onPressed: () {
            _handleSubmissions (_textController.text) // módosítsa ezt
        }),
),

most a felhasználók képesek benyújtani a bemenetet, és az alkalmazás képes kezelni a bemenetet, alapvetően törli a beviteli területet a beküldés után.

Most létrehozunk egy widget-et, amely megjeleníti a lista elemeit. Először el kell készítenünk egy elemet ábrázoló modult. Hozzunk létre egy StatelessWidget-et, nevezjük el ListItem-nek, és tegyük a _MyHomePageState-en kívül.

A ListItem osztály kibővíti a StatelessWidget {
    Listitem ({this.itemName});
    final String itemName;
    @override
    Widget felépítése (BuildContext kontextus) {
    új konténer visszaadása (
        margin: const EdgeInsets.symmetric (függőleges: 10.0),
        
    );
}
}

Egy új tárolóban szimmetrikus függőleges margót állítottunk be, 10,0 értékkel, mert különben a listaelemek túl közel állnának egymáshoz. Szeretnénk némi szart? Ne aggódjon, később további stílusokat adunk hozzá.

Ezután gyermek elemként hozzáadunk egy Sor widgetet, amely a gyermekeit vízszintes tömbben jeleníti meg.

gyermek: új sor (
    crossAxisAlignment: CrossAxisAlignment.start, // a kedves;)
     gyermekek:  [
         új oszlop (
             crossAxisAlignment: CrossAxisAlignment.start,
              gyermekek:  [
                  új konténer (
                      gyermek: új szöveg (elemnév), // ez az elem neve
                   ),
              ],
          ),
     ],
),

Nos, a ListItem widget teljes kódja így néz ki:

A ListItem osztály kibővíti a StatelessWidget {
    Listitem ({this.itemName});
    final String itemName;
    @override
    Widget felépítése (BuildContext kontextus) {
        új konténer visszaadása (
            margin: const EdgeInsets.symmetric (függőleges: 10.0),
            gyermek: új sor (
                crossAxisAlignment: CrossAxisAlignment.start,
                gyermekek:  [
                    új rugalmas (
                        új oszlop (
                        crossAxisAlignment: CrossAxisAlignment.start,
                        gyermekek:  [
                            új konténer (
                                gyermek: új szöveg (itemName),
                            ),
                    ),
                        ],
                    ),
                ],
            ),
        );
    }
}

Rendben, térjünk vissza a _MyHomePageState-hez, add hozzá ezt a sort

végleges lista  _shopItems =  [];

Jelenleg a bevásárlólista elemeit egy Lista widgetben tároljuk. Tudom, hogy az alkalmazásból való kilépés után ez a lista ismét üres lesz, ezért van a Firebase a teendők listáján

Kedves _handleSubnote módszerünk vár ránk. Ezen a ponton némi figyelmet igényel.

void _handleSubmissions (String newItem) {
    _textController.clear ();
    if (newItem.trim (). hossz> 0) {
        ListItem listItem = új ListItem (
            itemName: newItem, // Inicializálja a ListItem widgetet, és rendelje hozzá a felhasználó bemeneti példányértékét.
        );
        setState (() {
            _shopItems.insert (0, listItem);
        });
        // Értesítse a keretet, hogy az objektum belső állapota megváltozott.
    }
}

És ennek a résznek az utolsó lépéseként ugorjon a ListaView testre, a fő widgetre

gyermek: új ListaView.builder (
    párnázás: új EdgeInsets.all (8.0),
    fordított: hamis,
    itemBuilder: (_, int index) => _shopItems [index], // módosítsa ezt
    itemCount: _shopItems.length, // módosítsa ezt
),

Ez a módosítás előtt az itemBuilder funkcionális része nulla volt. Módosítottuk, hogy lista elemet építsünk a _shopItems adott indexére, és az itemCount-ot a _shopItems hosszára változtattuk.

Próbáljuk ezt élőben:

Most rájöttem, hogy csak az iPhone X-et használtam az alkalmazás tesztelésére. Itt van a Google Pixel 2 XL pillanatképe az alkalmazásból. Az átkozottul jónak tűnik

Azt hiszem, minden nagyon jól működik, kivéve, ha új elemet adok hozzá, új elemet adnak a tetejére. Kitalálom, miközben más dolgokat dolgozom fel

Itt szeretnék szünetet tartani a cikkről, mert nem akarom, hogy az olvasók unatkozzanak azzal, hogy mindent egy oktatóprogramban végeznek. Úgy gondolom, hogy ide értünk néhány jó dolgot

A következő cikkben végrehajtjuk a dátumot és az időt, töröljük az elemet, beállítottuk az elemet, a Firebase adatbázist és a meghatározott bevásárló listákat, például fürdőszoba vagy konyhai dolgokat. Nagyon szórakoztató lesz, és megvan a szavam erre

Mint már említettem, ez az első bemutatóm, ezért kérlek, mondja el véleményét és ajánlásait róla. Szeretném hallani az oktatóanyagok erős vagy gyenge oldalaimat, és biztosan javulni fogok magam !!

Az oktatóanyag olvasása és alkalmazása során, ha bármilyen problémája merül fel a kódommal vagy a kóddal kapcsolatban, bátran forduljon hozzám, és mindent megteszek, hogy segítsek.

Instagram | Email