betacode

Создайте свое первое приложение Flutter - Hello Flutter

  1. Цель статьи
  2. Создание проекта Flutter
  3. Объяснение структуры проекта
  4. Написание кода для приложения
  5. Запустите приложение

1. Цель статьи

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

2. Создание проекта Flutter

В Android Studio создайте новый проект Flutter.
  • File > New > New Flutter Project...
Проект был успешно создан. Вот его структура:

3. Объяснение структуры проекта

android
Папка автоматически генерирует код для приложения Android.
ios
Папка автоматически генерирует код для приложения iOS.
lib
Домашняя папка содержит Dart-код приложения.
lib/main.dart
Файл будет вызван для запуска (start) приложения.
test
Папка содержит Dart-коды, используемые для тестирования приложения.
test/widget_test.dart
Sample code
.gitignore
Git version control file - этот файл содержит конфигурацию проекта GIT.
.metadata
Эта папка создается автоматически с помощью инструмента Flutter.
.packages
Автоматически генерируется файл, содержащий список зависимостей (dependencies), используемых проектом.
.iml
Файл проекта Android Studio.
pubspec.yaml
Файл используется для объявления ресурсов, связанных с проектом, таких как изображения, шрифты и т. д.
pubspec.lock
Этот файл следует добавить в GIT Control чтобы члены вашей команды разработчиков использовали одни и те же версии библиотек.
README.md
Файл описывает проект, который написан в соответствии со структурой Markdown.

4. Написание кода для приложения

Удалите всё содержимое файла main.dart и замените его новым.
lib/main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World Demo Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Home page'),
    );
  }
}
class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
          child:
          Text(
            'Hello World',
          )
      ),
    );
  }
}

5. Запустите приложение

Для запуска приложения Flutter необходимо развернуть его на устройстве Android или iOS. Таким образом, в процессе разработки приложения у вас есть один из следующих вариантов:
  • Подключить физическое устройство Android к компьютеру и включить режим разработчика (Developer mode).
  • Подключить физическое устройство iOS (например, iPhone) к компьютеру и включить режим разработчика (Developer mode)
  • Запустить эмулятор Android (Android Emulator).
Мы программируем приложение Flutter на Android Studio, поэтому лучше всего запустить Android Emulator (эмулятор Android).
Теперь в Android Studio выберите:
  • Tools > AVD Manager
Или нажмите на значок "AVD Manager" на панели инструментов:
Затем запустите виртуальное устройство из списка:
Если вы не видите ни одного виртуального устройства в списке, создайте его, следуя приведенной ниже инструкции:
Android Emulator запущен и готов к развертыванию приложения Flutter.
На панели инструментов Android Studio запустите приложение Flutter, как показано на рисунке ниже:
Вот результат, который вы получите:

Pуководства Flutter

Show More