vs_media_picker

Description:

vs media picker

VS_Media_Picker is based in photo_widget package and has the same concept as image_picker but with a more attractive interface to choose an image or video from the device gallery, whether it is Android or iOS.
Flutter 3.3.2 #
Features #
[✔] pick image
[✔] pick video
[✔] pick multi image / video
[✔] cover thumbnail (preview first image on gallery)
[❌] take picture or video from camera
Demo #

Installation #

This package has only tested in android, add vs_media_picker: 0.0.2 in your pubspec.yaml
import vs_media_picker

import 'package:vs_media_picker/vs_media_picker.dart';
copied to clipboard
Getting started #

update kotlin version to 1.6.0 and classpath 'com.android.tools.build:gradle:7.0.4' in your build.gradle
in android set the minSdkVersion to 25 in your build.gradle


Android
add uses-permission AndroidMAnifest.xml file
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
copied to clipboard
ios
add this config in your info.plist file
<key>NSPhotoLibraryUsageDescription</key>
<string>Privacy - Photo Library Usage Description</string>
<key>NSMotionUsageDescription</key>
<string>Motion usage description</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>NSPhotoLibraryAddUsageDescription</string>
copied to clipboard
How to use #
Create a VSMediaPicker() widget:
Material(
child: VSMediaPicker(
/// required params
pathList: (path) { /// => (type List<PickedAssetModel>) return a list map with selected media metadata
/// returned data model
//PickedAssetModel(
// 'id': String,
// 'path': String,
// 'type': String,
// 'videoDuration': Duration,
// 'createDateTime': DateTime,
// 'latitude': double,
// 'longitude': double,
// 'thumbnail': Uint8List,
// 'height': double,
// 'width': double,
// 'orientationHeight': int,
// 'orientationWidth': int,
// 'orientationSize': Size,
// 'file': Future<File>,
// 'modifiedDateTime': DateTime,
// 'title': String,
// 'size': Size,
// )
},

/// optional params
maxPickImages: , /// (type int)
singlePick: , /// (type bool)
appBarColor: , /// (type Color)
albumBackGroundColor: , /// (type Color)
albumDividerColor: , /// (type Color)
albumTextColor: , /// (type Color)
appBarIconColor, /// (type Color)
appBarTextColor: , /// (type Color)
crossAxisCount, /// /// (type int)
gridViewBackgroundColor: , /// (type Color)
childAspectRatio, /// (type double)
appBarLeadingWidget, /// (type Widget)
appBarHeight: , /// (type double)
imageBackgroundColor: , /// (type Color)
gridPadding: /// (type EdgeInset)
gridViewControlle:, /// (type ScrollController)
gridViewPhysics: /// (type ScrollPhysics)
selectedBackgroundColor: /// (type Color)
selectedCheckColor: , /// (type Color)
thumbnailBoxFix: , /// (type BoxFit)
selectedCheckBackgroundColor: , /// (type Color)
onlyImages: , /// (type bool)
onlyVideos: , /// (type bool)
thumbnailQuality: , /// (type int) optional param, you can set the gallery thumbnail quality (higher is better but reduce performance)
)
);
copied to clipboard
Example #
import 'package:flutter/material.dart';
import 'package:vs_media_picker/vs_media_picker.dart';

void main() => runApp(const Example());

class Example extends StatelessWidget {
const Example({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Material(
child: VSMediaPicker(
pathList: (pathList){}
),
),
);
}
}

copied to clipboard
if you can use only cover thumbnail use this code line:
import 'package:flutter/material.dart';
import 'package:vs_media_picker/vs_media_picker.dart';

void main() => runApp(const Example());

class Example extends StatelessWidget {
const Example({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Material(
color: Colors.black,
child: Stack(
children: [
Padding(
padding: const EdgeInsets.all(15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Align(
alignment: Alignment.bottomLeft,
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 2
),
borderRadius: BorderRadius.circular(10)
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
/// this is the line to show the first image on gallery
child: const CoverThumbnail(
thumbnailQuality: 200,
thumbnailFit: BoxFit.cover
),
)
)
),
const Padding(
padding: EdgeInsets.only(left: 15,bottom: 50),
child: Align(
alignment: Alignment.bottomCenter,
child: Text(
'Only show the first image on gallery',
style: TextStyle(
color: Colors.white,
fontSize: 10
),
),
),
)
],
)
)
]
),
),
);
}
}

copied to clipboard