Как создать свое первое приложение Flutter

18 июня, 2021 12:37 пп 1 989 views | Комментариев нет

| | Комментировать запись

Flutter – это открытая платформа, созданная Google, которая ориентирована на создание кроссплатформенных приложений. Flutter в первую очередь сфокусирован на iOS и Android, но также разрабатывает надежную поддержку настольных компьютеров.

Примечание: Приложения Flutter созданы на языке программирования Dart.

В этом мануале вы создадите свое первое приложение Flutter.

Требования

Для выполнения этого руководства нужно:

  • Скачать и установить Flutter.
  • Загрузить и установить Android Studio или Visual Studio Code. Android Studio – это интегрированная многофункциональная среда IDE с поддержкой Flutter. Visual Studio Code предлагает более легкую, но достаточно мощную поддержку.
  • Рекомендуется также установить плагины для вашего редактора кода:

Данный мануал был написан для Flutter 1.2.x, но обновлен для Flutter 1.22.2.

1: Создание нового проекта Flutter

Итак, вы установили Flutter и соответствующие зависимости (Android SDK или XCode в зависимости от вашего компьютера). Теперь можно создать новый проект Flutter.

Сначала откройте окно терминала, перейдите в каталог, в котором вы хотите запустить проект, и выполните следующую команду:

flutter create hello_flutter

Перейдите в новый каталог:

cd hello_flutter

Откройте этот проект в редакторе кода и приступайте к работе.

2: Запуск проекта

Чтобы запустить проект Flutter в Visual Studio Code или Android Studio, рекомендуем ознакомиться с документацией.

В Visual Studio Code откройте Run and Debug, затем выберите Dart & Flutter из выпадающего списка, после чего выберите конфигурацию hello_flutter. Укажите симулятор (веб, iOS или Android) в строке состояния. Запустите приложение, нажав кнопку Start Debugging. После этого в симуляторе или браузере вы увидите свое новое демонстрационное приложение.

Если вы используете Android Studio, то он потребует указать устройство и выбрать конфигурацию.

3: Изучение кода

Итак, вы уже создали свое первое приложение Flutter и запустили его в эмуляторе! В этом разделе мы разберем часть сгенерированного кода.

Примечание: Стартовый код, сгенерированный flutter, является частью официальной кодовой базы Flutter и доступен по следующей лицензии.

Теперь откройте файл lib/main.dart в редакторе кода.

Раздел MyApp

Первая часть файла определяет раздел MyApp. Этот класс расширяет StatelessWidget:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
// ...

Сначала код импортирует пакет Material из Flutter. Этот пакет придает нашему приложению вид Material Design и открывает последующий доступ к виджетам и функциям в стиле Material.

Затем код регистрирует MyApp в качестве основного виджета нашего нового приложения; это делается с помощью метода runApp.

Внутри класса MyApp мы возвращаем метод build типа Widget, который, в свою очередь, возвращает MaterialApp. MaterialApp содержит метаданные, такие как текущие ThemeData, название приложения, домашний маршрут и т.п.

Примечание: Использовать здесь MaterialApp не обязательно. Мы также можем использовать CupertinoApp (в стиле iOS) или пользовательский стиль с помощью WidgetsApp.

Раздел MyHomePage

Следующая часть файла определяет MyHomePage. Этот класс расширяет StatefulWidget.

// ...
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
// ...

Последняя часть этого файла определяет _MyHomePageState. Этот класс расширяет State для виджета и метода сборки. Если вы когда-либо ранее работали с React, это должно вам напомнить JSX-метод render.

Одним из наиболее важных моментов, которые следует учитывать в приведенном выше примере, является тот факт, что мы переопределяем метод createState, чтобы настроить собственный способ управления состоянием:

// ...
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Следовательно, состояние _counter можно изменить с помощью setState(). Затем мы определяем метод сборки build, который создает Scaffold для нашего приложения, содержащего appBar и body.

При использовании MaterialApp класс Scaffold можно рассматривать как контейнер верхнего уровня. Он позволяет легко добавлять панели навигации, кнопки астатического действия, панели, селекторные отметки и многое другое.

Каждый раз, когда мы вызываем setState(), вместе с ним вызывается метод build виджета, таким образом обновляя представление и перерисовывая его с учетом нового состояния. Как можно видеть в нашем примере, этот вызов setState выполняется внутри FloatingActionButton через функцию onPressed: _incrementCounter.

Заключение

В этом руководстве вы научились создавать базовое приложение Flutter и исследовали сгенерированный программой стандартный код.

Теперь вы можете самостоятельно поэкспериментировать с приложением и изменить значение счетчика или текст.

Читайте также: Как ускорить разработку на Flutter

Tags: ,

Добавить комментарий