Cómo compartir contenido con el complemento Flutter Share

Introducción

El sharecomplemento le permite brindar a los usuarios la posibilidad de compartir contenido utilizando cuadros de diálogo para compartir de la plataforma nativa.

En este artículo, creará una aplicación Flutter de ejemplo que contiene una lista de caimanes y agregará la capacidad de compartirlos con otros usuarios.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Para descargar e instalar Flutter .
• Para descargar e instalar Android Studio o Visual Studio Code .
• Se recomienda instalar complementos para su editor de código:
  • Fluttery Dartcomplementos instalados para Android Studio.
  • Flutterextensión instalada para Visual Studio Code.

Este tutorial fue verificado con Flutter v2.0.6, Android SDK v31.0.2 y Android Studio v4.1.

Paso 1: Configuración del proyecto

Una vez que haya configurado su entorno para Flutter, puede ejecutar lo siguiente para crear una nueva aplicación:

flutter create flutter_share_example

Navegue hasta el nuevo directorio del proyecto:

cd flutter create flutter_share_example^

El uso flutter createproducirá una aplicación de demostración que mostrará la cantidad de veces que se hace clic en un botón.

Paso 2: Agregar el sharecomplemento

Ábrelo pubspec.yamlen tu editor de código y agrega el siguiente complemento:

archivo pubspec.yaml

dependencies:  flutter:    sdk: flutter  share: 2.0.1

Luego, guarde los cambios en su archivo.

Paso 3: Andamiaje del proyecto

Luego podemos continuar y actualizar nuestro main.dartarchivo para que contenga lo HomePageencontrado en home_page.dart:

lib/main.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(),    );  }}

Crea un nuevo home_page.dartarchivo y ábrelo con un editor de código. Agrega las siguientes líneas de código:

lib/página_de_inicio.dart

import 'package:flutter/material.dart';class MyHomePage extends StatefulWidget {  MyHomePage({Key key}) : super(key: key);  @override  _MyHomePageState createState() = _MyHomePageState();}class _MyHomePageState extends StateMyHomePage {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('My favourite Alligators'),      ),      body: Container(),    );  }}

MyHomePageserá un StatefulWidgetque contiene un AppBary un vacío Container.

Luego, guarde los cambios en sus archivos.

Paso 4: Creación de una clase de ejemplo

A continuación, necesitará una clase Alligator que contenga un namey description, la usaremos para generar nuestra lista de caimanes.

Crea un nuevo alligator_model.dartarchivo y ábrelo en tu editor de código. Agrega las siguientes líneas de código:

lib/alligator_model.dart

import 'package:flutter/foundation.dart';class Alligator {  String name;  String description;  Alligator({@required this.name, @required this.description});}

Luego podemos crear un ListAlligatorinterior MyHomePagey mostrarlos en la pantalla:

lib/página_de_inicio.dart

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 StateMyHomePage {  ListAlligator 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()      ),    );  }}

Añade el Listy mapel contenido del List.

Paso 5: Agregar la función para compartir

Para que cada vez que el usuario haga clic en un ListTile, nos conectaremos a la onTapfuncionalidad, llamando a una sharefunción:

lib/página_de_inicio.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 StateMyHomePage {  ListAlligator 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()      ),    );  }}

Este código importará share, definirá un sharemétodo y lo llamará con onTap.

Nota: Debemos asegurarnos de pasar el archivo a sharePositionOriginlos dispositivos iPad capturando el context.findRenderObject().

Compila tu código y ejecútalo en un emulador:

La parte principal de esto es la Sharefunción donde podemos proporcionar un texty opcional subject, que estamos usando para pasar esto a nuestra aplicación de mensajería en este ejemplo.

Conclusión

En este artículo, creó una aplicación Flutter de ejemplo que contiene una lista de caimanes y agregó la capacidad de compartir los caimanes con otros usuarios.

Si desea obtener más información sobre Flutter, consulte nuestra página de temas de Flutter para ver ejercicios y proyectos de programación.