How to display taken photo correctly? - flutter

Question

I have custom app where I use dialogs to quiz with users to save places. When I take photo file is saved to device but not displayed. Where I have an error in my code where I tried display image?
Code:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart' as path;
import 'package:path_provider/path_provider.dart' as syspaths;
class PlacesListScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return _Map();
}
}
class _Map extends StatefulWidget {
#override
_MapState createState() => _MapState();
}
class _MapState extends State<_Map> {
File _storedImage;
final picker = ImagePicker();
final _titleController = TextEditingController();
Future _takeImage() async {
final pickedFile = await picker.getImage(
source: ImageSource.camera,
maxWidth: 600,
);
if (pickedFile == null) {
return;
}
_storedImage = File(pickedFile.path);
final appDir = await syspaths.getApplicationDocumentsDirectory();
final fileName = path.basename(_storedImage.path);
await _storedImage.copy('${appDir.path}/$fileName');
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Locations'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: () {
return showDialog(
context: context,
builder: (ctx) => AlertDialog(
title: Text(
"Do you want add current place to the map?",
textAlign: TextAlign.center,
),
content: TextField(
decoration: InputDecoration(labelText: 'Place title'),
controller: _titleController,
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(ctx).pop();
},
child: Text("No"),
),
FlatButton(
onPressed: () {
return showDialog(
context: context,
builder: (ctx) => AlertDialog(
title: Text(
"Do you want take photo of current place?",
textAlign: TextAlign.center,
),
content: Container(
width: 150,
height: 100,
decoration: BoxDecoration(
border:
Border.all(width: 1, color: Colors.grey),
),
child: _storedImage != null
? Image.file(
_storedImage,
fit: BoxFit.cover,
width: double.infinity,
)
: Text('No photo taken yet',
textAlign: TextAlign.center),
alignment: Alignment.center,
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(ctx).pop();
},
child: Text("No"),
),
FlatButton(
onPressed: _takeImage,
child: Text("Yes"),
),
],
),
);
},
child: Text("Yes"),
),
],
),
);
// Navigator.of(context).pushNamed(AddPlaceScreen.routeName);
},
),
],
),
body: Text("Application Content")
);
}
}
Here is photo not displayed:
Image.file(
_storedImage,
fit: BoxFit.cover,
width: double.infinity,
)
Maybe I have an error on states or on another part of my code?

Answer 1

You can copy paste run full code below
You can use StatefulBuilder and pass StateSetter to _takeImage and call setState
code snippet
Future _takeImage(StateSetter setState) async {
...
setState(() {
_storedImage = File(pickedFile.path);
});
...
return showDialog(
context: context,
builder: (ctx) => StatefulBuilder(builder:
(BuildContext context,
StateSetter setState) {
...
FlatButton(
onPressed: () =>
_takeImage(setState),
child: Text("Yes"),
),
working demo
full code
import 'package:flutter/material.dart';
import 'dart:io';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart' as path;
import 'package:path_provider/path_provider.dart' as syspaths;
class PlacesListScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return _Map();
}
}
class _Map extends StatefulWidget {
#override
_MapState createState() => _MapState();
}
class _MapState extends State<_Map> {
File _storedImage;
final picker = ImagePicker();
final _titleController = TextEditingController();
Future _takeImage(StateSetter setState) async {
final pickedFile = await picker.getImage(
source: ImageSource.camera,
maxWidth: 600,
);
if (pickedFile == null) {
return;
}
setState(() {
_storedImage = File(pickedFile.path);
});
final appDir = await syspaths.getApplicationDocumentsDirectory();
final fileName = path.basename(_storedImage.path);
await _storedImage.copy('${appDir.path}/$fileName');
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Locations'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: () {
return showDialog(
context: context,
builder: (ctx) => AlertDialog(
title: Text(
"Do you want add current place to the map?",
textAlign: TextAlign.center,
),
content: TextField(
decoration:
InputDecoration(labelText: 'Place title'),
controller: _titleController,
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(ctx).pop();
},
child: Text("No"),
),
FlatButton(
onPressed: () {
return showDialog(
context: context,
builder: (ctx) => StatefulBuilder(builder:
(BuildContext context,
StateSetter setState) {
return AlertDialog(
title: Text(
"Do you want take photo of current place?",
textAlign: TextAlign.center,
),
content: Container(
width: 150,
height: 100,
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Colors.grey),
),
child: _storedImage != null
? Image.file(
_storedImage,
fit: BoxFit.cover,
width: double.infinity,
)
: Text('No photo taken yet',
textAlign:
TextAlign.center),
alignment: Alignment.center,
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(ctx).pop();
},
child: Text("No"),
),
FlatButton(
onPressed: () =>
_takeImage(setState),
child: Text("Yes"),
),
],
);
}));
},
child: Text("Yes"),
),
],
));
// Navigator.of(context).pushNamed(AddPlaceScreen.routeName);
},
),
],
),
body: Text("Application Content"));
}
}
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: PlacesListScreen(),
);
}
}