TheAlphamerc/flutter_plugin_add_thumbnail

add_thumbnail Plugin

pub package Codemagic build status GitHub last commit Open Source Love GitHub GitHub stars GitHub forks

A new Flutter package. It is build for fetching media thumbnail associate to url. On adding urls it creates thumbnail wigdet.

Download App GitHub All Releases

https://playerzon.com/asset/download.png

Video Url

Youtube Link:- https://www.youtube.com/watch?v=1MAuErvBtKA

Screenshots

Initial Screen	Add Thumbnail dialog	Image thumbnail
https://github.com/TheAlphamerc/flutter_plugin_add_thumbnail/blob/master/screenshots/screenshot_1.jpg?raw=true	https://github.com/TheAlphamerc/flutter_plugin_add_thumbnail/blob/master/screenshots/screenshot_2.jpg?raw=true	https://github.com/TheAlphamerc/flutter_plugin_add_thumbnail/blob/master/screenshots/screenshot_3.jpg?raw=true

MediaListView widget	MediaListView with multiple children	Error on invaild link
https://github.com/TheAlphamerc/flutter_plugin_add_thumbnail/blob/master/screenshots/screenshot_4.jpg?raw=true	https://github.com/TheAlphamerc/flutter_plugin_add_thumbnail/blob/master/screenshots/screenshot_5.jpg?raw=true	https://github.com/TheAlphamerc/flutter_plugin_add_thumbnail/blob/master/screenshots/screenshot_6.jpg?raw=true

Add Link Data flow

await Thumbnail.addLink(
  context: context,
  /// callback that return thumbnail information in `MediaInfo` object
   onLinkAdded: (mediaInfo) {
      print("Thumbnail title:- ${mediaInfo.title}");
      print("Thumbnail url:- ${mediaInfo.thumbnailUrl}");
  },
);

• Invoke method Thumbnail.addLink() to display add link dialog.
• Add valid link in text field.
• Click Next button.
• On Next button clicked it it fetch meta accoicated with link.
• If fetched data contain valid image url it will shows image thumbnail.
• Else it will show some error text.
• Save button will visible only if thumbnail image is fetched.
• On Save button clicked it return MediaInfo object that contains thumbnail information like title, imageUrl etc.
• On Cancel button clicked it will close dialog and return nothing.

MediaListView Widget

List<MediaInfo> mediaList = [];
List<String> urlList = ["https://www.youtube.com/watch?v=uv54ec8Pg1k"];
 
 MediaListView(
   titleTextStyle: TextStyle(color:Colors.white),
   titleTextBackGroundColor: Colors.grey,
   overlayChild:Icon(Icons.save),
   urls: urlList,
   mediaList: mediaList,
    onPressed: (url) {
     print(url);
   },
 );

• To show thumbnails list pass valid media url list.
• If this is set to null thumbnail list will create from media list
• If mediaList and urls both have values then thumbnail list will create using both list.

Getting Started

1. Add library to your pubspec.yaml

dependencies:
  add_thumbnail: ^0.0.1

2. Import library in dart file

import 'package:add_thumbnail/add_thumbnail.dart';

3. How to use FilterList

Create of list of MediaInfo object

  List<MediaInfo> mediaList = [];

Create List of String

List<String> urlList = ["https://www.youtube.com/watch?v=uv54ec8Pg1k"];

Create async function and call Thumbnail.addLink()

   void openAddLinkDialog() async {
    // Open  thumbnail dialog to add link
    await Thumbnail.addLink(
      context: context,
      /// callback that return thumbnail information in `MediaInfo` object
       onLinkAdded: (mediaInfo) {
        if (mediaInfo != null && mediaInfo.thumbnailUrl.isNotEmpty) {
          setState(() {
            mediaList.add(mediaInfo);
          });
        }
      },
    );
  }

Create MediaList widget to show thumbnail list

Widget getMediaList() {
    return MediaListView(
      onPressed: (url) {
        print(url);
      },
      urls: urlList,
      mediaList: mediaList,
    );
  }

Call openAddLinkDialog function on floatingActionButton pressed

  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFEEEEEE),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:(mediaList == null || mediaList.isEmpty) && (urlList == null || urlList.isEmpty)
          ? Center(
              child: Text(
                "Press add button to add thumbnail.",
                style: TextStyle(color: Colors.black54, fontSize: 16),
              ),
            )
          : getMediaList(),
      floatingActionButton: FloatingActionButton(
        onPressed: openAddLinkDialog,
        tooltip: 'Add link',
        child: Icon(Icons.add),
      ),
    );
  }

Pull Requests

I welcome and encourage all pull requests. It usually will take me within 24-48 hours to respond to any issue or request.

Created & Maintained By

Sonu Sharma (Twitter) (Youtube) (Insta) Twitter Follow

If you found this project helpful or you learned something from the source code and want to thank me, consider buying me a cup of :coffee:

• PayPal

Visitors Count

Loading