Как обмениваться контентом в Flutter

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

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

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

Требования

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

• Скачать и установить Flutter.
• Загрузить и установить Android Studio или Visual Studio Code.
• Также рекомендуется установить плагины для вашего редактора кода:
  • Flutter и Dart для Android Studio.
  • Flutter для Visual Studio Code.

Это руководство было протестировано на версиях Flutter v2.0.6, Android SDK v31.0.2 и Android Studio v4.1.

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

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

flutter create flutter_share_example

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

cd flutter create flutter_share_example<^>

Команда flutter create создаст простое демонстрационное приложение, которое будет отображать количество нажатий кнопки.

2: Добавление плагина share

Откройте файл pubspec.yaml в редакторе кода и добавьте в него плагин:

dependencies:
  flutter:
    sdk: flutter

  share: 2.0.1

Затем сохраните изменения в файле.

3: Скаффолд проекта

Затем можно обновить наш файл main.dart, чтобы он содержал домашнюю страницу из файла home_page.dart:

import 'package:flutter/material.dart';
import 'home_page.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(),
    );
  }
}

Создайте файл home_page.dart и откройте его в редакторе кода, а затем добавьте в файл следующие строки:

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My favourite Alligators'),
      ),
      body: Container(),
    );
  }
}

MyHomePage будет ссылаться на StatefulWidget, который содержит AppBar и пустой Container.

Сохраните все изменения в своих файлах.

4: Создание класса

Затем нам понадобится класс (условно назовем его Alligator), содержащий name и description. Мы будем использовать его для создания списка (в этом руководстве для примера мы создадим список с данными об аллигаторах).

Создайте новый файл alligator_model.dart и откройте его в редакторе кода. Добавьте следующие строки:

import 'package:flutter/foundation.dart';

class Alligator {
  String name;
  String description;

  Alligator({@required this.name, @required this.description});
}

Затем внутри MyHomePage можно создать List <Alligator> и отобразить его на экране:

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Alligator> alligators = [
    Alligator(
      name: 'Crunchy',
      description: 'A fierce Alligator with many teeth.',
    ),
    Alligator(
      name: 'Munchy',
      description: 'Has a big belly, eats a lot.',
    ),
    Alligator(
      name: 'Grunchy',
      description: 'Scaly Alligator that looks menacing.',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My favourite Alligators'),
      ),
      body: Column(
        children: alligators
          .map((Alligator alligator) => Card(
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text(alligator.name),
                  subtitle: Text(alligator.description),
                ),
              ],
            ),
          ))
          .toList()
      ),
    );
  }
}

5: Настройка функции общего доступа

Теперь нужно сделать так, чтобы всякий раз, когда пользователь нажимает на ListTile, мы подключались к функции onTap, вызывая функцию share. Для этого нужно изменить файл lib/home_page.dart следующим образом:

import 'package:flutter/material.dart';
import 'package:share/share.dart';
import 'alligator_model.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Alligator> alligators = [
    Alligator(
      name: 'Crunchy',
      description: 'A fierce Alligator with many teeth.',
    ),
    Alligator(
      name: 'Munchy',
      description: 'Has a big belly, eats a lot.',
    ),
    Alligator(
      name: 'Grunchy',
      description: 'Scaly Alligator that looks menacing.',
    ),
  ];

  share(BuildContext context, Alligator alligator) {
    final RenderBox box = context.findRenderObject();

    Share.share("${alligator.name} - ${alligator.description}",
      subject: alligator.description,
      sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My favourite Alligators'),
      ),
      body: Column(
        children: alligators
          .map((Alligator alligator) => Card(
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text(alligator.name),
                  subtitle: Text(alligator.description),
                  onTap: () => share(context, alligator),
                ),
              ],
            ),
          ))
          .toList()
      ),
    );
  }
}

Этот код импортирует функцию share, определит метод share и вызовет его с помощью onTap.

Примечание: Чтобы убедиться, что мы передаем sharePositionOrigin для устройств iPad, нужно использовать context.findRenderObject().

Скомпилируйте свой код и запустите его в эмуляторе.

Основная часть приложения в этом примере – функция Share, с помощью которой мы можем предоставить текст (text) и по желанию тему (subject). Эти данные передаются в наше приложение для обмена сообщениями.

Заключение

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

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