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

Цього разу нам слід було продемонструвати різні шрифти в застосунках, накладання елементів один на одного, випадаючий список, повідомлення внизу екрана та імітацію завантаження, (типу зачекайте я думаю)

Отже

Task1: Create a simple app that displays the title of your app and a welcome message using a custom font.

У файлі pubspec.yaml в розділі flutter: прописую шрифти, два у мене були на диску, ще два завантажив з інтернет 1000 вільних шрифтів))

Решта вже звичне явище: створюю віджет Scaffold, який є основною структурою сторінки, додаю до нього заголовок AppBar з текстом TextDemo. У тіло сторінки додаю віджет Center, щоб вміст був центрований. Всередині Center знаходиться Column, що розташовує свої дочірні елементи вертикально. Далі додаю чотири текстових віджети (Text) для демонстрації різних шрифтів.

Task2: Create a profile screen, place a circular avatar on top of a background image using Stack. Add a name and a badge icon to this layout using Positioned.

На зображені вище було видно що я підключив два файли зображень

flutter:
  uses-material-design: true
  assets:
    - assets/icon/sirko.png
    - assets/icon/s.png

Я створюю віджет Scaffold, який є основною структурою сторінки. У його тіло додаю віджет Stack, який дозволяє накладати елементи один на одного. Перший елемент у стеку — це Container, який використовується для відображення фону сторінки з використанням властивості BoxDecoration, де через DecorationImage встановлюється зображення фону з файлу assets/icon/s.png і налаштовується так, щоб воно покривало всю площу сторінки BoxFit.cover.

Далі, за допомогою Positioned, розташовую CircleAvatar з радіусом 50 пікселів у певній позиції — на 100 пікселів зверху і центровано по горизонталі. Як фон для аватара використовується зображення з файлу assets/icon/sirko.png.

Під аватаром, на відстані 200 пікселів зверху, виводжу текст sergeyk (71) з білим кольором, розміром шрифту 24 та жирним стилем. Ще нижче, на 230 пікселів зверху, виводжу іконку людей Icons.people з розміром 30 пікселів та кольором cyan.

Тільки не дуже зрозумів що за піктограму розмістити під іменем - я розмістив іконку Icons.people

Task3: Create a form with a button. When the button is pressed, display a Snackbar with a confirmation message

Доповнюючи попереднє завдання я розмістив кнопку для відправки повідомлення, та появу відмітки про натиснення кнопки внизу екрану.

Task 5: Create a settings page where users can select a theme for the app (e.g., light or dark mode) from a dropdown menu

Нижче під кнопкою про надсилання повідомлення я розмістив кнопку для оновлення дати-часу
Так як тепер вікно буде змінюватися, то потрібно змінити клас з StatelessWidget на StatefulWidget
та додати метод визначення(оновлення) дати/часу _updateDateTime який просто визначає поточну дату - setState(() { _currentDateTime = DateTime.now();

який викликатиметься при натисненні на кнопку

Task 6: Create a home screen that shows the current date and time. Add a refresh button to update the displayed date and time when pressed.

Залишилося імітувати затримку при оновленні інформації про дату/час
для цього я додав логічну змінну _isLoading яка впливатиме на відображення - відображатиметься текст дати або ж імітація оновлення CircularProgressIndicator

Я вніс в код деякі зміни - _updateDateTime переробив, тепер ми встановлюємо значення змінної в true, очікуємо 3 секунди, встановлюємо false

а при оновленні тернарний оператор визначає що виводити, залежно від цієї логічної змінної

_isLoading
                    ? CircularProgressIndicator()
                    : Text(
                  ': $_currentDateTime',
                  style: TextStyle(fontSize: 25, color: Colors.white),
                ),

Task 4: Create a settings page where users can select a theme for the app (e.g., light or dark mode) from a dropdown menu

Залишилося продемонструвати вибір зі списку, його зроблю окремо, не виникло логічної ідей додати кудись в поточне рішення))

Демонстрація Create a Weather Application which includes Custom Font, Stack, Snackbar, Dropdown, Current Date and Time and CircularProgressIndicator.

А це ніби підсумок всього попередніх 6 завдань, можливо це й не слід було робити, адже все те саме зроблене і описане вище. Та все таки зробив.

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

У мене все вертиться в голові дві примітивні задачки(гри) які хочу спробувати зробити, сподіваюся одержаних знань мені вистачить. А головне я побачив дорогу, я побачив напрям яким маю йти.