Flutter - Είναι εύκολο να ξεκινήσετε

Από τη στιγμή που η Javascript εξελίχθηκε πολύ καλά, έχουμε συναντήσει υβριδικά πλαίσια κινητής εφαρμογής όπως το Ionic χρησιμοποιώντας το Angular. Στη συνέχεια, το React Native και το NativeScript μπήκαν στη σκηνή, που σας επέτρεψαν να δημιουργήσετε μη αυτόματες εφαρμογές για κινητά χωρίς Java ή Swift γνώση.

Το ιωνικό ήταν θεϊκή εφεύρεση στην αρχή, αλλά η React Native την ανέλαβε γρήγορα. Στη συνέχεια, η Telerik εισήγαγε το NativeScript, αλλά δεν έκανε μεγάλο αντίκτυπο κατά τη γνώμη μου.

Μπορούμε να δημιουργήσουμε κινητές εφαρμογές χωρίς αυτές τις επιλογές; Ω ναι! Αυτό το άρθρο θα σας οδηγήσει στην κατασκευή της πρώτης σας εφαρμογής Flutter (αν δεν έχετε ήδη ).

Το Flutter είναι το νέο πρόγραμμα alpha της Google που σας επιτρέπει να δημιουργείτε εγγενείς εφαρμογές. Λόγω του Flutter είναι ένα έργο άλφα, δεν προτείνεται για την ανάπτυξη της παραγωγής. (Αλλά ποιος νοιάζεται; ¯ \ _ (ツ) _ / ¯)

Στόχος: Εφαρμογή λίστας αγορών με Flutter & Firebase.

Τι χρειάζεστε για εγκατάσταση

Flutter: Εγκατάσταση πτερυγισμού από αυτόν τον σύνδεσμο. Μην ξεχάσετε να ακολουθήσετε τα βήματα εγκατάστασης, εγκαταστήστε επίσης τα plugins. Μπορούν να είναι πόνος στον κώλο αν παραλείψετε το

Xcode: Αν βρίσκεστε σε Mac, θα χρειαστείτε Xcode, τον οποίο μπορείτε να προμηθευτείτε από το κατάστημα εφαρμογών εδώ. Χρειάζεστε επίσης Xcode για να αναπτύξετε την πλευρά iOS της εφαρμογής Flutter.

Android Studio: Χρειάζεται σίγουρα αυτό να κάνει την ανάπτυξη της πλευράς Android της εφαρμογής Flutter. Πάρτε το από εδώ.

IDE: Έχω χρησιμοποιήσει το VSCode ως τον κύριο επεξεργαστή κειμένου μου και υπάρχουν Flutter & Dart plugins γι 'αυτό, αλλά συνιστώ ανεπιφύλακτα Intellij IDEA για Flutter ανάπτυξη. Έχει πλήρη εργαλεία για την ανάπτυξη μιας εφαρμογής Flutter. Έτσι πάρτε από εδώ.

Λήψη της εφαρμογής δείγματος που εκτελείται

Ξεκινήστε το IDE και κάντε κλικ στο Δημιουργία Νέου Έργου και, στη συνέχεια, επιλέξτε Flutter από τα αριστερά.

Όπως προανέφερα, αν παραλείψατε τα βήματα εγκατάστασης, ενδέχεται να μην μπορείτε να δείτε την επιλογή Flutter. Γυρίστε λοιπόν

Για όσους έλαβαν τη συμβουλή μου, ας στρέψουμε!

Συμπληρώστε τα υπόλοιπα όπως θέλετε.

Η επιλογή Java είναι προεπιλεγμένη για τη γλώσσα Android, αλλά άλλαξα τη γλώσσα iOS σε Swift επειδή δεν έχω ιδέα για το Objective-C, γι 'αυτό είναι η απόφασή σου να κάνεις.

Τώρα είστε έτοιμοι με εφαρμογή σκελετού. Καταργήστε ευγενικά όλες τις γραμμές σχολίων, επειδή δεν τους βρίσκω χρήσιμο. Επίσης, καταργήστε τη μέθοδο floatingActionButton, το περιεχόμενο του σώματος και τη μέθοδο _incrementCounter.

Τώρα έχετε ένα καθαρό ικρίωμα

Ας δημιουργήσουμε τη διεπαφή

