Flutter：如何将图像文件传递到另一个屏幕

Question

您好，我需要一些帮助来将 selected 的图像从我的画廊传递到另一个屏幕。

当我通过网格平铺屏幕转到 'Pick Image' 屏幕时，我可以 select 来自我的图库应用的图像。一旦我选择一个，图像就会在 'Pick Image' 屏幕上弹出，它应该被传递到前一个屏幕（网格平铺），这样图像就可以显示在网格平铺中。

有人能处理这个吗？

代码的相关部分就在下面。

网格平铺屏幕

  Widget build(BuildContext context) {
    return GridView.count(crossAxisCount: 4,
      children: List.generate(lastDay, (index){
        return GridTile(
          child: Card(
            child: Column(
              children: <Widget>[
                Text('Day ' '$index'),
                SizedBox(height: 20.0,),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: (){
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => PickImage()));
                },),
              ],
            ),
          ),
        );
      }),
    );
  }

选择图像屏幕

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

class PickImage extends StatefulWidget {
  PickImage() : super();

  final String title = "Pick Image";

  @override
  _PickImageState createState() => _PickImageState();
}

class _PickImageState extends State<PickImage> {
  Future<File> imageFile;

  pickImageFromGallery(ImageSource source) {
    setState(() {
      imageFile = ImagePicker.pickImage(source: source);
    });
  }

  Widget showImage() {
    return FutureBuilder<File>(
      future: imageFile,
      builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            snapshot.data != null) {
          return Image.file(
            snapshot.data,
            width: 400,
            height: 400,
          );
        } else if (snapshot.error != null) {
          return const Text(
            'Error Picking Image',
            textAlign: TextAlign.center,
          );
        } else {
          return const Text(
            'No Image Selected',
            textAlign: TextAlign.center,
          );
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            showImage(),
            RaisedButton(
              child: Text("Select Image from Gallery"),
              onPressed: () {
                pickImageFromGallery(ImageSource.gallery);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以复制粘贴运行下面的完整代码
第 1 步：使用 Navigator.pop 到 return image

RaisedButton(
              onPressed: () {
                Navigator.pop(context, imageFileReturn);
              },
              child: Text('Selecct Finish, Go back '),
            ),

第 2 步：使用 Map<int, File> 保持相关 index 和 image

Map<int, File> imageFileMap = {};

IconButton(
      icon: Icon(Icons.add),
      onPressed: () async {
        imageFile = await Navigator.push(context,
            MaterialPageRoute(builder: (context) => PickImage()));
        imageFileMap[index] = imageFile;
        setState(() {});
      },

第 3 步：在 Map

中显示 image

SizedBox(
        height: 20.0,
        child: imageFileMap[index] != null
            ? Image.file(
                imageFileMap[index],
              )
            : Container()),

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

class PickImage extends StatefulWidget {
  PickImage() : super();

  final String title = "Pick Image";

  @override
  _PickImageState createState() => _PickImageState();
}

class _PickImageState extends State<PickImage> {
  Future<File> imageFile;
  File imageFileReturn;

  pickImageFromGallery(ImageSource source) {
    setState(() {
      imageFile = ImagePicker.pickImage(source: source);
    });
  }

  Widget showImage() {
    return FutureBuilder<File>(
      future: imageFile,
      builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
        imageFileReturn = snapshot.data;
        if (snapshot.connectionState == ConnectionState.done &&
            snapshot.data != null) {
          return Image.file(
            snapshot.data,
            width: 400,
            height: 400,
          );
        } else if (snapshot.error != null) {
          return const Text(
            'Error Picking Image',
            textAlign: TextAlign.center,
          );
        } else {
          return const Text(
            'No Image Selected',
            textAlign: TextAlign.center,
          );
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            showImage(),
            RaisedButton(
              child: Text("Select Image from Gallery"),
              onPressed: () {
                pickImageFromGallery(ImageSource.gallery);
              },
            ),
            RaisedButton(
              onPressed: () {
                Navigator.pop(context, imageFileReturn);
              },
              child: Text('Selecct Finish, Go back '),
            ),
          ],
        ),
      ),
    );
  }
}

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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Test(),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  int lastDay = 30;
  Map<int, File> imageFileMap = {};
  File imageFile;

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 4,
      children: List.generate(lastDay, (index) {
        return GridTile(
          child: Card(
            child: Column(
              children: <Widget>[
                Text('Day ' '$index'),
                SizedBox(
                    height: 20.0,
                    child: imageFileMap[index] != null
                        ? Image.file(
                            imageFileMap[index],
                          )
                        : Container()),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () async {
                    imageFile = await Navigator.push(context,
                        MaterialPageRoute(builder: (context) => PickImage()));
                    imageFileMap[index] = imageFile;
                    setState(() {});
                  },
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}

Flutter：如何将图像文件传递到另一个屏幕

Flutter: how to pass an image file to another screen

flutter-animation