Featured image of post FlutterでTwitterに共有するボタンを作った

FlutterでTwitterに共有するボタンを作った

FlutterでTwitterに簡単にツイートをするためのボタンを作りました.コピペで簡単に使えます.

はじめに

最近Flutterをはじめました.アプリを作っている中でいい感じにTweetをするボタン(FloatingActionButton)を作ったので共有します.多分コピペで少し変えてもらうだけで使えます!

実装

どんな感じか

動作

Twitterのスキームでアプリ自体を呼び出すか,Web Intentでツイートをするようにしています.

Twitterアプリが入っていたらアプリでツイート!それ以外はブラウザでツイート!!

1
2
3
    await canLaunch(tweetScheme.toString())
        ? await launch(tweetScheme.toString())
        : await launch(tweetIntentUrl.toString());

構成要素

以下のurl_launcherを使ってURLをOSで開くために使いました.

Twitterアイコンを使うためにMdiアイコンを扱うmaterial_design_icons_flutterを使いました.

コード全体

以下がコードになります.都合上FloatingActionButtonにしてますが,任意のButtonにしても問題なく動きます.

Widget

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:url_launcher/url_launcher.dart';

class TwitterShareWidget extends StatelessWidget {
  final String text;
  final String url;
  final List<String> hashtags;
  final String via;
  final String related;

  const TwitterShareWidget(
      {Key key,
      @required this.text,
      this.url = "",
      this.hashtags = const [],
      this.via = "",
      this.related = ""})
      : super(key: key);

  void _tweet() async {
    final Map<String, dynamic> tweetQuery = {
      "text": this.text,
      "url": this.url,
      "hashtags": this.hashtags.join(","),
      "via": this.via,
      "related": this.related,
    };

    final Uri tweetScheme =
        Uri(scheme: "twitter", host: "post", queryParameters: tweetQuery);

    final Uri tweetIntentUrl =
        Uri.https("twitter.com", "/intent/tweet", tweetQuery);

    await canLaunch(tweetScheme.toString())
        ? await launch(tweetScheme.toString())
        : await launch(tweetIntentUrl.toString());
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      child: Icon(MdiIcons.twitter),
      backgroundColor: Colors.lightBlueAccent,
      onPressed: () {
        _tweet();
      },
    );
  }
}

Info.plist

以下の辞書を追加して,iosではURLスキーム,特にTwitterスキームを許可しないと公式アプリが開かないので注意.

1
2
3
4
5
6
<key>LSApplicationQueriesSchemes</key>
    <array>
        <string>https</string>
        <string>http</string>
        <string>twitter</string>
    </array>            

めっちゃドツボにハマったポイント…

comments powered by Disqus
Built with Hugo
テーマ StackJimmy によって設計されています。