Плагин share в Flutter позволяет нам предоставлять пользователям возможность обмениваться контентом с помощью диалоговых окон платформы.
В этой статье мы создадим простое тестовое приложение Flutter и настроим возможность делиться записями с другими пользователями.
Требования
Для выполнения этого урока нужно:
- Скачать и установить Flutter.
- Загрузить и установить Android Studio или 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