Δημιουργήστε μια νέα τελική συμβολοσειρά στην κλάση και αντικαταστήστε τον τίτλο της εφαρμογής υλικού και τον τίτλο της αρχικής συσκευής. Επίσης, άλλαξα την ετικέτα χρώματος της εφαρμογής στο κόκκινο. Μου αρέσει !
Τώρα έχετε αυτή την ομορφιά σε λειτουργία

Στο _MyHomePageState, δημιουργήστε ένα τελικό TextEditingController, ο οποίος είναι ελεγκτής για πεδίο επεξεργάσιμου κειμένου.

τελικό TextEditingController _textController = new TextEditingController ();

στη συνέχεια, δημιουργήστε τη μέθοδο _handleSubmitted για να κάνετε εκπληκτικά πράγματα με την είσοδο του χρήστη

void _handleΑντιμετωπίστηκε (κείμενο κειμένου) {
    
}}

και ως τελικό, προσθέστε αυτόν τον κώδικα για να δημιουργήσετε δοχείο εισόδου στο κάτω μέρος.

Widget _createInputContainer () {
        επιστροφή νέου εμπορευματοκιβωτίου (
          περιθώριο: const EdgeInsets.symmetric (οριζόντια: 16.0),
          παιδί: νέα γραμμή (
            παιδιά:  [
              νέα ευέλικτη (
                παιδί: νέο TextField (
                    ελεγκτής: _textController,
                    onSubmitted: _handleSubmitted,
                    διακόσμηση: νέο InputDecoration.collapsed (
                        hintText: "Προσθέστε κάτι"),
                ),
            ),
            νέο εμπορευματοκιβώτιο (
                παιδί: νέο IconButton (
                    χρώμα: χρώμα,
                    εικονίδιο: νέο εικονίδιο (Icons.list),
                    onPressed: () {}),
            ),
            νέο εμπορευματοκιβώτιο (
                παιδί: νέο IconButton (
                    χρώμα: χρώμα,
                    εικονίδιο: νέο εικονίδιο (Icons.send),
                    onPressed: () {}),
            ),
        ],
    ),
) ·
}}

Κάνουμε καλό μέχρι τώρα !! Δημιουργήσαμε ένα εμπορευματοκιβώτιο για το στοιχείο εισόδου, πληκτρολογήστε το κουμπί και υποβάλετε το κουμπί κάπως. Οι ενεργοποιημένες λειτουργίες είναι κενές προς το παρόν, θα το επεξεργαστούμε αργότερα.

Τώρα ας επιστρέψουμε στο σώμα του Σκαλωσιού μας. Επεξεργαστείτε τον κώδικα σωμάτων ως εξής:

σώμα: νέα στήλη (
  παιδιά:  [
      νέα ευέλικτη (
          παιδί: νέος ListView.builder (
              padding: νέο EdgeInsets.all (8.0),
              αντίστροφη: ψευδής,
              itemBuilder: (_, int index) => null,
              itemCount: 1,
          ),
      ),
      νέος Διαχωριστής (ύψος: 1.0),
      νέο εμπορευματοκιβώτιο (
          διακόσμηση: νέο BoxDecoration (
              χρώμα: Theme.of (context) .cardColor),
          child: _createInputContainer (),
      ),
  ],
)

Εντάξει, τώρα το σώμα είναι σχεδόν έτοιμο. Έχουμε μια λίστα, έναν διαχωριστή μεταξύ των στοιχείων της λίστας και των στοιχείων εισόδου μας. Όπως μπορείτε να δείτε, χρησιμοποίησα το widget _createInputContainer () ως παιδί ενός κοντέινερ. Είναι ένας καλός τρόπος για να διατηρήσετε τον κώδικα σας καθαρό και οργανωμένο.

Πιστεύω ότι όλοι είστε καλοί μέχρι αυτό το σημείο

Πραγματικά ειλικρινά αυτό είναι το πρώτο μου σεμινάριο, έτσι είμαι κάπως ενθουσιασμένος. Δεν είμαι βέβαιος εάν ο τρόπος διδασκαλίας μου είναι κατανοητός αλλά πιστεύω ότι είναι

