'How To Display Images Picked From File Picker In Flutter
I am using file picker plugin to pick images I want to display the picked images on the screen below is my code Am able to pick image name and path and display them as text in my app but unable to display them as images, After I display those image then I want to upload the image to the firebase storage.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:file_picker/file_picker.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
String _fileName;
String _path;
Map<String, String> _paths;
String _extension;
bool _loadingPath = false;
bool _multiPick = false;
FileType _pickingType = FileType.any;
TextEditingController _controller = new TextEditingController();
@override
void initState() {
super.initState();
_controller.addListener(() => _extension = _controller.text);
}
void _openFileExplorer() async {
setState(() => _loadingPath = true);
try {
if (_multiPick) {
_path = null;
_paths = await FilePicker.getMultiFilePath(
type: _pickingType,
allowedExtensions: (_extension?.isNotEmpty ?? false)
? _extension?.replaceAll(' ', '')?.split(',')
: null);
} else {
_paths = null;
_path = await FilePicker.getFilePath(
type: _pickingType,
allowedExtensions: (_extension?.isNotEmpty ?? false)
? _extension?.replaceAll(' ', '')?.split(',')
: null);
}
} on PlatformException catch (e) {
print("Unsupported operation" + e.toString());
}
if (!mounted) return;
setState(() {
_loadingPath = false;
_fileName = _path != null
? _path.split('/').last
: _paths != null ? _paths.keys.toString() : '...';
});
}
void _clearCachedFiles() {
FilePicker.clearTemporaryFiles().then((result) {
_scaffoldKey.currentState.showSnackBar(
SnackBar(
backgroundColor: result ? Colors.green : Colors.red,
content: Text((result
? 'Temporary files removed with success.'
: 'Failed to clean temporary files')),
),
);
});
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
key: _scaffoldKey,
appBar: new AppBar(
title: const Text('File Picker example app'),
),
body: new Center(
child: new Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: new SingleChildScrollView(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(top: 20.0),
child: new DropdownButton(
hint: new Text('LOAD PATH FROM'),
value: _pickingType,
items: <DropdownMenuItem>[
new DropdownMenuItem(
child: new Text('FROM AUDIO'),
value: FileType.audio,
),
new DropdownMenuItem(
child: new Text('FROM IMAGE'),
value: FileType.image,
),
new DropdownMenuItem(
child: new Text('FROM VIDEO'),
value: FileType.video,
),
new DropdownMenuItem(
child: new Text('FROM MEDIA'),
value: FileType.media,
),
new DropdownMenuItem(
child: new Text('FROM ANY'),
value: FileType.any,
),
new DropdownMenuItem(
child: new Text('CUSTOM FORMAT'),
value: FileType.custom,
),
],
onChanged: (value) => setState(() {
_pickingType = value;
if (_pickingType != FileType.custom) {
_controller.text = _extension = '';
}
})),
),
new ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 100.0),
child: _pickingType == FileType.custom
? new TextFormField(
maxLength: 15,
autovalidate: true,
controller: _controller,
decoration:
InputDecoration(labelText: 'File extension'),
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.none,
)
: new Container(),
),
new ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 200.0),
child: new SwitchListTile.adaptive(
title: new Text('Pick multiple files',
textAlign: TextAlign.right),
onChanged: (bool value) =>
setState(() => _multiPick = value),
value: _multiPick,
),
),
new Padding(
padding: const EdgeInsets.only(top: 50.0, bottom: 20.0),
child: Column(
children: <Widget>[
new RaisedButton(
onPressed: () => _openFileExplorer(),
child: new Text("Open file picker"),
),
new RaisedButton(
onPressed: () => _clearCachedFiles(),
child: new Text("Clear temporary files"),
),
],
),
),
new Builder(
builder: (BuildContext context) => _loadingPath
? Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: const CircularProgressIndicator())
: _path != null || _paths != null
? new Container(
padding: const EdgeInsets.only(bottom: 30.0),
height: MediaQuery.of(context).size.height * 0.50,
child: new Scrollbar(
child: new ListView.separated(
itemCount: _paths != null && _paths.isNotEmpty
? _paths.length
: 1,
itemBuilder: (BuildContext context, int index) {
final bool isMultiPath =
_paths != null && _paths.isNotEmpty;
final String name = 'File $index: ' +
(isMultiPath
? _paths.keys.toList()[index]
: _fileName ?? '...');
final path = isMultiPath
? _paths.values.toList()[index].toString()
: _path;
return new ListTile(
title: new Text(
name,
),
subtitle: new Text(_path),
);
},
separatorBuilder:
(BuildContext context, int index) =>
new Divider(),
)),
)
: new Container(),
),
],
),
),
)),
),
);
}
}
Solution 1:[1]
User Image.file for example Image.file(File(_pickingType.path))
Solution 2:[2]
You can display the image like this:
Image.file(
File(_path),
fit: BoxFit.cover,
width: double.infinity,
)
Solution 3:[3]
You can use the image_picker package of flutter. Package on Pub.dev
Define the File above the build method.
File _image;
final picker = ImagePicker();
Define a function like this for picking the image from gallery:
Future getImage() async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);
//File image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
if (pickedFile != null) {
_image = File(pickedFile.path);
} else {
print('No image selected');
}
});
}
Then access that getImage() from some onPressed method of a button. You can display the image simply by this Widget:
Image.file(_image),
Solution 4:[4]
File _selected_file = file_you_got_from_exporer;
FileImage(_selected_file)
Solution 5:[5]
Image.memory(_pickedFile.toUint8List())
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Yohan Ra |
| Solution 2 | philoniare |
| Solution 3 | KrRishabh |
| Solution 4 | Syscall |
| Solution 5 | Syscall |