Используйте Flutter для разработки кроссплатформенных интерфейсных приложений.

С диверсификацией мобильных устройств и операционных систем разработка кросс-платформенных интерфейсных приложений стала важной темой во фронтенд-разработке. В качестве кроссплатформенной среды разработки мобильных приложений Flutter может одновременно поддерживать такие платформы, как iOS, Android и Интернет, что значительно снижает затраты на разработку и повышает эффективность разработки. Этот блог поможет вам шаг за шагом понять, как использовать Flutter для разработки кроссплатформенных интерфейсных приложений, включая основной контент, такой как построение среды, базовое использование, дизайн пользовательского интерфейса, управление состоянием и сетевые запросы.

2. Строительство окружающей среды

Прежде чем приступить к разработке с помощью Flutter, нам нужно настроить среду разработки.

2.1 Установите Flutter SDK

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

Перейдите на официальный сайт Flutter ( https://flutter.dev/), чтобы загрузить Flutter SDK, соответствующий операционной системе.
Разархивируйте загруженный SDK и добавьте его в системную переменную среды PATH.

2.2 Установка IDE

Flutter поддерживает несколько интегрированных сред разработки (IDE), таких как Android Studio, Visual Studio Code и т. д. Выберите IDE, с которой вы знакомы или хотите разработать.

Android Studio: откройте Android Studio, установите плагин Flutter и создайте проект Flutter.
Visual Studio Code: откройте VS Code, установите подключаемый модуль Flutter и создайте проект Flutter с помощью функции расширения VS Code.

2.3 Проверьте окружающую среду

Выполните следующую команду, чтобы проверить, успешно ли построена среда Flutter:

flutter doctor

Если все пойдет хорошо, вы должны увидеть вывод, подобный следующему:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale en-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.5.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] VS Code (version 1.58.0)
[✓] Connected device (3 available)

• No issues found!

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

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

3.1 Создайте проект Flutter с помощью командной строки

Выполните следующую команду, чтобы создать hello_flutterпроект Flutter с именем:

flutter create hello_flutter

hello_flutterЭто создаст проект Flutter с именем в текущем каталоге .

3.2 Запуск приложения Flutter

После создания проекта Flutter мы можем запустить приложение на эмуляторе или реальном устройстве.

Использование Android Studio: откройте Android Studio, выберите Open an existing Android Studio project, затем выберите hello_flutterкаталог проекта, нажмите OK. Затем выберите эмулятор или подключитесь к реальной машине и нажмите кнопку «Выполнить».
Использование VS Code: Откройте VS Code, откройте hello_flutterкаталог проекта и нажмите F5или коснитесь кнопки «Выполнить». Выберите эмулятор или подключитесь к реальному устройству и нажмите кнопку «Выполнить».

Если все пойдет хорошо, вы должны увидеть простое приложение Flutter, работающее на эмуляторе или на реальном устройстве.

4. Базовые знания Flutter

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

4.1 Виджет

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

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

В приведенном выше коде мы создали MyAppприложение Flutter, называемое и используемое MaterialAppдля Scaffoldпостроения базовой структуры приложения. AppBarИспользуется для создания панели приложения Center, которая центрирует дочерние компоненты.

4.2 Виджет с сохранением состояния и виджет без сохранения состояния

Во Flutter виджеты делятся на два типа: виджет с сохранением состояния и виджет без состояния.

Виджет без состояния: это неизменяемый виджет, свойства которого нельзя изменить после определения. Например Textи Iconдр.
Stateful Widget: это переменный виджет, свойства которого могут меняться в зависимости от состояния приложения. Например ListViewи TextFieldдр.

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Count: $_count'),
              ElevatedButton(
                onPressed: _increment,
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

В приведенном выше коде мы создали CounterAppStateful Widget с именем Stateful Widget для отображения счетчика. Нажмите кнопку, чтобы увеличить значение счетчика.

4.3 Маршрутизация и навигация

Во Flutter маршрутизация и навигация используются для перехода между страницами и передачи данных.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

В приведенном выше коде мы создали две страницы: HomePageи SecondPage. Нажмите HomePageкнопку, чтобы перейти на SecondPageстраницу. На SecondPageстранице нажмите кнопку, чтобы вернуться на предыдущую страницу.

4.4 Сетевой запрос

В реальной разработке нам обычно нужно взаимодействовать с внутренним сервером для получения и отправки данных. Flutter предоставляет httpбиблиотеки для отправки HTTP-запросов.

import 'package:http/http.dart' as http;

Future<void> fetchData() async {
  final response = await http.get('https://api.example.com/data');
  if (response.statusCode == 200) {
    print('Data: ${response.body}');
  } else {
    print('Failed to load data');
  }
}

В приведенном выше коде мы используем MethodChannelдля создания канала платформы и указания идентификатора связи. Во Flutter мы можем invokeMethodвызывать методы в нативном коде через методы и передавать параметры. В нативном коде нам нужно зарегистрировать соответствующий метод и выполнить соответствующую логику, когда Flutter взаимодействует с нативным кодом.

7.2 Реализация методов в собственном коде

В нативном коде нам нужно использовать соответствующий язык разработки платформы для реализации методов, определенных в канале платформы.

Платформа Android (Java/Kotlin):

package com.example.channel_example;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.MethodChannel;

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "com.example.channel";

    @Override
    public void configureFlutterEngine(FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
                .setMethodCallHandler((call, result) -> {
                    if (call.method.equals("nativeMethod")) {
                        String message = "Hello from Native";
                        result.success(message);
                    } else {
                        result.notImplemented();
                    }
                });
    }
}

В приведенном выше коде мы зарегистрировали FlutterMethodChannelметод nativeMethod, вызываемый с помощью, и возвращали простое сообщение при вызове Flutter.

8. Упаковка и развертывание

После завершения разработки приложения Flutter мы можем упаковать и развернуть приложение на разных платформах.

8.1 Упаковка

Во Flutter мы можем использовать следующую команду для упаковки приложения:

flutter build apk # 打包Android应用
flutter build ios # 打包iOS应用
flutter build web # 打包Web应用

8.2 Развертывание

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

Для приложений Android сгенерированный APK-файл можно загрузить в Google Play Store.
Для приложений iOS сгенерированный файл IPA можно загрузить в Apple App Store.
Для веб-приложений сгенерированные файлы сборки можно загрузить на веб-сервер.

9. Резюме

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

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