Ας μιλήσουμε για τα πράγματα που πρέπει να κάνουμε

  1. Δημιουργήστε μέσα από τη μέθοδο _handleSubmitted.
  2. Προσθέστε το κείμενο που υποβάλατε ως νέο στοιχείο λίστας και εμφανίστε τα.
  3. Κάντε τη λίστα μας φιλική προς τον χρήστη διαδραστική λίστα.
  4. Προσθήκη βάσης δεδομένων Firebase στο έργο.

Ας συνεχίσουμε!

Εάν σκεφτόμαστε μια συνηθισμένη εφαρμογή που χειρίζεται την είσοδο του χρήστη, το πρώτο πράγμα που εμφανίζεται στο μυαλό είναι να καθαρίσετε την είσοδο μετά την υποβολή

void _handleΑπόδειξε (String newItem) {
    _textController.clear ();
}}

και να τροποποιήσετε το κουμπί αποστολής ως

νέο εμπορευματοκιβώτιο (
    παιδί: νέο IconButton (
        χρώμα: χρώμα,
        εικονίδιο: νέο εικονίδιο (Icons.send),
        onPressed: () {
            _handleSubmitted (_textController.text) // τροποποιήστε το
        }),
),

τώρα οι χρήστες είναι σε θέση να υποβάλουν την είσοδο, και η εφαρμογή μπορεί να χειριστεί την είσοδο, ουσιαστικά καθαρίζει την περιοχή εισόδου μετά την υποβολή.

Τώρα θα δημιουργήσουμε ένα Widget που θα εμφανίζει στοιχεία λίστας. Πρώτα πρέπει να δημιουργήσουμε ένα widget που αντιπροσωπεύει ένα μοναδικό στοιχείο. Ας δημιουργήσουμε ένα StatelessWidget και ονομάζουμε το ListItem και το βάζουμε έξω από το _MyHomePageState.

class ListItem επεκτείνει το StatelessWidget {
    ListItem ({this.itemName});
    τελικός στοιχειοσειράς στοιχείοName;
    @καταπατώ
    Δημιουργία εικονιδίου widget (περιβάλλον BuildContext) {
    επιστροφή νέου εμπορευματοκιβωτίου (
        περιθώριο: const EdgeInsets.symmetric (κατακόρυφος: 10.0),
        
    ) ·
}}
}}

Σε ένα νέο εμπορευματοκιβώτιο, ορίσαμε συμμετρικό κατακόρυφο περιθώριο με τιμή 10,0 επειδή διαφορετικά στοιχεία λίστας θα φαίνονται πολύ κοντά το ένα στο άλλο. Θέλουμε κάποια δροσερά σκατά; Μην ανησυχείτε ότι θα προσθέσουμε περισσότερο στυλ αργότερα.

Στη συνέχεια, ως παιδικό στοιχείο θα προσθέσουμε ένα widget Row που θα εμφανίζει τα παιδιά του σε οριζόντιο πίνακα.

παιδί: νέα γραμμή (
    crossAxisAlignment: CrossAxisAlignment.start, // ωραία;)
     παιδιά:  [
         νέα στήλη (
             crossAxisAlignment: CrossAxisAlignment.start,
              παιδιά:  [
                  νέο εμπορευματοκιβώτιο (
                      child: νέο κείμενο (itemName), // αυτό είναι το όνομα στοιχείου
                   ),
              ],
          ),
     ],
),

Λοιπόν, ολόκληρος ο κώδικας για αυτό το γραφικό στοιχείο ListItem μοιάζει με αυτό:

class ListItem επεκτείνει το StatelessWidget {
    ListItem ({this.itemName});
    τελικός στοιχειοσειράς στοιχείοName;
    @καταπατώ
    Δημιουργία εικονιδίου widget (περιβάλλον BuildContext) {
        επιστροφή νέου εμπορευματοκιβωτίου (
            περιθώριο: const EdgeInsets.symmetric (κατακόρυφος: 10.0),
            παιδί: νέα γραμμή (
                crossAxisAlignment: CrossAxisAlignment.start,
                παιδιά:  [
                    νέα ευέλικτη (
                        νέα στήλη (
                        crossAxisAlignment: CrossAxisAlignment.start,
                        παιδιά:  [
                            νέο εμπορευματοκιβώτιο (
                                παιδί: νέο κείμενο (itemName),
                            ),
                    ),
                        ],
                    ),
                ],
            ),
        ) ·
    }}
}}

