SEC S20W2 - Mastering Flutter's Widget Tree, State Management, and Essential Widgets

sergeyk (69)Author | Delegate [10200] 🇺🇦 ⭐in Ukraine on Steem • 7 days ago

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

Перше завдання зробив ще на початку тижня, і ось зараз в останній день дійшла черга.
Це все ще не схоже на програмування до якого я звик, це поки що схоже на html/css яких я не знаю(((. Та і коли я поверхнево знайомився з мовою Python вона теж не була схожа на мої алгоритмічні думки.

1. Створіть простий макет із віджетами стовпців і рядків. Створіть простий інтерфейс користувача, який відображає три текстові віджети вертикально за допомогою стовпця. Всередині одного з дочірніх елементів стовпця додайте рядок, який містить три значки, вирівняні горизонтально. Додайте трохи простору між текстовими віджетами за допомогою SizedBox.

Тут я створюю колонку, а в ній послідовно три елементи текст та додаю в колонку рядок з трьох іконок.

2. Створіть програму лічильника стану. Створіть StatefulWidget, який відображає число в центрі екрана. Додайте дві кнопки: одну для збільшення та одну для зменшення. Оновлення стану програми під час натискання кнопок.

Я зменшив масштаб в браузері щоб більше вмістилося коду, довелось збільшити розмір текстових написів.

Основна функція 'main викликає runApp, який запускає MyApp.
Клас MyApp наслідується від StatelessWidget, оскільки його стан не змінюється, а клас CounterPage наслідується від StatefulWidget, так як він має стан що змінюється. Метод createState повертає _CounterPageState, де враховуються зміни на сторінці.
В класі _CounterPageState: оголошуємо змінну лічильника k=0;, а його методи buttonUP та buttonDOWN будуть збільшувати та зменшувати значення k, а так як значення лічильника більш ніде не змінюється то setState(), для відображення змін ми викликаємо лиш у цих двох методах. До того ж зациклив лічильник - зменшення для 0 переводить лічильник до 11, а збільшення більше 11 переводить його в 0. Тобто мій лічильник може мати лиш 12 значень - від {0 до 11}. Хоч тут нарешті вже з'являєтсья кодування)))

Далі створюємо віджет build - використовуємо Scaffold, щоб створити основну структуру інтерфейсу з AppBar та основним вмістом. Створюємо Column до якого додаємо два Text віджети: один для відображення тексту "Поточне значення:" і другий для відображення значення k. В рядку Row розмістимо два ElevatedButton, які викликають методи збільшення та зменшення значення при натисканні.

3. Створіть список елементів за допомогою ListView. Створіть список рядків (наприклад, список фруктів). Відобразити цей список у прокручуваному ListView. Кожен елемент у списку має відображатися як текстовий віджет усередині контейнера з відступами та полями.

Так я переймаюся різними мовами програмування я створив спиcок деяких мов програмування.

через build я створив Scafford з AppBar для заголовка і використав ListView.builder для динамічного створення списку
Далі в контейнері я розмістив список а зовнішній вигляд оформив через BoxDecoration

4. Дослідіть гнучкість і вирівнювання за допомогою адаптивного інтерфейсу користувача. Створіть макет, у якому поспіль відображатимуться три віджети контейнера. Використовуйте Expanded, щоб один контейнер займав удвічі більше місця, ніж інші. Використовуйте властивості вирівнювання, щоб відцентрувати вміст у кожному контейнері.

Ми використовуємо StatelessWidget, оскільки інтерфейс не має змінного стану та відображає статичні дані.
Scaffold, щоб забезпечує основну структуру інтерфейсу, AppBar задає заголовок, використаємо Column для вертикального розміщення контейнерів. У нього розміщуємо три Expanded віджети, які дозволяють контейнерам займати пропорційний простір. Перший контейнер має flex: 2, що означає, що він займає вдвічі більше місця, ніж інші два контейнери, які мають flex: 1.Кожен контейнер має свій колір і текст, центрований за допомогою властивості alignment.
Цей код демонструє адаптивний інтерфейс, де контейнери вертикально вирівнюються, і один з них займає більше простору.

Інтерфейс користувача профілю: створіть простий макет екрана профілю за допомогою різних віджетів Flutter. Екран має містити кругле зображення профілю, піктограми соціальних мереж у горизонтальному вирівнюванні, текст як ім’я та кнопки, що представляють його різні навички та атрибути. Усе це має бути вирівняно за допомогою розглянутих віджетів макета. За потреби використовуйте SizedBox.

Я так розумію це підсумкове завдання з пунктів 1-4. Я створив копію інформації зі свого профілю https://steemit.com
Завдяки `backgroundImage: NetworkImage('https://......jpg'), я витяг аватар з steemit.com

Всі завдання я робив на сайті https://dartpad.dev/ який часто через раз зависав, та не було часу робити цю роботу на іншому комп'ютері де у мене з минулого уроку встановлено все необхідне.