Flutter - Лесно е да започнете

Тъй като Javascript се разви много добре, ние се срещнахме с хибридни рамки за мобилни приложения като Ionic, използвайки Angular. Тогава React Native и NativeScript се качиха на сцената, което ви позволява да правите местни мобилни приложения без знания на Java или Swift.

Йоний беше богоподобно изобретение в началото, но React Native го пое бързо. Тогава Telerik представи NativeScript, но това не оказа голямо влияние според мен.

Можем ли да изградим мобилни приложения без тези опции? По дяволите да! Тази статия ще ви накара да изградите първото си приложение Flutter (ако вече не сте ).

Flutter е новият алфа проект на Google, който ви позволява да създавате собствени приложения. Тъй като Flutter е алфа проект, той не е предложен за развитие на производството. (Но на кого му пука? ¯ \ _ (ツ) _ / ¯)

Цел: Приложение за списък за пазаруване с Flutter & Firebase.

Какво трябва да инсталирате

Flutter: Инсталирайте трептене от тази връзка. Не забравяйте да следвате стъпките за инсталиране, също така инсталирайте приставките. Те могат да бъдат болка в задника, ако пропуснете

Xcode: Ако сте на Mac, ще ви трябва Xcode, който можете да получите от магазина за приложения тук. Вие също се нуждаете от Xcode, за да развиете iOS страна на вашето приложение Flutter.

Android Studio: Определено имате нужда от това, за да разработите Android страна на вашето приложение Flutter. Вземете го от тук.

IDE: Използвах VSCode като основен текстов редактор и за него има плъгини Flutter & Dart, но горещо препоръчвам Intellij IDEA за разработка на Flutter. Той има пълни инструменти за разработване на Flutter приложение. Затова го вземете от тук.

Първи примерното приложение работи

Стартирайте IDE и щракнете върху Create New Project, след което изберете Flutter отляво.

Както казах преди, ако прескочите стъпките на инсталацията, може да не успеете да видите опцията Flutter. Затова се върнете back

За тези, които ме посъветваха, нека да продължим!

Попълнете останалите неща по ваше желание.

Опцията Java е по подразбиране за Android език, но аз превключих езика на iOS на Swift, защото нямам представа за Objective-C, така че това е вашето решение.

Сега вече сте готови със скелетно приложение. Моля, премахнете всички редове за коментари, защото не ги намирам за полезни. Също така премахнете floatingActionButton, съдържание на тялото и метод _incrementCounter.

Сега имате чисто скеле

Да създадем интерфейса

Създайте нов финален низ в класа и заменете заглавието на Material App и заглавието на домашната джаджа. Също така промених цвета на приложението на червен. Харесва ми !
Сега имате тази красота и работи running

В _MyHomePageState създайте окончателен TextEditingController, който е контролер за редактируемо текстово поле.

окончателен TextEditingController _textController = нов TextEditingController ();

след това създайте _handleSubmitted метод, за да правите невероятни неща с въвеждане на потребител

void _handleSubmitted (String text) {
    
}

и като окончателен, добавете този код, за да създадете входен контейнер в долната част.

Widget _createInputContainer () {
        върнете нов контейнер (
          марж: const EdgeInsets.симетричен (хоризонтален: 16.0),
          дете: нов ред (
            деца: <Джаджа> [
              нов гъвкав (
                дете: ново TextField (
                    контролер: _textController,
                    onSubmitted: _handleSubmitted,
                    декорация: нов InputDecoration.collapsed (
                        hintText: "Добавете нещо"),
                ),
            ),
            нов контейнер (
                дете: нов IconButton (
                    цвят: цветове.ред,
                    икона: нова икона (Icons.list),
                    onPress: () {}),
            ),
            нов контейнер (
                дете: нов IconButton (
                    цвят: цветове.ред,
                    икона: нова икона (Icons.send),
                    onPress: () {}),
            ),
        ],
    ),
);
}

Досега се справяме добре !! Създадохме контейнер за входен елемент, бутон за списък и бутон за въвеждане. onPress функциите са празни за сега, ще работим върху него по-късно.

Сега да се върнем към тялото на скелето ни. Редактирайте кода на тялото така:

тяло: нова колона (
  деца: <Джаджа> [
      нов гъвкав (
          дете: нов ListView.builder (
              подплънки: нов EdgeInsets.all (8.0),
              обратна: невярна,
              itemBuilder: (_, int индекс) => null,
              itemCount: 1,
          ),
      ),
      нов разделител (височина: 1.0),
      нов контейнер (
          декорация: нов BoxDecoration (
              цвят: Theme.of (контекст) .cardColor),
          дете: _createInputContainer (),
      ),
  ],
)

Добре, сега тялото е почти готово. Имаме списък, разделител между елементите от списъка и нашите входни елементи. Както можете да видите използвах джаджа _createInputContainer () като дете на контейнер. Това е хубав начин да поддържате кода си чист и организиран.

Вярвам, че всички сте добри до този момент

Ами честно казано това е първият ми урок винаги, така че съм развълнуван. Не съм сигурен дали начинът ми на преподаване е разбираем, но вярвам, че е

