File Download in flutter.
By: Snehal Masalkar
Tags: Flutter, Flutter App Development, Mobile App Development, Download, Mobile Apps

File download in Flutter.

The below gif represents, how to download or view a file in Flutter.

I have created a sample file model.

class FileModel {

String id;

String name;

String fileUrl;





FileModel({

@required this.id,

@required this.name,

@required this.fileUrl,



});

}

2. Using the file model, I have created a list called fileList and added a few items to the list.

List<FileModel> fileList = [

FileModel(

id: '1',

name: 'image',

fileUrl:

'https://upload.wikimedia.org/wikipedia/commons/3/3f/JPEG_example_flower.jpg',

), FileModel(

id: '2',

name: 'image1',

fileUrl:

'https://images.all-free-download.com/images/graphicthumb/tulip_flowers_highdefinition_picture_01_166861.jpg'

), FileModel(

id: '3',

name: 'image2',

fileUrl:

'https://images.all-free-download.com/images/graphicthumb/tulip_flowers_highdefinition_picture_01_166861.jpg',

), FileModel(

id: '4',

name: 'pdf file',

fileUrl: 'http://www.africau.edu/images/default/sample.pdf',

),

]; 3. So, I have displayed list of files inside column. Column(

children: fileList.map((file) {

return _fileRowWidget(file);

}).toList(),

) 4. Inside column I have return a _fileRowWidget to display filename and download button. Widget _fileRowWidget(FileModel file) {

return Row(

children: [

Expanded(

child: Container(

margin: EdgeInsets.all(15.0),

child: Text(file.name)),

),

InkWell(

onTap: (){

_onTap(file);

},

child: IconButton(

icon: Icon(Icons.file_download),

),

)

],

);

} 5. Ontap of download button, _onTap(FileModel file) function is call. _onTap(FileModel file) async {

String fileURL = '${file.fileUrl}';

String fileType = fileURL.split('.').last.toLowerCase();



if (file.fileType == 'jpeg' ||

file.fileType == 'jpg' ||

file.fileType == 'image' ||

file.fileType == 'png') {

showCupertinoModalPopup(

context: context,

builder: (BuildContext _context) {

return _imageViewWidget(file.fileUrl);

});

} else {

await launchUrl(url: fileURL);

}

} This is the main function which required parameter file. Using file url we can get the file extension which is stored in string fileType.According to extension I am checking the filetype. If file extension is jpeg, jpg, image or png only open file otherwise call launchUrl function. First we have to look into widet _imageViewWidget(file.fileUrl).This widget displayed image and close button, ontap of close button it will pop the context. Widget _imageViewWidget(String fileUrl) {

return Material(

child: BackdropFilter(

filter: ui.ImageFilter.blur(

sigmaX: 1.5,

sigmaY: 1.5,

),

child: GestureDetector(

onTap: () => Navigator.pop(context),

child: SafeArea(

child: Container(

color: Colors.transparent,

padding: EdgeInsets.fromLTRB(

30.0,

50.0,

30.0,

50.0,

),

child: Column(

children: <Widget>[

Flexible(

child: PhotoView(

backgroundDecoration: BoxDecoration(

color: Colors.transparent,

),

imageProvider:CachedNetworkImageProvider(fileUrl),

loadingBuilder:

(BuildContext context, ImageChunkEvent event) =>

showLoader(),

),

),

Center(

child: IconButton(

icon: CircleAvatar(

backgroundColor: Colors.orange,

child: Icon(

Icons.close,

color: Colors.white,

),

),

onPressed: () => Navigator.pop(context),

),

)

],

),

),

),

),

),

);

} To display image I have used PhotoView, for that I have added dependency in pubspec.yamal file. Also added dependency for cachedNetworkImageProvider for chaching the network image. 6. If the filetype is not image, then call function launchUrl().

for that we have to first add dependency of url_launcher. static Future<Null> launchUrl(

{@required String url}) async {

try {

await launch(url);

} catch (e, s) {

print(' Unable to open url');

}

}

In this way, we can view or download the file.