image_picker 仅在热重载后显示图像。扑

Question

我正在使用 image_picker 包来读取图像并使用相机拍摄它们。

我也在使用 provider 包来管理结果的变化。

该应用是关于卖东西的广告，添加新广告时添加成功。

问题是在我进行热重载之前广告主图不显示，而在重载之前显示错误。

Unable to load asset: /storage/emulated/0/Android/data/com.bkh.ads/files/Pictures/d2abeed9-3dfa-44b4-a032-ddefff58762e2465964411313585659.jpg

一旦我进行了热重载，广告图片就会正确显示并且错误消失。

我是这样使用的 image_picker:

Future _setAdMainImage() async {
    String _method;

    await showModalBottomSheet(
      context: context,
      builder: (context) => Container(
        height: 105,
        child: Column(
          children: [
            Container(
              height: 50,
              child: RaisedButton(
                color: ColorPalette.PRIMARY_COLOR,
                onPressed: () {
                  _method = 'Camera';
                  Navigator.of(context).pop();
                },
                child: Center(
                  child: Text(
                    'Image From Camera',
                    textDirection: TextDirection.rtl,
                    style: TextStyle(
                      fontSize: 18,
                      color: ColorPalette.WHITE_TEXT_ICONS_COLOR,
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 5,
            ),
            Container(
              height: 50,
              child: RaisedButton(
                color: ColorPalette.PRIMARY_COLOR,
                onPressed: () {
                  _method = 'Gallery';
                  Navigator.of(context).pop();
                },
                child: Center(
                  child: Text(
                    'Image From Gallery',
                    textDirection: TextDirection.rtl,
                    style: TextStyle(
                      fontSize: 18,
                      color: ColorPalette.WHITE_TEXT_ICONS_COLOR,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );

    if (_method != null) {
      final _pickedFile = await _imagePicker.getImage(
        source: _method == 'Camera' ? ImageSource.camera : ImageSource.gallery,
      );

      setState(() {
        _image = File(_pickedFile.path);
      });
      _method = null;
    }
  }

这就是我使用 provider:

添加新广告对象的方式

void addVehicleAd(VehicleAd vehicleAd) {
    _vehicleAds.add(vehicleAd);
    notifyListeners();
  }

这是我显示结果的方式：

@override
  Widget build(BuildContext context) {
    _data = ModalRoute.of(context).settings.arguments as Map<String, dynamic>;
    _ads = Provider.of<VehicleAds>(context).carAds;

    return Scaffold(
      body: ListView.builder(
              itemCount: _ads.length,
              itemBuilder: (context, index) => AdCard(
                id: _ads[index].id,
                image: _ads[index].image,
                price: _ads[index].price,
                label: _ads[index].label,
                date: _ads[index].date,
              ),
            ),
    );
  }

这是 AdCard 小部件：

class AdCard extends StatelessWidget {
  final int id;
  final String label, image;
  final int price;
  final DateTime date;

  AdCard({
    @required this.id,
    @required this.label,
    @required this.price,
    @required this.image,
    @required this.date,
  });

  @override
  Widget build(BuildContext context) {
    var _height = MediaQuery.of(context).size.height;
    return InkWell(
      child: Card(
        clipBehavior: Clip.hardEdge,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
          side: BorderSide(
            width: 2,
            color: ColorPalette.ACCENT_COLOR,
          ),
        ),
        child: Stack(
          children: <Widget>[
            Container(
              height: 250,
              width: double.infinity,
              child: Hero(
                tag: id,
                child: Image(
                  image: AssetImage(image),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Positioned(
              right: 10,
              bottom: 10,
              child: Container(
                padding: EdgeInsets.all(5),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5),
                  color: Colors.black.withOpacity(.5),
                ),
                child: Text(
                  label,
                  textDirection: TextDirection.rtl,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    height: 1,
                    color: ColorPalette.WHITE_TEXT_ICONS_COLOR,
                  ),
                ),
              ),
            ),
            Positioned(
              left: 10,
              bottom: 10,
              child: Container(
                padding: EdgeInsets.all(5),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5),
                  color: Colors.black.withOpacity(.5),
                ),
                child: Text(
                  '$price',
                  textDirection: TextDirection.rtl,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: ColorPalette.WHITE_TEXT_ICONS_COLOR,
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 10),
              child: Align(
                alignment: Alignment.topCenter,
                child: Container(
                  padding: EdgeInsets.all(5),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.black.withOpacity(.5),
                  ),
                  child: Text(
                    '${date.day}/${date.month}/${date.year}',
                    textDirection: TextDirection.rtl,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: ColorPalette.WHITE_TEXT_ICONS_COLOR,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我不知道错误代码在哪里...

如有任何帮助，我们将不胜感激

Answer 1

AssetImage 小部件从您的资产资源中获取。

对于imagepicker拍摄的图片，使用Image.file。

Image.file(/* your file */, fit: BoxFit.cover,)

image_picker 仅在热重载后显示图像。扑

image_picker only showing images after hot reload. Flutter

flutter

dart

provider