tweet_ui 0.1.1

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:

        // {"created_at": "Mon Nov 12 13:00:38 +0000 2018", "id": 1061967001177018368, ...

or a CompactTweetView

        // {"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

*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.

    color: Colors.grey,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: CompactTweetView.fromTweet(
        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


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);

  onTapImage: openImage,

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


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

Changelog #

All notable changes to Tweet UI project will be documented in this file.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.


[0.1.1] - 16.08.2019

Added #

  • Custom onTapImage callback

[0.1.0+3] - 13.08.2019

Added #

  • Standard, compact and quote Tweet views
  • Support for 1, 2, 3, 4 photos, GIFs (which are .mp4 files in the Twitter API) and videos.
  • Showing if a user is verified
  • Opening links to user profile, symbols, hashtags, mentions and URLs, tweet, quote tweet


Example Flutter Tweet UI app #

PlatformStandard tweetCompact tweet

Video/GIF Tweets don't work on iOS simulators (video_player ios instructions)

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  tweet_ui: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:tweet_ui/tweet_ui.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Aug 23, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.4


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/models/api/entieties/hashtag_entity.dart.

Run flutter format to format lib/models/api/entieties/hashtag_entity.dart.

Format lib/models/api/entieties/media_entity.dart.

Run flutter format to format lib/models/api/entieties/media_entity.dart.

Format lib/models/api/entieties/mention_entity.dart.

Run flutter format to format lib/models/api/entieties/mention_entity.dart.

Fix additional 14 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/models/api/entieties/symbol_entity.dart (Run flutter format to format lib/models/api/entieties/symbol_entity.dart.)
  • lib/models/api/entieties/tweet_entities.dart (Run flutter format to format lib/models/api/entieties/tweet_entities.dart.)
  • lib/models/api/entieties/url_entity.dart (Run flutter format to format lib/models/api/entieties/url_entity.dart.)
  • lib/models/api/tweet.dart (Run flutter format to format lib/models/api/tweet.dart.)
  • lib/models/api/user.dart (Run flutter format to format lib/models/api/user.dart.)
  • lib/models/viewmodels/tweet_vm.dart (Run flutter format to format lib/models/viewmodels/tweet_vm.dart.)
  • lib/on_tap_image.dart (Run flutter format to format lib/on_tap_image.dart.)
  • lib/src/animated_play_button.dart (Run flutter format to format lib/src/animated_play_button.dart.)
  • lib/src/byline.dart (Run flutter format to format lib/src/byline.dart.)
  • lib/src/media_container.dart (Run flutter format to format lib/src/media_container.dart.)
  • lib/src/quote_tweet_view.dart (Run flutter format to format lib/src/quote_tweet_view.dart.)
  • lib/src/tweet_text.dart (Run flutter format to format lib/src/tweet_text.dart.)
  • lib/src/tweet_video.dart (Run flutter format to format lib/src/tweet_video.dart.)
  • lib/tweet_view.dart (Run flutter format to format lib/tweet_view.dart.)


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
cached_network_image ^1.1.1 1.1.1
chewie ^0.9.7 0.9.7
flutter 0.0.0
html_unescape ^1.0.1+3 1.0.1+3
intl ^0.15.8 0.15.8
photo_view ^0.4.2 0.4.2
url_launcher ^5.1.2 5.1.2
video_player ^0.10.1+6 0.10.2
Transitive dependencies
after_layout 1.0.7+2
async 2.3.0
charcode 1.1.2
collection 1.14.11 1.14.12
convert 2.1.1
crypto 2.1.2
flutter_cache_manager 1.1.1
http 0.12.0+2
http_parser 3.1.3
meta 1.1.6 1.1.7
open_iconic_flutter 0.3.0
path 1.6.4
path_provider 1.2.0
pedantic 1.8.0+1
screen 0.0.5
sky_engine 0.0.99
source_span 1.5.5
sqflite 1.1.6+3
string_scanner 1.0.5
synchronized 2.1.0+1
term_glyph 1.1.0
typed_data 1.1.6
uuid 2.0.2
vector_math 2.0.8
Dev dependencies