Главная » Руководство

Учебник по Flutter для начинающих: как разрабатывать приложения с помощью этого SDK Google

На чтение 10 мин. Просмотров 68 Опубликовано

Если вы хотите запрограммировать собственное приложение, у вас есть множество вариантов. Сборки с готовыми к использованию компонентами приложений очень популярны благодаря простоте использования, но фреймворки также становятся все более известными благодаря тому, что максимально упрощают процесс разработки для пользователей. Одним из последних примеров является комплект для разработки программного обеспечения (SDK) Flutter, разработанный компанией Google. Этот фреймворк с открытым исходным кодом позволяет разрабатывать высокопроизводительные мобильные приложения (для iOS и Android), а также веб-приложения и приложения для настольных компьютеров на языке программирования Dart от Google.

В нашем учебнике по Flutter мы рассмотрим самые важные шаги для начала работы с Google SDK.

Содержание
  1. Изучение Flutter: требования
  2. Шаг 1: создайте свое первое приложение Flutter
  3. Шаг 2: добавьте внешний пакет
  4. Шаг 3: добавьте виджет с состоянием
  5. Шаг 4: создание представления списка с бесконечной прокруткой
  6. Краткое содержание руководства по Flutter

Изучение Flutter: требования

Если вы хотите научиться программировать с помощью Flutter, вам не обязательно иметь опыт разработки приложений и веб-приложений. Вам даже не нужно ничего знать о ранее упомянутом Google языке программирования Dart. Если вы знакомы с объектно-ориентированным кодом и основными концепциями программирования (например, переменными, циклами и условными операторами), вы уже хорошо подготовлены к работе с фреймворком.

В этом учебнике по Flutter вы познакомитесь с базовым введением в набор средств разработки программного обеспечения, запрограммировав простое приложение, которое комбинирует слова в случайном порядке, а затем отображает эти комбинации. Для этого вам понадобятся основные инструменты для программирования с помощью Flutter: Flutter SDK и редактор. SDK доступен для Windows, macOS и Linux. Вы можете загрузить соответствующий установочный пакет прямо с официального сайта Flutter.

Что касается редактора, вы можете выбрать любой другой. Однако, чтобы получить оптимальный пользовательский опыт с автозаполнением кода, подсветкой синтаксиса, поддержкой отладки и редактирования виджетов, Google рекомендует использовать редактор кода, имеющий официальный плагин Flutter. Поэтому мы решили использовать Android Studio в нашем учебнике по Flutter. После установки подходящей среды разработки, оптимизированной для создания приложений для Android, установите плагин Flutter, выполнив следующие действия:

  1. Перейдите к пункту меню «Файл».
  2. Нажмите на «Настройки», а затем выберите «Плагины».
  3. Введите «Dart» в строке поиска. Затем нажмите на кнопку «Установить» для соответствующего результата поиска, чтобы выполнить первоначальную установку расширения для необходимого языка программирования Dart.
  4. Подтвердите использование этого стороннего расширения, нажав кнопку «Принять».
  5. Повторите эти действия для поискового запроса «Flutter». После установки нажмите «Перезапустить IDE», чтобы применить изменения.
Примечание

В качестве альтернативы Android Studio Google рекомендует GNU Emacs, Visual Studio Code или IntelliJ IDEA — все они имеют официальный плагин Flutter.

Шаг 1: создайте свое первое приложение Flutter

После того как вы установили Flutter и желаемую среду разработки (или редактор), вы можете создать свое первое приложение Flutter. Как уже упоминалось ранее, в этом учебнике по Flutter мы используем Android Studio, поэтому сейчас мы запустим IDE для этой цели. В меню «Файл» сначала выберите «Новый», а затем «Новый проект Flutter», чтобы начать новый проект на основе этого фреймворка приложений.

Выберите «Flutter Application» в качестве желаемого типа проекта, а затем нажмите «Next». В меню конфигурации задайте имя проекта и местоположение вашего приложения. У вас также есть возможность добавить описание к проекту. В поле «Flutter SDK path» введите путь к установленному фреймворку Flutter.

Наконец, нажмите «Finish», чтобы создать новое приложение Flutter. В файл main.dart, основной рабочий файл проекта и данного учебника по Flutter, добавьте следующий код, чтобы указать приложению отобразить простое сообщение «Hello world» (вы можете удалить любой существующий код в файле main.dart):

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: 'Welcome to Flutter',
			home: Scaffold(
				appBar: AppBar(
					title: Text('Welcome to Flutter'),
				),
				body: Center(
					child: Text('Hello world'),
				),
			),
		);
	  }
}

После ввода этого фрагмента кода вы можете просмотреть начальную версию вашего приложения. В Android Studio выберите нужную виртуальную машину (находится в разделе «Выбор устройства Flutter»). Затем нажмите кнопку воспроизведения («Run main.dart»):

Примечание

Для предварительного просмотра приложения в Android Studio необходимо установить образ системы нужной целевой платформы. В противном случае вы не сможете выбрать виртуальное тестовое устройство в разделе «Flutter Device Selection» для тестирования приложения. Чтобы добавить его, выберите «Инструменты», а затем «AVD Manager». Затем нажмите «Создать виртуальное устройство» и установите желаемое виртуальное устройство. Подробные инструкции по созданию и управлению виртуальными устройствами в Android Studio можно найти на форуме разработчиков Android.

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

Шаг 2: добавьте внешний пакет

Получив простое начальное приложение на первом этапе обучения Flutter, мы теперь расширим его с помощью внешнего пакета. Точнее говоря, мы планируем добавить пакет words, необходимый для цели нашего проекта — проекта, представляющего собой приложение, которое комбинирует слова в случайном порядке. В нашем примере мы используем пакет с открытым исходным кодом «english_words» (лицензия MIT), который вы можете найти на платформе pub.dev вместе со многими другими пакетами с открытым исходным кодом. Этот модуль содержит более 5 000 наиболее часто используемых английских слов, что делает его идеальным для целей данного руководства по Flutter.

Приложения Flutter используют файл pubspec.yaml для управления пакетами и зависимостями. Откройте этот файл и добавьте запись для языкового пакета в список зависимостей (проверьте, что он обновлен; здесь это 3.1.5):

dependencies:
	flutter:
		sdk: flutter
	cupertino_icons: ^0.1.2
english_words: ^3.1.5

Затем выполните команду «flutter pub get». В Android Studio даже есть кнопка «Pub get» для этой цели.

Вернитесь в основной рабочий файл main.dart и импортируйте в него языковой пакет:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

Также необходимо добавить следующую строку в код приложения:

final wordPair = WordPair.random();

Наконец, замените дочернюю запись, которая выводит текст «Hello world», следующей записью:

child: Text(wordPair.asPascalCase),

Теперь каждый раз при выполнении обновленного кода приложения вы будете получать случайно сгенерированную пару английских слов.

Шаг 3: добавьте виджет с состоянием

Виджеты без состояния, такие как те, которые ранее использовались в этом учебнике Google Flutter, статичны. Они не могут изменять свое состояние во время работы приложения. Поэтому виджеты этого типа не могут быть изменены во время работы приложения. С другой стороны, stateful виджеты могут изменять свое состояние во время работы приложения, поэтому они не обязательно должны быть статичными во время выполнения приложения. Если вы хотите добавить интерактивность в некоторые части вашего приложения Flutter, вам понадобятся stateful виджеты.

Примечание

Во Flutter виджеты всегда либо статичны, либо не статичны. Типичными примерами компонентов без состояния являются иконки, кнопки и текстовые модули, а типичными примерами простых виджетов с состоянием являются флажки, формы и слайдеры.

Наш пример приложения также получит интерактивный виджет на этом этапе. Для этой реализации требуется как минимум два класса: класс StatefulWidget, который, в свою очередь, порождает экземпляр класса state.

Сначала мы создадим минимальный класс состояния под названием «RandomWordsState», добавив следующий код в конец файла main.dart:

class RandomWordsState extends State<randomwords> {</randomwords>
	// TODO Add build() method
}

В данном случае общий класс состояния явно определен для использования с виджетом «RandomWords». Сам виджет с состоянием добавляется в файл main.dart на следующем шаге с помощью следующего кода (он идет перед классом «RandomWordsState» в коде):

class RandomWords extends StatefulWidget {
	@override
	RandomWordsState createState() => RandomWordsState();
}

Когда вы выполните этот код нового приложения, Flutter сообщит вам, что в настоящее время для «RandomWordsState» не определена функция build().

В добавленном фрагменте кода для класса state вы найдете комментарий «//TODO Add build() method» в соответствующем месте, который теперь будет заменен кодом для функции build():

class RandomWordsState extends State<randomwords> {</randomwords>
	@override
	Widget build(BuildContext context) {
		final wordPair = WordPair.random();
		return Text(wordPair.asPascalCase);
	}
}

Наконец, удалите строку «final wordPair = WordPair.random();» из класса MyApp и замените дочернюю запись «child: Text(wordPair.asPascalCase),» на «child: RandomWords(),».

