首页 > 解决方案 > 在 Flutter 中无法使用 BoxDecoration 图像

问题描述

我是flutter dart应用程序的新手,我只想在显示图像时将这组代码更改circleAvatar为。square type如果有人知道问题所在,这对我很有帮助。

在此处输入图像描述

下面是代码,CircleAvatar我想将显示图像更改为正方形而不是圆形。

    File _pickedImage;
    @override
    Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: ListView(
        children: <Widget>[
          Center(
            child: CircleAvatar(    //This is the cirtcle avatar want to change to square tyoe
              radius: 10,
              child: _pickedImage == null ? Text("Picture") : null,
              backgroundImage:
                  _pickedImage != null ? FileImage(_pickedImage) : null,
            ),
          ),
          const SizedBox(height: 10.0),
          RaisedButton(
            child: Text("Pick Image"),
            onPressed: () {
              _showPickOptionsDialog(context);
            },
          )
        ],
      ),
    );
  }

这是我尝试过的,我在 Container 下添加了 BoxDecorator 但这会导致我出错。Failed assertion: line 855 pos 14: 'file != null': is not true.

  File _pickedImage;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: _pickedImage != null ? FileImage(_pickedImage) : null,
                fit: BoxFit.cover)),
        child: Column(children: <Widget>[
          RaisedButton(
            child: Text("Pick Image"),
            onPressed: () {
              _showPickOptionsDialog(context);
            },
          )
          ],
        ),
      ),
    );
  }

标签: androidflutterdart

解决方案


删除circleAvatarContainer改用

 Widget _imageWidget() {
    if (_pickedImage != null) {
      return Container(
        height: 50,
        width: 50,
        child: Text("Picture"),
        decoration: BoxDecoration(
          image: DecorationImage(
            image: FileImage(_pickedImage),
          ),
        ),
      );
    } else {
      return SizedBox();
    }
  }

推荐阅读