Всем привет! Меня зовут Адитья Рохман и добро пожаловать в Проби. Недавно я только начал изучать разработку Flutter в Udemy, и мне это очень понравилось. Итак, я решил сделать эту серию.

Я назвал эту серию «Flutter Story», потому что это будет мое портфолио, которое расскажет миру, что я изучаю Flutter и могу сделать что-то отличное. В этой серии я расскажу о процессе разработки приложения с нуля до выпуска с открытым исходным кодом на Github.

1. Проектирование

Давайте начнем. Прежде чем перейти к кодированию, я обычно разрабатываю пользовательский интерфейс для своего приложения. Затем создайте несколько прототипов, чтобы увидеть, как это приложение будет выглядеть после запуска на реальном устройстве. Я создаю дизайн в Adobe XD, и в этом приложении я использовал следующие цвета:

Как вы можете видеть в предварительном просмотре этого приложения, я использую трехмерное изображение. Я создаю это изображение с помощью Adobe Dimensions с 3 разными цветовыми акцентами. Это было красиво.

2. Кодирование

Далее после всего был готов дизайн приложения. Затем мы переходим к части кодирования. Начните с создания проекта Flutter в моей любимой среде IDE VS Code. Затем я добавляю изображение ресурсов в свой файл pubspec.yaml, чтобы иметь возможность разместить изображение в моем приложении.

Затем я импортирую изображения со своего компьютера в файл проекта, и мой файл проекта выглядит так:

Хорошо, теперь мой проект готов. Пришло время перейти к файлу main.dart и выполнить некоторый пользовательский интерфейс и логический код. Мой код выглядит так:

Я дам несколько пояснений по поводу логики этого приложения. Итак, когда вы впервые открываете это приложение, вы получите желтое изображение. Затем вы пытаетесь нажать несколько кнопок, и изображение будет изменено. Так просто. Цветовые акценты изображения будут меняться в зависимости от цвета кнопки, которую вы нажали.

Такова логика. Изображение будет изменено при нажатии кнопок. Когда кнопка щелкает по функции, например, будут выполняться yellowScene () и changeState ().

После запуска на реальном устройстве приложение выглядит отлично и плавно.

Наконец, я создал свой первый проект из этой серии. Я предоставляю вам исходный файл на Github. Возможно, вы сможете загрузить и запустить приложение на своем устройстве. Буду рад, если вы дадите мне предложение по улучшению моего кода. Так что не стесняйтесь комментировать этот пост.

Большое вам спасибо и до встречи в следующем проекте! :)