SEC S20W3 - Exploring User Inputs, Gesture Detection, Navigation, and Bottom Sheets in Flutter

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

Ще кілька днів цього третього тижня у конкурсі SEC S20 W3де я дуже радий брати участь у навчанні писати додатки для Android(web, deskop, iOS). Тема цього третього тижня Exploring User Inputs, Gesture Detection, Navigation, and Bottom Sheets in Flutter то ж моя домашня робота.

Завдання 1.

Створіть просту форму з текстовим полем, де користувачі можуть вводити своє ім’я, і кнопкою для надсилання форми. Використовуйте TextEditingController, щоб отримати текст із поля TextField і відобразити його на екрані після натискання кнопки.

Коли я формував `TextField` я використав стандартне значення `controller:_controller` для `TextEditingController` щоб керувати текстом який ввів користувач. Трохи збільшив шрифт `style: TextStyle(fontSize: 22)` далі я задав підказку `labelText: 'Ваше ім’я'` до то го що вводити в поле і збільшив її розмір labelStyle: `TextStyle(fontSize: 22)`

Коли я формував кнопку, я використав стандартне значення onPressed: _submitName, щоб вказати, що буде виконано після натискання кнопки. Я створив окрему функцію _submitName, яка спрацьовує при натисканні.

Далі я збільшив розмір тексту на кнопці за допомогою style: ElevatedButton.styleFrom(textStyle: TextStyle(fontSize: 20)). Це зробило текст на кнопці більшим. Щоб зробити кнопку візуально більшою, я додав padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15), що збільшило відстань між краями кнопки та її текстом

Цього разу я зробив ще одне "відкриття". Як я вже неодноразово говорив, що я надаю перевагу різним онлайн сервісам. Програмам які не встановлюються в систему(partable). Тому лиш у першій домашній роботі встановив необхідні програми, правда на інший комп'ютер. Я писав код на https://dartpad.dev/, нещодавно замітив інший сайт https://dart.dev/#try-dart. А на ньому замітив текст Open In. Як виявилося він є на обох сайтах.

А ще тут є емулятор Andoid!!! хоча застосунки що я встиг написати прекрасно себе відчували і в вкладці Web.

Тут видно схожіcть з VS Code.

Завдання 2.

Створюйте кілька екранів і переходьте між ними. Створіть два екрани — HomeScreen і DetailsScreen. Використовуйте Navigator.push() для переходу з головного екрана на екран подробиць після натискання кнопки.

У програмі описано два майже однакових вікна: HomeScreen та SecondScreen. У обох робимо відповідні заголовки - `AppBar`, я встановив блакитний фон. І тут виникла ідея зробити різні кольори у першому та другому вікнах - довелося перезаписувати "відео". У першому вікні розмістив одну лиш кнопку - `ElevatedButton`, вона має властивість `onPressed`. Тобто при натисненні викликає `Navigator.push()` для переходу на інший екран.

Так як SecondScreen містить крім кнопки ще й текст, я створив Column де розмістив текст та кнопку. Але цей раз onPressed не викликає перше вікно, а навпаки завершує друге - Navigator.pop()

Завдання 3.

Реалізуйте спливаюче вікно нижнього аркуша. На екрані додайте кнопку для переходу з екрана на нижній аркуш. І додайте деякі дані для відображення на нижньому аркуші, такі як ім’я, країна, вік, стать тощо.

На головному екрані HomeScreen, як і в попередньому завданні, я розмістив ElevatedButton, яка після натискання викликає showModalBottomSheet(). Всередині цієї функції вказується BottomSheet() як вміст спливаючого вікна.

BottomSheet після появи відображає певну текстову інформацію та кнопку закриття "Close", натиснення на яку викликає Navigator.pop() для закриття вікна.

Демонструвати:

Програма калькулятора кредиту на автомобіль: розробіть простий додаток-калькулятор кредиту на автомобіль, де користувачі зможуть вводити деталі позики (наприклад, суму позики, процентну ставку та термін позики) і переглядати розрахований щомісячний платіж на нижньому аркуші. На нижньому аркуші має бути вказана сума позики, відсоткова ставка, термін позики та розрахований щомісячний платіж.

Після цих завдань можна зробити підсумкове - це розрахунок виплат по кредиту на автомобіль.

                               сума_позики * %місячна_ставка
щомісячний платіж = -----------------------------------------------
                     1  -  (1+%місячна_ставка)^(-кількість_місяців)

В основному класі MyApp зі стартовим екраном LoanCalculatorScreen. Я розмістив три текстові поля для вводу (суми позики, процентної ставки та терміну кредиту) в StatefulWidget. Вони контролюються за допомогою TextEditingController.

На аркуші виводяться деталі кредиту (сума, відсоткова ставка, термін) і розрахований платіж.

Демонстрація роботи застосунку - в режимі web, та в режимі емуляції Android. Виявляється ця онлайн IDE - це Project IDX — хмарна платформа для розробки багатоплатформних застосунків від Google. Сподобалася, лише не заглядав у налаштування де там темна тема)))

Після натискання кнопки "Calculate Monthly Payment" викликається функція calculateMonthlyPayment. Вона обробляє введені дані, виконує розрахунок щомісячного платежу кредиту та виводить результат у нижньому аркуші через showModalBottomSheet.

Запрошую прийняти участь @ninapenda, @max-pro, @lhorgic

_{About me}