I am trying to create an image using Canvas and Picture Recorder.
I am able to output an image with two circles correctly using..
c.drawCircle(offset, 20.0, paint);
c.drawCircle(offset2, 20.0, paint);
But using following code returns a blank image
c.drawImage(imagetoDraw, offset3, paint);
This is how I am importing imagetoDraw asset
getImageFromAsset(){
rootBundle.load("images/1.jpg").then( (bd) {
Uint8List lst = new Uint8List.view(bd.buffer);
ui.instantiateImageCodec(lst).then( (codec) {
codec.getNextFrame().then(
(frameInfo) {
imagetoDraw = frameInfo.image;
print ("bkImage instantiated: $imagetoDraw");
}
);
});
});
}
What am I missing?
complete code:
import 'package:flutter/material.dart';
//import 'package:path_provider/path_provider.dart';
import 'dart:ui' as ui;
import 'dart:typed_data';
import 'dart:async';
//import 'dart:io';
import 'package:flutter/services.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Image _image;
ui.Image imagetoDraw;
#override
void initState() {
super.initState();
_image = new Image.network(
'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png',
);
getImageFromAsset();
}
getImageFromAsset(){
rootBundle.load("images/1.jpg").then( (bd) {
Uint8List lst = new Uint8List.view(bd.buffer);
ui.instantiateImageCodec(lst).then( (codec) {
codec.getNextFrame().then(
(frameInfo) {
imagetoDraw = frameInfo.image;
print ("bkImage instantiated: $imagetoDraw");
}
);
});
});
}
_generateImage() {
_generate().then((val) => setState(() {
_image = val;
}));
}
Future<Image> _generate() async {
ui.PictureRecorder recorder = new ui.PictureRecorder();
Canvas c = new Canvas(recorder);
var rect = new Rect.fromLTWH(0.0, 0.0, 100.0, 100.0);
c.clipRect(rect);
final paint = new Paint();
paint.strokeWidth = 2.0;
paint.color = const Color(0xFF333333);
paint.style = PaintingStyle.fill;
final offset = new Offset(10.0, 10.0);
final offset2 = new Offset(90.0, 90.0);
final offset3 = new Offset(30.0, 30.0);
c.drawCircle(offset, 20.0, paint);
c.drawCircle(offset2, 20.0, paint);
c.drawImage(imagetoDraw, offset3, paint);
var picture = recorder.endRecording();
final pngBytes = await picture
.toImage(100, 100)
.toByteData(format: ui.ImageByteFormat.png);
var image = Image.memory(pngBytes.buffer.asUint8List());
return image;
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_image,
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _generateImage,
tooltip: 'Generate',
child: new Icon(Icons.add),
),
);
}
}
This seems to be a GPU-related issue, as mentioned in the comments flutter run --enable-software-rendering can be a workaround. I've tried your locally and it works well without issues.
Related
I am currently creating a PDF to display inputted data from the user and I want to display the pdf in a new tab so they can either print it or download it or just close out.
The current PDF creation method is:
Future<void> createPDF() async{
final PdfDocument document = PdfDocument();
document.pages.add().graphics.drawString(
'Hello World!', PdfStandardFont(PdfFontFamily.helvetica, 20),
brush: PdfSolidBrush(PdfColor(0, 0, 0)),
bounds: Rect.fromLTWH(20, 60, 150, 30));
List<int> bytes = await document.save();
document.dispose();
saveAndLaunchFile(bytes, '$NewConfig.pdf');
}
then to open the file I have this method:
Future<void> saveAndLaunchFile(List<int> bytes, String fileName) async {
Uint8List test = Uint8List.fromList(bytes);
final pdfController = PdfController(document:PdfDocument.openData(test));
PdfView(controller: pdfController);
}
The issue I am running into is the new tab that opens displays this:
37806870454946551310371311462502541310493248321119810613106060131047841211121013247679711697108111103131047809710310111532503248328213106262131010111010011198106131050324832111981061310606013104784121112101324780971031011151310477510510011532915132483282931310476711111711011632491310478210111511111711499101115326060626213101310477710110010597661111203291483248325357533256525093131062621310101110100111981061310513248321119810613106060131047671111171101163249131047841211121013247809710310111513104775105100115329152324832829313104780971141011101163250324832821310626213101011101001119810613105232483211198106131060601310478412111210132478097103101131047809711410111011632513248328213104767111110116101110116115329153324832823254324832823255324832829313104782101115111117114991011153260601310478011411199831011163291478068703247841011201169313104770111110116326060131047994998565353545345534851514552101565345985399504553565154485748981015048513256324832821310626213101310626213101310626213101011101001119810613105332483211198106131060601310477010510811610111432477010897116101681019911110010113104776101110103116104325713106262131011511611410197109131012094434001140114131010111010011511611410197109131010111010011198106131054324832111981061310606013104770105108116101114324770108971161016810199111100101131047761011101031161043257131062621310115116114101971091310120941140082082131010111010011511611410197109131010111010011198106131055324832111981061310606013104770105108116101114324770108971161016810199111100101131047761011101031161043250505713106262131011511611410197109131012094101143657534916133239129252135241322146718217921720554949169175213642071871051869320038539138254122147698014597301321532472302034337215176592471105216061243225561856225136314915325146710778105157252165162164620485841822824418812023711612918515227228989410517881108111961551426748148156415712843203422444621814625525521417525223914411496171408922315518373155231199452369425460117164423832424364215131201621976962111762147219361615719178233240147195177114221341688311317017616894244613148201231158207322789229127168204178122502141225624896143871835514860100184613795972178011310101110100115116114101971091310101110100111981061310563248321119810613106060131047841211121013247701111101161310478311798116121112101324784121112101491310476697115101701111101163247721011081181011161059997131047691109911110010511010332478710511065110115105691109911110010511010313106262131010111010011198106131012011410110213104832571310484848484848484848483254535351533210213104848484848484848495532484848484832110131048484848484848485550324848484848321101310484848484848484956483248484848483211013104848484848484850535732484848484832110131048484848484848525256324848484848321101310484848484848485351543248484848483211013104848484848484854505232484848484832110131048484848484848575152324848484848321101310116114971051081011141310606013104782111111116324932483282131047831051221013257131062621310131011511697114116120114101102131049485157131037376979701310
which I am guessing is the bytes but am at a loss as to what I am supposed to do from here.
any info?
I suggest you to directly use a pub package like native_pdf_view.
Its easyer than your method in my opinion and you dont need to reinvente the wheel.
EDIT:
Here is a code that i do quickly, it can be improve with a ChangeNotifier etc... to handle Future function, But it work.
main.dart
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:native_pdf_view/native_pdf_view.dart';
import 'package:syncfusion_flutter_pdf/pdf.dart' as scPdf;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late PdfController _pdfController;
bool isPdfLoaded = false;
Future<void> createPDF() async{
final scPdf.PdfDocument document = scPdf.PdfDocument();
document.pages.add().graphics.drawString(
'Hello World!', scPdf.PdfStandardFont(scPdf.PdfFontFamily.helvetica, 20),
brush: scPdf.PdfSolidBrush(scPdf.PdfColor(0, 0, 0)),
bounds: Rect.fromLTWH(20, 60, 150, 30));
List<int> bytes = await document.save();
document.dispose();
saveAndLaunchFile(bytes, 'test.pdf');
}
Future<void> saveAndLaunchFile(List<int> bytes, String fileName) async {
Uint8List test = Uint8List.fromList(bytes);
final pdfController = PdfController(document:PdfDocument.openData(test));
setState(() {
isPdfLoaded = true;
_pdfController = pdfController;
});
}
#override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'PDF',
),
isPdfLoaded ? Container(width : size.width, height: size.height * 0.5, child : PdfView(controller: _pdfController)) : Text("Pdf not loaded"),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: createPDF,
tooltip: 'CreatePDF',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
Re-EDIT:
This is the exemple using Navigator.push to display the pdf in another page:
main.dart
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:native_pdf_view/native_pdf_view.dart';
import 'package:stackoverflow/pdf_view.dart';
import 'package:syncfusion_flutter_pdf/pdf.dart' as scPdf;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late PdfController _pdfController;
bool isPdfLoaded = false;
Future<void> createPDF() async{
final scPdf.PdfDocument document = scPdf.PdfDocument();
document.pages.add().graphics.drawString(
'Hello World!', scPdf.PdfStandardFont(scPdf.PdfFontFamily.helvetica, 20),
brush: scPdf.PdfSolidBrush(scPdf.PdfColor(0, 0, 0)),
bounds: Rect.fromLTWH(20, 60, 150, 30));
List<int> bytes = await document.save();
document.dispose();
saveAndLaunchFile(bytes, 'test.pdf');
}
Future<void> saveAndLaunchFile(List<int> bytes, String fileName) async {
Uint8List test = Uint8List.fromList(bytes);
final pdfController = PdfController(document:PdfDocument.openData(test));
await Navigator.of(context).push((MaterialPageRoute(builder: (context) => PdfViewPage(pdfController: pdfController))));
}
#override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Click on Floating button to create and open your pdf in another view',
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: createPDF,
tooltip: 'CreatePDF',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
pdf_view.dart
import 'package:flutter/material.dart';
import 'package:native_pdf_view/native_pdf_view.dart';
class PdfViewPage extends StatelessWidget {
const PdfViewPage({Key? key, required this.pdfController}) : super(key: key);
final PdfController pdfController;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: PdfView(controller: pdfController)
),
);
}
}
i want to upload a image with image_picker_web to my flutter website.
This works without problems.
Than i need to edit the image (for example grayscale or draw on it) with the image_class from pub_dev and after that i want to display it on my flutter website.
But all my attempts not working. I have problem to convert the img.image class Image back to Uint8List for displaying in Image.memory .
Can anybody help me with a little code snippet?
Ronny
This is my code:
import 'dart:typed_data';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:image/image.dart' as img;
import 'package:image_picker/image_picker.dart';
import 'package:image_picker_web/image_picker_web.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Draw Picture Homepage'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late Uint8List pickedImage;
bool imageAvailable = false;
#override
void initState() {
super.initState();
}
getImageWeb() async {
final fromPicker = await ImagePickerWeb.getImageAsBytes();
/* // Fill it with a solid color (blue)
img.fill(test, img.getColor(0, 0, 255));
// Draw some text using 24pt arial font
img.drawString(test, img.arial_24, 0, 0, 'Hello World');
// Draw a line
img.drawLine(test, 0, 0, 320, 240, img.getColor(255, 0, 0), thickness: 3);
// Blur the image
img.gaussianBlur(test, 10); */
setState(() {
pickedImage = fromPicker!;
imageAvailable = true;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () => getImageWeb(),
child: Text('Select Image'),
),
Container(
width: 300,
child: imageAvailable ? Image.memory(pickedImage) : const SizedBox(height: 10),
),
const Text('Test'
),
],
),
),
);
}
}
This works. But i am not able to convert the edited Image (which is img.Image after editing) back to Uint8List to show it on the Website.
I have created a SamplePainter that inherits from CustomPainter as shown below, and in it, I am trying to create cartoonish screen tones using PictureRecorder.
When I try to use that screen tone to draw a shape using the paintImage function, I get an exception ("Object has been disposed.").
If I try to use canvas.drawImage instead, I get the same exception.
What is the problem?
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
void main() {
runApp(const MyApp());
}
// https://www.flutter-study.dev/widgets/button-widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Demo'),
),
body: SizedBox(
width: 400,
height: 400,
child: CustomPaint(
painter: _SamplePainter(),
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.green,
onPressed: () {},
child: const Icon(Icons.add),
),
),
);
}
}
class _SamplePainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) async {
final paint = Paint()..color = Colors.blue;
final boundsRect = const Offset(50, 50) & const Size(100, 100);
canvas.drawRect(boundsRect, paint);
var aPattern = await getPattern();
canvas.drawImage(aPattern, Offset.zero, paint);
// paintImage(
// canvas: canvas,
// rect: boundsRect,
// image: aPattern,
// repeat: ImageRepeat.repeat,
// );
}
Future<ui.Image> getPattern() async {
var pictureRecorder = ui.PictureRecorder();
Canvas patternCanvas = Canvas(pictureRecorder);
List<Offset> points = const [Offset(0, 0), Offset(1, 1)];
final patternPaint = Paint()
..color = Colors.black
..strokeWidth = 1
..style = PaintingStyle.stroke
..strokeJoin = StrokeJoin.round
..isAntiAlias = false;
patternCanvas.drawPoints(ui.PointMode.points, points, patternPaint);
final aPatternPicture = pictureRecorder.endRecording();
return aPatternPicture.toImage(2, 2);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
Try like this, the main problem you have, is that paint, should be sync method, not async
void main() {
runApp(const MyApp());
}
// https://www.flutter-study.dev/widgets/button-widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Demo'),
),
body: SizedBox(
width: 400,
height: 400,
child: FutureBuilder(
future: getPattern()
builder: (BuildContext context, AsyncSnapshot<ui.Image>
snapshot) {
return CustomPaint(
painter: _SamplePainter(snapshot.data),
);
},
),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.green,
onPressed: () {},
child: const Icon(Icons.add),
),
),
);
}
}
Future<ui.Image> getPattern() async {
var pictureRecorder = ui.PictureRecorder();
Canvas patternCanvas = Canvas(pictureRecorder);
List<Offset> points = const [Offset(0, 0), Offset(1, 1)];
final patternPaint = Paint()
..color = Colors.black
..strokeWidth = 1
..style = PaintingStyle.stroke
..strokeJoin = StrokeJoin.round
..isAntiAlias = false;
patternCanvas.drawPoints(ui.PointMode.points, points, patternPaint);
final aPatternPicture = pictureRecorder.endRecording();
return aPatternPicture.toImage(2, 2);
}
class _SamplePainter extends CustomPainter {
final ui.Image? aPattern;
_SamplePainter(this.aPattern);
#override
void paint(Canvas canvas, Size size) {
final paint = Paint()..color = Colors.blue;
final boundsRect = const Offset(50, 50) & const Size(100, 100);
canvas.drawRect(boundsRect, paint);
if (aPattern != null) {
canvas.drawImage(aPattern!, Offset.zero, paint);
}
// paintImage(
// canvas: canvas,
// rect: boundsRect,
// image: aPattern,
// repeat: ImageRepeat.repeat,
// );
}
#override
bool shouldRepaint(_SamplePainter oldDelegate) {
return aPattern != oldDelegate.aPattern;
}
}
I am using ImagePickerWeb to allow users to upload photos from my app
Future<void> getPhotos() async {
var imageFile = await ImagePickerWeb.getImage(outputType: ImageType.file);
print(imageFile);
if (imageFile != null) {
setState(() {
currentSelfie = imageFile;
_accDetails['customer_selfie'] = currentSelfie;
});
}
When I try to display the image via Image.File
Image.file(
currentSelfie,
height: screenAwareSize(100, context),
width: screenAwareSize(100, context),
fit: BoxFit.fill,
),
I get this error
File$ ([object File]) :<getObject: NoSuchMethodError: The
getter 'uri' was called on null.>
I am using the file format for my because I am passing the image to my back end server and it receives the data as a file. Any help would be appreciated.
You can copy paste run full code below
According to owner's description https://github.com/Ahmadre/image_picker_web#how-do-i-get-all-informations-out-of-my-imagevideo-eg-image-and-file-in-one-run
You can use ImagePickerWeb.getImageInfo and show image with Image.memory
code snippet
Future<void> getPhotos() async {
var mediaData = await ImagePickerWeb.getImageInfo;
String mimeType = mime(Path.basename(mediaData.fileName));
html.File mediaFile =
new html.File(mediaData.data, mediaData.fileName, {'type': mimeType});
print("imageFile ${mediaData.toString()}");
if (mediaData != null) {
currentSelfie = mediaData.data;
setState(() {});
}
}
...
currentSelfie == null
? Container()
: Image.memory(
(currentSelfie),
fit: BoxFit.fill,
),
working demo
full code
import 'dart:async';
import 'dart:io';
import 'package:mime_type/mime_type.dart';
import 'package:path/path.dart' as Path;
import 'package:flutter/material.dart';
import 'package:image_picker_web/image_picker_web.dart';
import 'dart:html' as html;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var currentSelfie;
Future<void> getPhotos() async {
var mediaData = await ImagePickerWeb.getImageInfo;
String mimeType = mime(Path.basename(mediaData.fileName));
html.File mediaFile =
new html.File(mediaData.data, mediaData.fileName, {'type': mimeType});
print("imageFile ${mediaData.toString()}");
if (mediaData != null) {
currentSelfie = mediaData.data;
setState(() {});
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
currentSelfie == null
? Container()
: Image.memory(
(currentSelfie),
fit: BoxFit.fill,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: getPhotos,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
I am a beginner in flutter. I was checking to use image_picker in flutter. But When I tried to check image_picker with my Andorid Phone (10) it won't show up. I don't know what happened, I have added android:requestLegacyExternalStorage="true" in AndroidManifest.xml,
still no change, I don't know what to do? Please help me
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
File _fileimage;
final _picker = ImagePicker();
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_fileimage != null
? FileImage(_fileimage)
: Text('No image selected'),
RaisedButton(
onPressed: () => _takePicture,
child: Text('hi'),
)
],
),
),
),
);
}
void _takePicture() async {
final pickedImage = await _picker.getImage(source: ImageSource.gallery);
// if (pickedImage == null) {
// return;
// }
File tmpFile = File(pickedImage.path);
final Directory directory = await getApplicationDocumentsDirectory();
final String path = directory.path;
final String fileName =
basename(pickedImage.path); // Filename without extension
final String fileExtension = extension(pickedImage.path); // e.g.
tmpFile = await tmpFile.copy('$path/$fileName$fileExtension');
setState(() => _fileimage = tmpFile);
}
}
I found problem with your code.
You used 'FileImage' in 'Widget' is required. Because 'FileImage' returns 'ImageProvider', you should use 'Image.file()' instead of 'FileImage'.
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
File _fileimage;
final _picker = ImagePicker();
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_fileimage != null
? Image.file(_fileimage)
: Text('No image selected'),
RaisedButton(
onPressed: () async {
_takePicture();
},
child: Text('hi'),
)
],
),
),
),
);
}
void _takePicture() async {
final pickedImage = await _picker.getImage(source: ImageSource.gallery);
// if (pickedImage == null) {
// return;
// }
File tmpFile = File(pickedImage.path);
final Directory directory = await getApplicationDocumentsDirectory();
final String path = directory.path;
final String fileName =
basename(pickedImage.path); // Filename without extension
final String fileExtension = extension(pickedImage.path); // e.g.
tmpFile = await tmpFile.copy('$path/$fileName$fileExtension');
setState(() => _fileimage = tmpFile);
}
}