tweet_ui 1.1.0

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

Thanks for contributing: dasmikko, jamesblasco

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.

[Unreleased]

[1.1.0] - 05.02.2020

Changed #

  • Added displaying time when tweet was created. For now only 24H format
  • Updated intl, video_player, photo_view

Fixed #

  • Fixed default tweet text color when entities array was empty

[1.0.0] - 03.01.2020

  • Updated cached_network_image, video_player and url_launcher
  • Updated JSON examples

[0.2.0-rc.1] - 25.11.2019

Changed #

  • Updated cached_network_image, video_player, photo_view and url_launcher

[0.1.1+7] - 25.10.2019

Changed #

  • Revert updating cached_network_image, photo_view packages

[0.1.1+6] - 25.10.2019

(version bump)

[0.1.1+5] - 25.10.2019

Changed #

  • Fix cached_network_image and photo_view dependency version range

[0.1.1+4] - 25.10.2019

Changed #

  • Updated cached_network_image, photo_view, url_launcher packages

[0.1.1+3] - 21.10.2019

Changed #

  • Updated cached_network_image, video_player, chewie, photo_view, url_launcher packages
  • Updated JSON examples

[0.1.1+2] - 13.09.2019

Changed #

  • Updated video_player, chewie and photo_view packages

[0.1.1+1] - 28.08.2019

Changed #

  • Updated video_player and intl packages

[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/README.md

Example Flutter Tweet UI app #

PlatformStandard tweetCompact tweet
Androidimgimg
iOSimgimg

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:


dependencies:
  tweet_ui: ^1.1.0

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';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
73
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
86
Learn more about scoring.

We analyzed this package on Feb 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

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

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
cached_network_image ^2.0.0 2.0.0
chewie ^0.9.8+1 0.9.8+1
flutter 0.0.0
html_unescape ^1.0.1+3 1.0.1+3
intl ^0.16.1 0.16.1
photo_view ^0.9.1 0.9.2
url_launcher ^5.4.1 5.4.1
video_player ^0.10.6 0.10.7
Transitive dependencies
async 2.4.0
charcode 1.1.3
collection 1.14.11 1.14.12
convert 2.1.1
crypto 2.1.4
flutter_cache_manager 1.1.3
flutter_web_plugins 0.0.0
http 0.12.0+4
http_parser 3.1.3
meta 1.1.8
open_iconic_flutter 0.3.0
path 1.6.4
path_provider 1.6.0
pedantic 1.9.0
platform 2.2.1
plugin_platform_interface 1.0.1
screen 0.0.5
sky_engine 0.0.99
source_span 1.6.0
sqflite 1.2.1
string_scanner 1.0.5
synchronized 2.2.0
term_glyph 1.1.0
typed_data 1.1.6
url_launcher_macos 0.0.1+2
url_launcher_platform_interface 1.0.5
url_launcher_web 0.1.1
uuid 2.0.4
vector_math 2.0.8
video_player_platform_interface 1.0.4
video_player_web 0.1.2
Dev dependencies
flutter_test