Когда вы выполните этот новый код, виртуальное тестовое устройство по-прежнему должно отображать пару слов, но теперь оно основано на виджете с состоянием, который потенциально может позволить взаимодействие с пользователем.

Шаг 4: создание представления списка с бесконечной прокруткой

Чтобы представить пример интерактивного виджета Flutter, мы расширим наше приложение в этой заключительной части руководства по Google Flutter. Точнее говоря, мы изменим класс «RandomWordsState» таким образом, чтобы он больше не просто отображал одиночные пары слов, а предоставлял пользователю бесконечный список пар слов для прокрутки. Кроме того, мы хотим сохранить ранее предложенные пары слов (чтобы избежать дублирования) и увеличить размер шрифта результатов.

Давайте начнем с последних двух пунктов (т.е. сохранения результатов и изменения размера шрифта), добавив список _suggestions и переменную _biggerFont:

class RandomWordsState extends State<randomwords> {</randomwords>
	final _suggestions = <wordpair>[];</wordpair>
	final _biggerFont = const TextStyle(fontSize: 18.0);
}

Затем добавьте соответствующую функцию _buildSuggestions() в класс «RandomWordsState»:

Widget _buildSuggestions() {
	return ListView.builder(
		padding: const EdgeInsets.all(16.0),
		itemBuilder: (context, i) {
			if (i.isOdd) return Divider();
			final index = i ~/ 2;
			if (index >= _suggestions.length) {
			_suggestions.addAll(generateWordPairs().take(10));
			}
			return _buildRow(_suggestions[index]);
		});
}

Функция, показанная выше, расширяет приложение несколькими возможностями. Сюда входит вывод списка пар слов (List.View), который облегчает чтение благодаря однопиксельному разделителю (Divider). Она также определяет, что дополнительные десять предложений будут представлены (строка: _suggestions.addAll), как только пользователь достигнет конца текущего отображаемого списка.

Другим основным компонентом этого расширенного виджета является функция _buildRow(), которая вызывается один раз для каждой пары слов и представляет каждую пару в виде ListTile. Мы реализуем эту функцию в следующем шаге:

Widget _buildRow(WordPair pair) {
	return ListTile(
		title: Text(
			pair.asPascalCase,
			style: _biggerFont,
		),
	);
}

Метод build(), который мы реализовали при создании виджета stateful (шаг 3), теперь должен быть настроен на использование функции buildSuggestions(). Поэтому предыдущее содержимое этого метода должно быть заменено следующим кодом:

@override
Widget build(BuildContext context) {
	return Scaffold(
		appBar: AppBar(
			title: Text('Word Generator'),
		),
		body: _buildSuggestions(),
	);
}

Наконец, обновите метод build() в классе MyApp, изменив заголовок и определив в домашней записи, что это виджет RandomWords:

title: 'Word Generator',
home: RandomWords(),

Если теперь снова выполнить этот код, приложение запустится под новым названием «Генератор слов». Кроме того, будет отображен целый список словосочетаний, который можно пролистать, чтобы увидеть больше результатов.

Краткое содержание руководства по Flutter

В ходе этого руководства по Google Flutter вы узнали основные принципы работы с Flutter и научились применять их для создания простого примера приложения. Конечно, вы можете разрабатывать свои индивидуальные приложения Flutter с гораздо большим количеством деталей и масштабом. Вы также можете настраивать дизайн, когда получите более глубокое понимание фреймворка.

В заключение мы представим вам полный код разработанного примера приложения для Android в файле main.dart:

import 'package:english_words/english_words.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: 'Word Generator',
			home: RandomWords(),
		);
	}
}
class RandomWords extends StatefulWidget {
	@override
	RandomWordsState createState() => RandomWordsState();
}
class RandomWordsState extends State<randomwords> {</randomwords>
	final _suggestions = <wordpair>[];</wordpair>
	final _biggerFont = const TextStyle(fontSize: 18.0);
	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(
				title: Text('Word Generator'),
			),
			body: _buildSuggestions(),
		);
}
Widget _buildSuggestions() {
		return ListView.builder(
			padding: const EdgeInsets.all(16.0),
			itemBuilder: (context, i) {
				if (i.isOdd) return Divider();
				final index = i ~/ 2;
				if (index >= _suggestions.length) {
				_suggestions.addAll(generateWordPairs().take(10));
				}
				return _buildRow(_suggestions[index]);
			});
}
Widget _buildRow(WordPair pair) {
		return ListTile(
			title: Text(
				pair.asPascalCase,
				style: _biggerFont,
			),
		);
	}
}

Оцените статью
cdelat.ru
Добавить комментарий