tweet_ui

Flutter Tweet UI - Flutter package that is inspired from twitter-kit-android.

Works on iOS and Android.

Getting Started

To use this package add it to the pubspec.yaml file:

tweet_ui: <latest_version>

import it:

import 'package:tweet_ui/tweet_ui.dart';

and create a TweetView from a JSON:

TweetView.fromTweet(
    Tweet.fromRawJson(
        jsonFromTwitterAPI
        // {"created_at": "Mon Nov 12 13:00:38 +0000 2018", "id": 1061967001177018368, ...
    )
);

or a CompactTweetView

CompactTweetView.fromTweet(
    Tweet.fromRawJson(
        jsonFromTwitterAPI
        // {"created_at": "Mon Nov 12 13:00:38 +0000 2018", "id": 1061967001177018368, ...
    )
);

There is also a special QuoteTweetView that is embedded in a TweetView or a CompactTweetView. This depends if a Tweet has a quoted_status value in the JSON.

Example of supported view and media types:

Sample tweets use real life tweet ids but for example purposes their content was changed.

VariantStandard tweetCompact tweetStandard Quote tweetCompact Quote tweet
1 photoimgimgimgimg
2 photosimgimgimgimg
3 photosimgimgimgimg
4 photosimgimgimgimg
video*imgimgimgimg
GIFimgimgimgimg

*If you want to show tweets with videos, please check the video_player installation.

Styling Tweets

Video player

By default the chewie/video_player package is used to show a gif/video, but you can set the useVideoPlayer flag to false if you want to show a image placeholder provided by the Twitter API and open a video in a new page.

VariantWith video_player/chewieWith placeholder
Standard Videoimgimg
Compact Videoimgimg
Standard GIFimgimg
Compact GIFimgimg

Text & colors

All texts are customizable. You can copy from the defaultxxx, defaultCompactxxx and defaultQuotexxxstyles like in the example below.

Card(
    color: Colors.grey,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: CompactTweetView.fromTweet(
        Tweet.fromRawJson(
          snapshot.data,
        ),
        useVideoPlayer: false,
        userNameStyle: defaultUserNameStyle.copyWith(fontWeight: FontWeight.w200),
        userScreenNameStyle: defaultUserScreenNameStyle.copyWith(fontWeight: FontWeight.w600),
        textStyle: defaultTextStyle.copyWith(
          fontWeight: FontWeight.w200,
          fontStyle: FontStyle.italic,
          shadows: [Shadow(color: Colors.white30)],
        ),
        clickableTextStyle: defaultClickableTextStyle.copyWith(color: Colors.white),
        backgroundColor: Colors.grey,
        quoteUserNameStyle: defaultQuoteUserNameStyle.copyWith(fontWeight: FontWeight.w800),
        quoteUserScreenNameStyle: defaultQuoteUserScreenNameStyle.copyWith(fontWeight: FontWeight.w100),
        quoteTextStyle: defaultQuoteTextStyle.copyWith(fontStyle: FontStyle.italic),
        quoteClickableTextStyle: defaultQuoteClickableTextStyle.copyWith(color: Colors.cyanAccent),
        quoteBorderColor: Colors.blueAccent,
        quoteBackgroundColor: Colors.blueGrey,
      ),
    ),
  );
VariantStandard tweetCompact tweet
Custom stylesimgimg

img

Custom callbacks

onTapImage - function called when user clicks on a image in a TweetView, CompactTweetView or QuoteTweetView. typedef OnTapImage = void Function(List<String> allPhotos, int photoIndex, String hashcode);


TweetView.fromTweet(
  Tweet.fromRawJson(
    snapshot.data,
  ),
  onTapImage: openImage,
);

  void openImage(List<String> allPhotos, int photoIndex, String hashcode) {
    print("Opened ${allPhotos[photoIndex]}");
  }

TODO

  1. Get Tweets from Twitter API
  2. Write tests
  3. Add option to set image quality

Libraries

default_text_styles
entity
hashtag_entity
media_entity
mention_entity
on_tap_image
symbol_entity
tweet
tweet_entities
tweet_ui
tweet_ui
tweet_view
tweet_vm
url_entity
user