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 і натисніть кнопку Створити новий проект, а потім виберіть Flutter зліва.

Як я вже говорив раніше, якщо ви пропустили кроки встановлення, можливо, ви не зможете побачити опцію Flutter. Тож поверніться

Для тих, хто прийняв мою пораду, давайте продовжимо!

Залиште решту речі, як хочете.

Опція Java є типовою для мови Android, але я переключила мову iOS на Swift, оскільки я не маю поняття про «Objective-C», тому це прийняти ваше рішення.

Тепер ви готові із застосуванням скелета. Будь ласка, видаліть усі рядки коментарів, тому що я не вважаю їх корисними. Також видаліть floatingActionButton, content body та метод _incrementCounter.

Тепер у вас чистий ешафот

Створимо інтерфейс

Створіть нову підсумкову рядок у класі та замініть заголовок Матеріал додатка та назву домашнього віджета. Я також змінила кольоровий зразок програми на червоний. Мені це подобається !
Тепер у вас є ця краса та працює and

У _MyHomePageState створіть остаточний TextEditingController, який є контролером для редагування текстового поля.

остаточний TextEditingController _textController = новий TextEditingController ();

потім створіть метод _handleSubmitted, щоб робити дивовижні речі із введенням користувача

void _handleSubmitted (Строковий текст) {
    
}

і в кінцевому підсумку додайте цей код, щоб створити контейнер для введення внизу.

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

Ми робимо добре поки що !! Ми створили контейнер для елемента введення, кнопки списку та подання свого роду кнопки. onПрес-функції поки що порожні, ми будемо працювати над цим пізніше.

Тепер повернемося до тіла нашого лісу. Відредагуйте код тіла таким чином:

корпус: нова колона (
  діти: <Віджет> [
      новий гнучкий (
          дитина: новий ListView.builder (
              padding: новий EdgeInsets.all (8.0),
              реверс: хибний,
              itemBuilder: (_, int index) => null,
              itemCount: 1,
          ),
      ),
      новий роздільник (висота: 1,0),
      новий контейнер (
          прикраса: новий BoxDecoration (
              колір: Тема. (контекст). картка Кольоровий),
          дочірнє: _createInputContainer (),
      ),
  ],
)

Добре, зараз корпус майже готовий. У нас є список, роздільник між елементами списку та нашими вхідними елементами. Як ви бачите, я використовував віджет _createInputContainer () в якості дочірки контейнера. Це хороший спосіб зберегти чистий і організований код.

Я вірю, що вам до цього моменту все добре »

Ну, чесно кажучи, це мій перший підручник коли-небудь, тому я дуже схвильований. Я не впевнений, чи зрозумілий мій спосіб навчання, але я вважаю, що це

Поговоримо про те, що робити

  1. Створіть всередині методу _handleSubmitted
  2. Додати доданий текст як новий елемент списку та відобразити їх.
  3. Складіть наш список зручним для користувача інтерактивним списком.
  4. Додати базу даних Firebase до проекту.

Запустимо!

Якщо ми думаємо про звичайну програму, яка обробляє введення користувача, перше, що з’являється на увазі, - це зрозуміти дані після надсилання

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

і змінити кнопку надсилання як

новий контейнер (
    дитина: новий IconButton (
        колір: кольори
        значок: нова ікона (Icons.send),
        onПрес: () {
            _handleSubmitted (_textController.text) // змінити це
        }),
),

тепер користувачі можуть подати вхід, і додаток може обробляти введення, в основному очищає область введення після надсилання.

Тепер ми створимо віджет, який відображає елементи списку. Спочатку ми повинні створити віджет, який представляє один елемент. Створіть віджет без громадянства та назвемо його ListItem та виведемо його за межі _MyHomePageState.

class ListItem розширює StatelessWidget {
    ListItem ({this.itemName});
    заключний рядок itemName;
    @override
    Збірка віджетів (контекст BuildContext) {
    повернути новий контейнер (
        запас: const EdgeInsets.symmetric (вертикальний: 10.0),
        
    );
}
}

У новому контейнері ми встановили симетричний вертикальний запас із значенням 10,0, оскільки в іншому випадку елементи списку будуть виглядати занадто близько один до одного. Ми хочемо якісь круті лайна, а? Не хвилюйтеся, ми додамо більше стилів пізніше.

Тоді як дочірній елемент ми додамо віджет Row, який відображає його дітей у горизонтальному масиві.

дитина: новий рядок (
    crossAxisAlignment: CrossAxisAlignment.start, // його приємно;)
     діти: <Віджет> [
         нова колонка (
             crossAxisAlignment: CrossAxisAlignment.start,
              діти: <Віджет> [
                  новий контейнер (
                      дитина: новий Текст (itemName), // це назва елемента
                   ),
              ],
          ),
     ],
),

Ну, весь код цього віджета ListItem виглядає приблизно так:

class ListItem розширює StatelessWidget {
    ListItem ({this.itemName});
    заключний рядок 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 (
    padding: новий EdgeInsets.all (8.0),
    реверс: хибний,
    itemBuilder: (_, int index) => _shopItems [індекс], // змінити це
    itemCount: _shopItems.length, // змінити це
),

Перед цією модифікацією у нас функція itemBuilder була нульовою. Ми змінили його для створення елемента списку за заданим індексом _shopItems, і змінили itemCount на довжину _shopItems.

Спробуємо це в прямому ефірі:

Я щойно зрозумів, що для тестування програми використовував лише iPhone X. Ось знімок Google Pixel 2 XL з програми. Це дивно прохолодно

Я думаю, що все працює дуже добре, за винятком випадків, коли я додаю новий елемент, новий елемент додається вгорі. Я з’ясую це під час роботи над іншими матеріалами

Я хочу тут зупинитися на цій статті, тому що я не хочу, щоб читачі нудьгували, роблячи все в одному підручнику. Я вважаю, що ми тут зробили кілька приємних речей

У наступній статті ми реалізовуємо дату / час, видаляємо предмет, готовий елемент, базу даних Firebase та вказані списки покупок, такі як речі у ванній кімнаті чи кухонні речі. Буде весело, і ви маєте моє слово для цього

Як я вже згадував, це мій перший підручник коли-небудь, тому, будь ласка, скажіть мені свої відгуки та рекомендації щодо нього. Я хотів би почути свої сильні або слабкі сторони написання навчального посібника, і я вдосконалюю себе точно !!

Під час читання та застосування підручника, якщо у вас виникли проблеми з моїм кодом чи кодом, не соромтесь зв’язатися зі мною, і я постараюся допомогти вам.

Instagram | Електронна пошта