Подробнее про язык Dart мы поговорим во второй лекции, а про виджеты – в третьей.
Итак, слева мы видим дерево проекта, справа – редактор.
Код main. dart только что созданного проекта
Весь общий для Android и iOS код находится в папке lib. Сейчас у нас там только файл main. dart
Android Studio сгенерировала простую логики инкрементирования счетчика, мы ее пока удалим, чтобы она нас не путала, и заменим на более простой вариант
Жмите на иконку молнии – Hot Reload – для применения изменений.
Тут будет реклама 1
Надо отметить, что Hot Reload во Flutter работает действительно быстро и значительно сокращает время разработки.
Ура, на экране вы должны увидеть «Привет, Мир!».
«Привет, Мир!» на эмуляторе
Рассмотрим код подробнее. Как уже говорилось выше, MyApp наследуется от StatelessWidget, это неизменяемый UI компонент-виджет. Вообще, все во Flutter – это виджеты, и приложение тоже. В виджете мы переопределяем метод build, в котором указывается, что и как отрисовать.
Тут будет реклама 2
В нашем примере мы возвращаем объект MaterialApp, который создаем посредством конструктора. А в конструктор передаем название, тему и виджет home, которому назначаем Scaffold – скелет приложения, который в свою очередь содержит appBar и body. Здесь уместна аналогия с HTML, где также есть тэги
и <body>.
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>Давайте немного увеличим текст и поиграем цветами:
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>Виджету Scaffold мы задали красный фон, а виджету текста применили стиль, чтобы сделать его больше и заметнее.<div class="ad3">Тут будет реклама 3</div>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>Привет, Мир! на Андроид
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>Преимущество Flutter в том, что вся логика работы с внешним видом приложения (UI) прописывается в коде на том же языке, что и бизнес-логика – на dart. Нет необходимости залезать в папку с ресурсами и редактировать xml верстку.
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>Запускаем Hello World на iOS
</p>
<p>
</p>
<p>
</p>
<p>Мы же пишем кроссплатформенный код! Давайте запустим созданное приложение на iOS-девайсе. Для этого просто выберите подключенный iOS-девайс или эмулятор в dropdown-списке и нажмите «Запустить».<div class="ad4">Тут будет реклама 4</div>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>Выбор эмулятора iOS
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>Привет, Мир! на iOS
</p>
<p>
</p>
<p>
</p>
<p>
</p>
<p>Экран выглядит потрясающе, однако вверху экрана мешается ненужная иконка debug, да и иконка приложения сейчас никакая. Исправим это.
</p>
<p>
</p>
<p>Для того, чтобы убрать ленточку debug, в добавьте в MaterialApp флаг debugShowCheckedModeBanner со значением false
</p>
<p>
</p>
<p> return MaterialApp (
</p>
<p> debugShowCheckedModeBanner: false,
</p>
<p>
</p>
<p>Чтобы поменять иконку, нужно добавить в pubspec.</p>
</div>
<div class="pagination-controls">
<div class="page-link"><a href="448482-bystryj-start-flutter-razrabotchika-page5.html#bookReader" rel="nofollow" class="button">Назад</a></div>
<div class="page-link"><a href="448482-bystryj-start-flutter-razrabotchika-page7.html#bookReader" rel="nofollow" class="button">Дальше</a></div>
</div>
</div>
<form method="post" name="dle-comments-form" id="dle-comments-form" ><div id="commentForm" class="comment-form-container">
<h2>Добавить мнение</h2>
<div class="rating-section">
<p class="rating-label">Ваша оценка книги</p>
<div class="rating-stars-container">
<input type="radio" id="star-10" name="rating" value="10">
<label for="star-10" title="10 - Великолепно"></label>
<input type="radio" id="star-9" name="rating" value="9">
<label for="star-9" title="9 - Потрясающе"></label>
<input type="radio" id="star-8" name="rating" value="8">
<label for="star-8" title="8 - Очень понравилось"></label>
<input type="radio" id="star-7" name="rating" value="7">
<label for="star-7" title="7 - Понравилось"></label>
<input type="radio" id="star-6" name="rating" value="6">
<label for="star-6" title="6 - Неплохо"></label>
<input type="radio" id="star-5" name="rating" value="5">
<label for="star-5" title="5 - Средне"></label>
<input type="radio" id="star-4" name="rating" value="4">
<label for="star-4" title="4 - Разочаровал"></label>
<input type="radio" id="star-3" name="rating" value="3">
<label for="star-3" title="3 - Плохо"></label>
<input type="radio" id="star-2" name="rating" value="2">
<label for="star-2" title="2 - Очень плохо"></label>
<input type="radio" id="star-1" name="rating" value="1">
<label for="star-1" title="1 - Ужасно"></label>
</div>
</div>
<div class="form-field"><input placeholder="Имя" type="text" name="name" id="name" required></div>
<div class="bb-editor">
<textarea name="comments" id="comments" cols="70" rows="10"></textarea>
</div>
<div class="captcha-container">
<a onclick="reload(); return false;" title="Кликните на изображение чтобы обновить код, если он неразборчив" href="#"><span id="dle-captcha"><img src="/engine/modules/antibot/antibot.php" alt="Кликните на изображение чтобы обновить код, если он неразборчив" width="160" height="80"></span></a>
<input placeholder="Введите код" title="Введите код указанный на картинке" type="text" name="sec_code" id="sec_code" required>
</div>
<button class="submit-button" type="submit" name="submit">Добавить</button>
</div>
<input type="hidden" name="subaction" value="addcomment">
<input type="hidden" name="post_id" id="post_id" value="448482"><input type="hidden" name="user_hash" value="08092285c0a444fea378aec77e8dddf32e1d8887"></form>
<h2 class="mt">Мнения</h2>
<div id="dle-ajax-comments"></div>
<div class="info">
<div class="text">О книге <strong>«Быстрый старт Flutter-разработчика»</strong> ещё никто не оставил отзыв — у вас есть шанс стать первым, чьё мнение задаст тон всему обсуждению! Поделитесь впечатлениями, эмоциями, замечаниями или рекомендациями. Ваш отзыв не только добавит живого голоса к произведению, но и поможет будущим читателям понять, стоит ли им открыть эту книгу. Не держите мысли при себе — ваше слово имеет значение!</div>
</div>
<h2 class="mt">Похожие книги</h2>
<div class="books">
<div class="book-preview-card">
<div class="book-cover"><a href="https://chitayka.com/514925-kompjuter-i-informatizacija-na-sele.html"><img src="/uploads/posts/images/240/26714188.jpg"></a></div>
<div class="book-info">
<div class="book-title-section">
<p class="book-title"><a href="https://chitayka.com/514925-kompjuter-i-informatizacija-na-sele.html">Компьютер и информатизация на селе</a></p>
<p class="book-author"><a href="/author/ivan-anatolevich-kuznecov/">Иван Анатольевич Кузнецов</a></p>
</div>
<div class="book-meta">
<div class="book-genres"><a href="https://chitayka.com/znanija-i-navyki/">Знания и навыки</a>, <a href="https://chitayka.com/znanija-i-navyki/kompjuternaja-literatura/">Компьютерная литература</a>, <a href="https://chitayka.com/znanija-i-navyki/kompjuternaja-literatura/knigi-o-kompjuterah/">Книги о компьютерах</a></div>
<div class="book-discussion">
<div class="comments-count"><a href="https://chitayka.com/514925-kompjuter-i-informatizacija-na-sele.html#comment">0</a></div>
<div class="rating-value">0</div>
</div>
</div>
</div>
</div><div class="book-preview-card">
<div class="book-cover"><a href="https://chitayka.com/504227-vzlomy-srednego-i-vysokogo-urovnja-sekrety-prikoly-programmirovanie-znanie-kompjutera.html"><img src="/uploads/posts/images/235/48819368.jpg"></a></div>
<div class="book-info">
<div class="book-title-section">
<p class="book-title"><a href="https://chitayka.com/504227-vzlomy-srednego-i-vysokogo-urovnja-sekrety-prikoly-programmirovanie-znanie-kompjutera.html">Взломы среднего и высокого уровня. Секреты, приколы, программирование, знание компьютера</a></p>
<p class="book-author"><a href="/author/aleksandr-mogilevskij/">Александр Могилевский</a></p>
</div>
<div class="book-meta">
<div class="book-genres"><a href="https://chitayka.com/znanija-i-navyki/">Знания и навыки</a>, <a href="https://chitayka.com/znanija-i-navyki/kompjuternaja-literatura/">Компьютерная литература</a>, <a href="https://chitayka.com/znanija-i-navyki/kompjuternaja-literatura/knigi-o-kompjuterah/">Книги о компьютерах</a></div>
<div class="book-discussion">
<div class="comments-count"><a href="https://chitayka.com/504227-vzlomy-srednego-i-vysokogo-urovnja-sekrety-prikoly-programmirovanie-znanie-kompjutera.html#comment">0</a></div>
<div class="rating-value">0</div>
</div>
</div>
</div>
</div><div class="book-preview-card">
<div class="book-cover"><a href="https://chitayka.com/490448-zolotaja-zhila-it.html"><img src="/uploads/posts/images/228/67142477.jpg"></a></div>
<div class="book-info">
<div class="book-title-section">
<p class="book-title"><a href="https://chitayka.com/490448-zolotaja-zhila-it.html">Золотая жила IT</a></p>
<p class="book-author"><a href="/author/sergej-aleksandrovich-kostanich/">Сергей Александрович Костанич</a></p>
</div>
<div class="book-meta">
<div class="book-genres"><a href="https://chitayka.com/znanija-i-navyki/">Знания и навыки</a>, <a href="https://chitayka.com/znanija-i-navyki/kompjuternaja-literatura/">Компьютерная литература</a>, <a href="https://chitayka.com/znanija-i-navyki/kompjuternaja-literatura/knigi-o-kompjuterah/">Книги о компьютерах</a></div>
<div class="book-discussion">
<div class="comments-count"><a href="https://chitayka.com/490448-zolotaja-zhila-it.html#comment">0</a></div>
<div class="rating-value">0</div>
</div>
</div>
</div>
</div><div class="book-preview-card">
<div class="book-cover"><a href="https://chitayka.com/469501-osnovy-jazyka-html-chast-vtoraja.html"><img src="/uploads/posts/images/218/40489505.jpg"></a></div>
<div class="book-info">
<div class="book-title-section">
<p class="book-title"><a href="https://chitayka.com/469501-osnovy-jazyka-html-chast-vtoraja.html">Основы языка HTML. Часть вторая</a></p>
<p class="book-author"><a href="/author/dmitrij-kudrec/">Дмитрий Кудрец</a></p>
</div>
<div class="book-meta">
<div class="book-genres"><a href="https://chitayka.com/znanija-i-navyki/">Знания и навыки</a>, <a href="https://chitayka.com/znanija-i-navyki/kompjuternaja-literatura/">Компьютерная литература</a>, <a href="https://chitayka.com/znanija-i-navyki/kompjuternaja-literatura/knigi-o-kompjuterah/">Книги о компьютерах</a></div>
<div class="book-discussion">
<div class="comments-count"><a href="https://chitayka.com/469501-osnovy-jazyka-html-chast-vtoraja.html#comment">0</a></div>
<div class="rating-value">0</div>
</div>
</div>
</div>
</div><div class="book-preview-card">
<div class="book-cover"><a href="https://chitayka.com/466768-informacionnaja-bezopasnost-predprijatija-moskva-2020.html"><img src="/uploads/posts/images/216/50436356.jpg"></a></div>
<div class="book-info">
<div class="book-title-section">
<p class="book-title"><a href="https://chitayka.com/466768-informacionnaja-bezopasnost-predprijatija-moskva-2020.html">Информационная безопасность предприятия. Москва 2020</a></p>
<p class="book-author"><a href="/author/vladimir-cheluhin/">Владимир Челухин</a></p>
</div>
<div class="book-meta">
<div class="book-genres"><a href="https://chitayka.com/znanija-i-navyki/">Знания и навыки</a>, <a href="https://chitayka.com/znanija-i-navyki/kompjuternaja-literatura/">Компьютерная литература</a>, <a href="https://chitayka.com/znanija-i-navyki/kompjuternaja-literatura/knigi-o-kompjuterah/">Книги о компьютерах</a></div>
<div class="book-discussion">
<div class="comments-count"><a href="https://chitayka.com/466768-informacionnaja-bezopasnost-predprijatija-moskva-2020.html#comment">0</a></div>
<div class="rating-value">0</div>
</div>
</div>
</div>
</div><div class="book-preview-card">
<div class="book-cover"><a href="https://chitayka.com/469540-mobilnaja-jelektronnaja-podpis.html"><img src="/uploads/posts/images/218/67597859.jpg"></a></div>
<div class="book-info">
<div class="book-title-section">
<p class="book-title"><a href="https://chitayka.com/469540-mobilnaja-jelektronnaja-podpis.html">Мобильная электронная подпись</a></p>
<p class="book-author"><a href="/author/anton-anatolevich-shadura/">Антон Анатольевич Шадура</a></p>
</div>
<div class="book-meta">
<div class="book-genres"><a href="https://chitayka.com/znanija-i-navyki/">Знания и навыки</a>, <a href="https://chitayka.com/znanija-i-navyki/kompjuternaja-literatura/">Компьютерная литература</a>, <a href="https://chitayka.com/znanija-i-navyki/kompjuternaja-literatura/knigi-o-kompjuterah/">Книги о компьютерах</a></div>
<div class="book-discussion">
<div class="comments-count"><a href="https://chitayka.com/469540-mobilnaja-jelektronnaja-podpis.html#comment">0</a></div>
<div class="rating-value">0</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<footer>
<div class="wrap">
<div class="text">
<p>Большинство произведений на нашем ресурсе размещено на законных основаниях в рамках партнёрского соглашения с ЛитРес. Если вы считаете, что какая-либо книга опубликована с нарушением ваших авторских прав, пожалуйста, сообщите нам об этом по адресу <a href="mailto:mail@chitayka.com" rel="nofollow">mail@chitayka.com</a> или воспользуйтесь <a href="/index.php?do=feedback" rel="nofollow">формой обратной связи</a>. Мы гарантируем оперативное рассмотрение обращений и решение вопросов в соответствии с законодательством.</p>
</div>
</div>
</footer>
</body>
</html>
<!--
-->
