Flutterでtwitterのツイート投稿機能実装（サンプルコード付）

ツイート機能の実装

flutter開発でツイート投稿機能の実装について

シンプルなサンプルプログラムを例にとって

サンプルプログラムを紹介します。

サンプルプログラムの動き

サンプルプログラムの動きです。

右下のツイートボタンを押下すると

Twitterアプリ内の投稿画面に遷移します。

第一画面

投稿画面（Twitterアプリ内）

前提条件

今回の例は以下の条件限定です

モバイル内にTwitterアプリが入っている
既にアカウントでログイン済み

上記の条件に満たさなければ、動作は保証されません。

個人的には

ツイッターアプリもインストールされておらず

ログインもしていない状態で

ツイートボタン押す人は少数です。

あまり考えなくて良いかなと思います。

つーかこれで十分

そのため、エミュレータにはTwitterアプリが入っていないので動作しません。サンプルコードを動かす場合はAndroidからではなく、実機で動かしてください。

説明概要

Flutter開発者用のAPIがあるようですが、

今回のように

ツイートを投稿するだけなら、そういった開発者用APIは使わず

URIスキームで呼び出すAPI
（url_launcher）

を利用して

アプリを呼び出すだけで良いので、そのように作りました。

今回使用するAPI

今回は以下の２つを使います

url_launcher
material_design_icons_flutter

『url_launcher』のURIスキーム呼び出しを使って

Twitterアプリを呼び出します。

『material_design_icons_flutter』はtwitter用のICONを使うためだけに利用しています。

・・・実質、必要なAPIは『url_launcher』１つですね。

ソースコード

pubspec.yaml

name: twitter_sample
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
  sdk: '>=2.18.4 <3.0.0'
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  url_launcher: ^6.1.7
  material_design_icons_flutter: 6.0.7096
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
flutter:
  uses-material-design: true

解説

16、17行目で

url_launcher
material_design_icons_flutter

を使用するように宣言しています。

main.dart

import 'package:flutter/material.dart';
//twitterアイコンを使用するため
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
//ツイートするため
import 'package:url_launcher/url_launcher_string.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Twitter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Twitter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
  //ツイートするメソッド
  void tweet() async {
    final Map tweetParameters = {
      "text": '1行目 test1\n2行目 test2',
      "url": 'https://computer.sarujincanon.com',
      "hashtags": 'アプリ開発,ブログ書け',
    };
    //URIスキームを使ってtwitterに接続
    final Uri tweetScheme =
    Uri(scheme: "twitter", host: "post", queryParameters: tweetParameters);
    //Twitter呼び出し
    await launchUrlString(tweetScheme.toString());//アプリ起動
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          tweet();//ツイート
        },
        child: const Icon(MdiIcons.twitter),
      ),
    );
  }
}

解説

ツイートボタンを押すと51行目でtweet()を呼び出します。

      floatingActionButton: FloatingActionButton(
        onPressed: () {
          tweet();//ツイート
        },
        child: const Icon(MdiIcons.twitter),
      ),

tweet()内の32～36行目でtweetParametersにツイートしたい内容をセットし

    final Map tweetParameters = {
      "text": '1行目 test1\n2行目 test2',
      "url": 'https://computer.sarujincanon.com',
      "hashtags": 'アプリ開発,ブログ書け',
    };

38~41行目でURIスキームを使ってTwitterアプリを呼び出すと、アプリが立ち上がり投稿画面に遷移します。

    final Uri tweetScheme =
    Uri(scheme: "twitter", host: "post", queryParameters: tweetParameters);
    //Twitter呼び出し
    await launchUrlString(tweetScheme.toString());//アプリ起動

ちなみにtweetParametersに渡せる値は他にもありますので、以下を参考にしてください。

Twitter共有用リンクの各種パラメータ[Twitter Web Intents]