Εντάξει, τώρα ας επιστρέψουμε στο _MyHomePageState, προσθέστε αυτή τη γραμμή

τελικός κατάλογος  _shopItems =  [];

Προς το παρόν θα διατηρήσουμε τα στοιχεία της λίστας αγορών σε ένα widget λίστας. Ξέρω ότι μετά την έξοδο από την εφαρμογή, αυτή η λίστα θα είναι και πάλι κενή, γι 'αυτό έχουμε Firebase στη δική μας λίστα

Η όμορφη μέθοδος μας _handleSubmitted μας περιμένει. Χρειάζεται κάποια προσοχή σε αυτό το σημείο.

void _handleΑπόδειξε (String newItem) {
    _textController.clear ();
    αν (newItem.trim (). μήκος> 0) {
        ListItem listItem = νέο ListItem (
            itemName: newItem, // Αρχικοποιήστε το Widget μας ListItem και αναθέστε την είσοδο του χρήστη ως τιμή instance.
        ) ·
        setState (() {
            _shopItems.insert (0, listItem);
        });
        // Ενημερώστε το πλαίσιο ότι η εσωτερική κατάσταση αυτού του αντικειμένου έχει αλλάξει.
    }}
}}

Και ως τελευταίο βήμα αυτού του μέρους, πηγαίνετε στο ListView στο σώμα του κύριου widget μας

παιδί: νέος ListView.builder (
    padding: νέο EdgeInsets.all (8.0),
    αντίστροφη: ψευδής,
    itemBuilder: (_, int index) => _shopItems [index], // τροποποιήστε το
    itemCount: _shopItems.length, // να το τροποποιήσετε
),

Πριν από αυτή την τροποποίηση, είχαμε το σώμα λειτουργίας του itemBuilder ως null. Το τροποποιήσαμε για να δημιουργήσουμε στοιχείο λίστας σε δεδομένο ευρετήριο _shopItems και άλλαξαμε itemCount σε μήκος _shopItems.

Ας δοκιμάσουμε αυτό το ζωντανό:

Μόλις συνειδητοποίησα ότι χρησιμοποίησα μόνο το iPhone X για να δοκιμάσω την εφαρμογή. Εδώ είναι το στιγμιότυπο Google Pixel 2 XL από την εφαρμογή. Φαίνεται καταπληκτικά δροσερό

Υποθέτω ότι όλα δουλεύουν πολύ καλά εκτός από κάθε φορά που προσθέτω ένα καινούργιο αντικείμενο, προστίθεται νέο στοιχείο στην κορυφή. Θα το καταλάβω όταν εργάζομαι σε άλλα πράγματα

Θέλω να δώσω ένα διάλειμμα σε αυτό το άρθρο εδώ, γιατί δεν θέλω οι αναγνώστες να βαρεθούν κάνοντας τα πάντα σε ένα σεμινάριο. Πιστεύω ότι έχουμε κάνει κάποια ωραία πράγματα μέχρι εδώ

Στο επόμενο άρθρο, θα υλοποιήσουμε την ημερομηνία / ώρα, θα διαγράψουμε το στοιχείο, θα γίνει αντικείμενο, η βάση δεδομένων Firebase και οι συγκεκριμένες λίστες αγορών, όπως τα είδη μπάνιου ή τα είδη κουζίνας. Θα είναι διασκεδαστικό και έχετε τη δική μου λέξη για αυτό το

Όπως ανέφερα προηγουμένως, αυτό είναι το πρώτο μου σεμινάριο, έτσι παρακαλώ πείτε μου τις κριτικές και τις συστάσεις σας για αυτό. Θα ήθελα πολύ να ακούσω τις ισχυρές ή αδύναμες πλευρές μου να γράψω ένα σεμινάριο και θα βελτιώσω τον εαυτό μου σίγουρα !!

Ενώ διαβάζετε και εφαρμόζετε το σεμινάριο, εάν αντιμετωπίζετε προβλήματα με τον κωδικό μου ή τον κωδικό σας, μη διστάσετε να επικοινωνήσετε μαζί μου και θα προσπαθήσω να σας βοηθήσω.

Instagram | ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