How to display taken photo correctly?

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(),
    );
  }
}