Flutter从容器小部件中删除图像

时间:2020-10-28 10:39:08

标签: flutter-layout

我想在用户完成对自慰按钮的操作后清除容器中的图像。 请找到该图片作为附件。以相同的方式,一旦按下按钮,我将清除文本框。 这是我的代码视图。

view.dart

                      GestureDetector(
                        //Get The Image Picker
                        onTap: ()=> showDialog<String>(context: context,
                            builder: (BuildContext){
                              return AlertDialog(
                                content: const Text('Tirar Foto'),
                                actions: [
                                  FlatButton(
                                      onPressed: () {
                                        //Close The Dialog Box once photo was selected
                                        Navigator.of(context).pop();
                                       return modelView.selectImage('galeria');
                                      },
                                      child: Text('Galeria')
                                  ),
                                  FlatButton(
                                      onPressed: (){
                                        //Close The Dialog Box once photo was taken
                                        Navigator.of(context).pop();
                                        return modelView.selectImage('camera');
                                  },
                                      child: Text('Câmera')
                                  )
                                ],
                              );
                            }
                        ),
                        child: Container(
                          //Align the Icon Into the Center of the
                           alignment: Alignment.centerLeft,
                          color: Colors.grey,
                          child: Padding(
                            padding: EdgeInsets.only(left: halfWidth),
                            // padding: const EdgeInsets.all(8.0),
                            child: CircleAvatar(
                              backgroundColor: Colors.transparent,
                              radius: 60,
                              child: modelView.selectedImage == null ?
                              Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                //textDirection: TextDirection
                                children: [
                                  Icon(
                                    //Tap to Go Fetch an Image.
                                    Icons.camera_alt,
                                    size: 45,
                                    color: Colors.white,
                                  ),
                                  Text(
                                    '+ Foto da Peça',
                                    style: TextStyle(color: Colors.white,),
                                    textAlign: TextAlign.left,
                                  ),
                                ],
                              )
                                  : Image.file(
                                           modelView.selectedImage,
                                           height: MediaQuery.of(context).size.height / 2,
                                           width: double.infinity,
                                           fit: BoxFit.cover,
                              ),
                            ),
                          ),
                          height: 130,
                        ),
                      ),
                      SizedBox(height: 50.0),
                      NiceButton(
                        width: 255,
                        elevation: 8.0,
                        radius: 52.0,
                        text: "Solicitar",
                        background: Color.fromRGBO(64, 75, 96, .9),
                        textColor: Colors.white,
                        onPressed: () async
                        {
                          //Please Validate The Form Fields
                          if (_chassisController.text.length == 17){
                            if (_formKey.currentState.validate()){
                              try {
                                marca = modelView.vehicleMakeModel.toString();
                                //Save Image
                                modelView.saveImage(title: marca);

                                modelView.getProfData(
                                  make: marca,
                                  model: _modelController.text.toString(),
                                  peca: _pecaController.text.toString(),
                                  vinNumber:  _chassisController.text.toString(),
                                  year: _yearController.text.toString(),
                                  trim: _trimController.text.toString(),

                                );
                                _modelController.clear();
                                _pecaController.clear();
                                _chassisController.clear();
                                _yearController.clear();
                                _trimController.clear();
                                 modelView.clearImage();
                                 imageCache.clear();
                               // modelView.dispose();
                              }
                              catch (e) {
                                print(e);
                              }
                              //Display Message If sucessful
                              flushBar(context, title: 'Solicitação efectuada com Sucesso',
                                  message: 'Acompanhe o estado da mesma em lista de proformas');

                              //Go to List of Proformas.

                              modelView.navToProformaList();
                            }
                            else
                              showDialog<String>(context: context,
                                  builder: (BuildContext){
                                    return AlertDialog(
                                      content: const Text('Preencher os Campos '),
                                      actions: [
                                        FlatButton(
                                            onPressed: () {
                                              //Close The Dialog Box once option selected
                                              Navigator.of(context).pop();
                                            },
                                            child: Text('Um dos campos não esta preenchido devidamente !!')
                                        ),
                                      ],
                                    );
                                  }
                              );
                          }
                        },
                      ),

这是管理我的状态管理的视图模型。 viewModel.dart

  File get selectedImage => _selectedImage;

  //Display The Image In UI when Selected
  Future selectImage(String photo) async {

    var tempImage = await _imageSelector.selectImage(photo);

    if (tempImage != null){
      //Show The Image Inside UI when Selected.
      _selectedImage = tempImage;
      notifyListeners();

    }
  }
   clearImage(){
    _selectedImage = null;

    notifyListeners();
  }

这里是图像选择器类,用于定义我是从相机还是从画廊中获取图像。 image_selector.dart

class ImageSelector {
  Future<File> selectImage ( String photo) async {
    //Get the Image with the Preset of Height and Width
    if (photo == 'camera'){
      return await ImagePicker.pickImage(source: ImageSource.camera, maxHeight: 150, maxWidth: 180);
    }
    else
      return await ImagePicker.pickImage(source: ImageSource.gallery, maxHeight: 150, maxWidth: 180);
  }
}

enter image description here

0 个答案:

没有答案