Question

我在我的应用程序中为图像创建了一个占位符，单击该按钮我想打开相机，并显示在占位符中单击的图像。我为此使用了image_picker包。我用GestureDetector包裹了占位符容器，但是在容器上敲击没有任何反应。我该如何解决？

在包含无状态小部件的主文件中，我添加了有状态小部件addImage（）

Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[

                  addImage(),  // my stateful widget 
                TextField(

                  )
                ),              
                Row(
                 //other implementation here 
                  ],
                )

              ]
            )

我的addImage有状态小部件看起来像这样

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


class addImage extends StatefulWidget{
  @override
  _addImageState createState() => _addImageState();
}

class _addImageState extends State<addImage> {

  File _image;

  Future getImagefromCamera() async{

    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _image = image;
    });
  }


  @override
  Widget build(BuildContext context) {

    return GestureDetector(
      onTap: getImagefromCamera,
      child: _image == null ? Container(decoration: BoxDecoration(color: Colors.red[50],border: Border.all(color: Colors.red[200], width: 1.0),borderRadius: BorderRadius.circular(10.0)),
          child: Column(
            children: <Widget>[
              SizedBox(height:30.0),
              Icon(Icons.camera_alt, color: Colors.red),
              SizedBox(height: 10.0),
              Text('Take Image of the Item', style: TextStyle(color: Colors.red)),
              SizedBox(height: 30.0)
            ],
          )) : Image.file(_image),
    );
  }

}

我什至在pubspec.yaml中添加了依赖项，但仍然不起作用

 image_picker: ^0.4.5

Answer 1

尝试此代码..

 image_picker: ^0.5.2

尝试此代码后。

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: 300,
        height: 300,
      );
    } 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.camera);
          },
        ),
      ],
    ),
  ),
);
 }

Answer 2

我可以使用以下代码查看从相机捕获的图像：

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

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        body: addImage()
      )
    );
  }
}

class addImage extends StatefulWidget{
  @override
  _addImageState createState() => _addImageState();
}

class _addImageState extends State<addImage> {

  File _image;

  Future getImagefromCamera() async{

    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _image = image;
    });
  }


  @override
  Widget build(BuildContext context) {

    return Scaffold(

        body: GestureDetector(
          onTap: getImagefromCamera,
          child: _image == null ? Container(decoration: BoxDecoration(color: Colors.red[50],border: Border.all(color: Colors.red[200], width: 1.0),borderRadius: BorderRadius.circular(10.0)),
              child: Column(
                children: <Widget>[
                  SizedBox(height:30.0),
                  Icon(Icons.camera_alt, color: Colors.red),
                  SizedBox(height: 10.0),
                  Text('Take Image of the Item', style: TextStyle(color: Colors.red)),
                  SizedBox(height: 30.0)
                ],
              )) : Image.file(_image),
        )

    );

  }

}

在Android模拟器上测试。

如何在相机抖动中添加图像？

2 个答案: