Никогда еще не было так просто создать приложение, которое полностью развертывается и выглядит полностью родным, но эй! теперь у нас есть Flutter.
Это прекрасное начало для всех новичков во Flutter, поскольку это то, что я называю шагом в промежуточный мир разработки Flutter. После создания этого проекта вы определенно почувствуете себя увереннее и лучше поймете основы Flutter.
Итак, приступим, ладно?
Что такое флаттер?
Flutter - это мобильная и веб-платформа с открытым исходным кодом (недавно анонсированная на Google IO 2019), созданная самой Google. Самая любимая особенность этого фреймворка - вы можете создавать приложения как для Android, так и для iOS на единой базе кода. Да, верно, вам не нужно переключаться между разными средами разработки, все, что вам нужно, это Flutter. Он также объявлен основным методом создания приложений для Google Fuchsia.
Чтобы узнать больше о Flutter, вы можете прочитать эту статью Паулины Шклярска здесь: Flutter - 5 причин, почему вам это может понравиться
Предпосылки
Хотя это довольно простой проект без дополнительных зависимостей или запросов API, вам нужно кое-что для начала.
Шаг 1:
Убедитесь, что в вашей системе установлен флаттер, будь то Mac, Windows или Linux. Если да, то отлично! 👍 Если нет, перейдите к официальной документации по установке Flutter, выберите свою ОС и просто следуйте инструкциям. Я настоятельно рекомендую вам посмотреть это видео, если в вашей системе еще не установлен Flutter. 👇 ✨
Шаг 2:
Вы должны иметь хотя бы базовые знания о Дротике.
Dart - это оптимизированный для клиентов язык программирования для быстрых приложений на нескольких платформах. Он разработан Google и используется для создания мобильных, настольных, серверных и веб-приложений.
Итак, если эти две точки проверены за вас! Тогда давай начнем
Вот исходный код этого проекта.
Как должен выглядеть наш конечный продукт
Это то, что мы стремимся построить. Это простое приложение Tic Tac Toe, которое требует, чтобы в игру играли два игрока. В нем есть функция автоматического сброса, которая автоматически сбрасывает игру после победы одного из игроков.
Если кто-то из пользователей хочет перезагрузить игру на полпути и попробовать еще раз, они могут сделать это, нажав кнопку сброса.
Добавляем все необходимые нам ресурсы
Перво-наперво, давайте добавим все изображения (круг, крест и т. Д.), Которые нам понадобятся на протяжении всего проекта. Откройте pubspec.yaml файл в папке проекта и пролистайте его, пока не увидите его.
# To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg
Загрузите ресурсы здесь - Исходный файл ресурсов или вы можете изучить и выбрать свои собственные круги, пустое поле или крестик. Замените приведенную выше строку кода новыми. (Если вы выбрали новые изображения, убедитесь, что вы указали имена правильных ресурсов)
# To add assets to your application, add an assets section, like this: assets: - images/circle.png - images/cross.png - images/edit.png
Теперь, когда вы добавили эти ресурсы в свой проект, Flutter легко их распознает.
Создать домашнюю страницу
Завершив добавление ресурсов, перейдите к файлу lib/main.dart, удалите весь шаблонный код и вставьте свои собственные темы или название приложения и т. Д. Здесь вы свяжете класс HomePage, который мы создадим очень скоро.
Чтобы связать класс HomePage, добавьте home: HomePage(), сразу после создания MaterialApp.
Теперь вы увидите закрученную красную линию в объявлении класса, и это нормально, поскольку мы еще не создали этот класс. Так что давай сделаем это.
Создайте новый lib/HomePage.dart файл, создайте виджет с отслеживанием состояния, внутри которого добавьте три переменные изображения, а именно «крестик», «круг», «пустой / редактировать», чтобы сохранить все изображения, которые мы ранее назначили в переменная соответственно. Позже в этом проекте нам нужно будет вернуть их, а также использовать их для проверки, поэтому гораздо лучше заранее сохранить их в переменной.
class _HomePageState extends State<HomePage> {
//TODO: link up images
AssetImage cross = AssetImage("images/cross.png");
AssetImage circle = AssetImage("images/circle.png");
AssetImage edit = AssetImage("images/edit.png");
Инициализировать и сбросить
Каждый раз, когда наше приложение загружается в первый раз, мы хотим, чтобы все поля были пустыми. И пользователь должен иметь возможность нажимать на них и изменять свое состояние, для этого нам нужно создать список строк, который должен содержать 9 элементов (по 3 поля в каждой строке). Поскольку мы хотим, чтобы эти элементы были пустыми при запуске приложения, нам нужно установить состояние по умолчанию как пустое.
//Stores if circle wins or cross wins
String message;
//Creating a list of Strings
List<String> gameState;
//TODO: initiazlie the state of box with empty
@override
void initState() {
super.initState();
setState(() {
this.gameState = [
"empty",
"empty",
"empty",
"empty",
"empty",
"empty",
"empty",
"empty",
"empty",
];
this.message = "";
});
}
Аналогичным образом создайте функцию resetGame (), которая также сбрасывает состояние игры на пустое всякий раз, когда пользователь нажимает кнопку сброса.
Изменение состояния на крест или круг при нажатии пользователем
Для реализации этой функциональности мы реализовали функцию под названием playGame (). Эта функция принимает щелчок пользователя как номер индекса и проверяет, является ли элемент определенного индекса в gameState (списки строк, созданных ранее) пустым или нет.
Чтобы установить состояние в виде креста или круга поочередно при щелчке пользователем, нам нужно инициализировать логическую переменную, которая будет продолжать переключаться между True и False при щелчке пользователя.
Когда это правда, мы можем установить состояние как пересечение, а когда ложно, мы устанавливаем его как кружок или наоборот.
Мы также создали функцию типа AssetImage под названием getImage () -. Основная функция этого метода - видеть состояние индекса в списке gameState ( который пользователь нажимает) и преобразовать эту строку в изображение (круг или крест).
Логика игры
Удивительно, но логика этой игры на самом деле очень проста, и все, что вам нужно сделать, это проверить последовательные индексы и все. Смущенный? Позвольте привести пример.
Поскольку мы уже создали наш список из 9 элементов, где по 3 элемента в каждой строке, на самом деле нам нужно проверить, равен ли 1-й элемент второму и равен ли 2-й элемент следующему подряд элемент, если ваш ответ верен в обоих случаях! Виола, у тебя есть победитель.
Точно так же вы должны проверять не только горизонтальные элементы, но и элементы, направленные вертикально вниз, и в этом случае индекс будет выглядеть так, как если бы 1-й элемент был равен 4-му и если бы он был равен 7-му. Все дело в индексах.
Вы должны продолжать делать эту проверку для 3 горизонтальных строк, а также для 3 вертикальных столбцов. Подождите минуту! А как насчет диагоналей? Мы тоже этого не упустим, поэтому снова воспользуемся проверкой индексов 1,5 и 9, а для противоположной диагонали - 3,5 и 7. Вот и все, ваша основная логика игры. Да, это так просто.
Пользовательский интерфейс
Во Flutter всякий раз, когда мы хотим создать что-то, что упаковано в коробку или сгруппировано и находится в фиксированном пространстве и размере, лучший вариант - это макет сетки. В этом проекте мы используем что-то под названием GridView.builder (). Этот построитель дает нам некоторые свойства, такие как itemCount и itemBuilder, которые помогают нам подсчитать общее количество элементов, которые будут присутствовать в сетке, а также вернуть конкретные индексы тех контекстов, на которые нажимает пользователь.
Чтобы увидеть полную конструкцию пользовательского интерфейса, посетите здесь 👇
И последнее, но не менее важное: спасибо, что прочитали это. Поскольку я новичок и могу делать ошибки, не стесняйтесь указывать на это, чтобы я мог исправлять их по ходу дела. Если вы хотите увидеть больше проектов Flutter, подумайте о том, чтобы изучить мою учетную запись GitHub.
Мир Out.