Нека да поговорим за нещата, които трябва да се правят

  1. Създайте вътре в _handleSubmitted метод.
  2. Добавете изпратения текст като нов елемент от списъка и ги покажете.
  3. Направете нашия списък потребителски приятелски интерактивен списък.
  4. Добавете база данни на Firebase към проекта.

Да се ​​пуснем!

Ако мислим за обикновено приложение, което се справя с въвеждането на потребителя, първото нещо, което се появява в ума, е ясно въвеждането след изпращане

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

и променете бутона за изпращане като

нов контейнер (
    дете: нов IconButton (
        цвят: цветове.ред,
        икона: нова икона (Icons.send),
        onPress: () {
            _handleSubmitted (_textController.text) // променете това
        }),
),

сега потребителите са в състояние да изпратят входа и приложението може да се справи с въвеждането, основно изчиства областта на въвеждане след изпращане.

Сега ще създадем джаджа, която показва елементи от списъка. Първо трябва да създадем джаджа, която представлява единичен елемент. Нека да създадем Widget без държава и да го кръстим ListItem и да го поставим извън _MyHomePageState.

class ListItem разширява StatelessWidget {
    Редовете ({this.itemName});
    final String itemName;
    @override
    Изграждане на приспособления (контекст на BuildContext) {
    върнете нов контейнер (
        марж: const EdgeInsets.symmetric (вертикална: 10.0),
        
    );
}
}

В нов контейнер поставихме симетричен вертикален марж със стойност 10.0, защото в противен случай елементите от списъка ще изглеждат твърде близо един до друг. Искаме малко готино лайно, а? Не се притеснявайте, че ще добавим още стайлинг по-късно.

След това като дъщерен елемент ще добавим джаджа Row, която показва нейните деца в хоризонтален масив.

дете: нов ред (
    crossAxisAlignment: CrossAxisAlignment.start, // нейното хубаво;)
     деца: <Джаджа> [
         нова колона (
             crossAxisAlignment: CrossAxisAlignment.start,
              деца: <Джаджа> [
                  нов контейнер (
                      дете: нов текст (itemName), // това е име на елемент
                   ),
              ],
          ),
     ],
),

Е, целият код за тази джаджа ListItem изглежда така:

class ListItem разширява StatelessWidget {
    Редовете ({this.itemName});
    final String itemName;
    @override
    Изграждане на приспособления (контекст на BuildContext) {
        върнете нов контейнер (
            марж: const EdgeInsets.symmetric (вертикална: 10.0),
            дете: нов ред (
                crossAxisAlignment: CrossAxisAlignment.start,
                деца: <Джаджа> [
                    нов гъвкав (
                        нова колона (
                        crossAxisAlignment: CrossAxisAlignment.start,
                        деца: <Джаджа> [
                            нов контейнер (
                                дете: нов текст (itemName),
                            ),
                    ),
                        ],
                    ),
                ],
            ),
        );
    }
}

Добре, сега да се върнем към _MyHomePageState, добавете този ред

окончателен списък  _shopItems =  [];

Засега ще държим елементи от списъка за пазаруване в джаджа List. Знам, че след излизане от приложението този списък отново ще бъде празен, затова имаме Firebase в нашия списък със задачи

Нашият прекрасен метод _handleSubmitted ни очаква. В този момент се нуждае от известно внимание.

void _handleSubmitted (String newItem) {
    _textController.clear ();
    ако (newItem.trim (). дължина> 0) {
        ListItem listItem = нов ListItem (
            itemName: newItem, // Инициализирайте нашия джаджа ListItem и задайте потребителския вход като стойност на инстанцията.
        );
        setState (() {
            _shopItems.insert (0, listItem);
        });
        // Уведомете рамката, че вътрешното състояние на този обект се е променило.
    }
}

И като последна стъпка на тази част, отидете на ListView в тялото на основната ни джаджа

дете: нов ListView.builder (
    подплънки: нов EdgeInsets.all (8.0),
    обратна: невярна,
    itemBuilder: (_, int index) => _shopItems [индекс], // променете това
    itemCount: _shopItems.length, // променете това
),

Преди тази модификация имахме функционалното тяло на itemBuilder като нищожно. Ние го модифицирахме, за да изградим списък със зададен индекс на _shopItems и променихме itemCount на дължина _shopItems.

Нека опитаме това на живо:

Току-що разбрах, че използвах само iPhone X за тестване на приложението. Ето снимка на Google Pixel 2 XL от приложението. Изглежда дяволски готино

Предполагам, че всичко работи много добре, освен когато добавям нов елемент, в началото се добавя нов елемент. Ще го разбера, докато работя върху други неща

Искам да направя почивка на тази статия тук, защото не искам читателите да се отегчават, като правят всичко в един урок. Вярвам, че до тук сме направили няколко хубави неща

В следващата статия ще внесем дата / час, ще изтрием елемент, зададен артикул, база данни Firebase и посочени списъци за пазаруване като неща за баня или кухненски неща. Ще бъде забавно и имате моята дума за това

Както споменах преди, това е моят първи урок, така че моля, кажете ми вашите отзиви и препоръки за него. Бих се радвал да чуя своите силни или слаби страни на писане на урок и ще се подобря със сигурност !!

Докато четете и прилагате урока, ако се сблъскате с някакви проблеми с моя код или с вашия код, не се колебайте да се свържете с мен и ще се постарая да ви помогна.

Instagram | електронна поща