Question

我尝试了以下代码段：

new Container(
    height: 80.0,
    width: 80.0,
    decoration: new BoxDecoration
    shape: BoxShape.circle,
    border: Border.all(color: const Color(0x33A6A6A6)),
    // image: new Image.asset(_image.)
    ),
    child: new Image.file(_image),
));

但是它不起作用。

Answer 1

您可以尝试使用半径为50的BoxDecoration类：

new Container(
    height: 80.0,
    width: 80.0,
    decoration: new BoxDecoration(
        color: const Color(0xff7c94b6),
        borderRadius: BorderRadius.all(const Radius.circular(50.0)),
        border: Border.all(color: const Color(0xFF28324E)),
    ),
    child: new Image.file(_image)
),

CircleAvatar类：

new CircleAvatar(
  backgroundColor: Colors.brown.shade800,
  child: new Image.file(_image),
),

或更具体地说，您的代码在BoxDecoration之后丢失了(，并且有很多)。

因此，使用BoxShape类：

new Container(
  height: 80.0,
  width: 80.0,
  decoration: new BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(color: const Color(0x33A6A6A6)),
    // image: new Image.asset(_image.)
  ),
  child: new Image.file(_image),
),

Answer 2

您可以在此处执行此操作，以设置占位符图像并从相机/画廊中拾取图像

GestureDetector(
  onTap: () => onProfileClick(context), // choose image on click of profile
  child: Container(
    width: 150,
    height: 150,
    decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
            image: profilePhoto == null  //profilePhoto which is File object
                ? AssetImage(
                "assets/images/profile_placeholder.png")
                : FileImage(profilePhoto), // picked file
            fit: BoxFit.fill)),
  ),
),

Answer 3

我正在使用Flutter 1.12.13 + hotfix.5

Image.file（_image）.image将转换为ImageProvider，然后可以直接在BoxDecoration中使用外部图像。

File _storedImage;
     :
     :

Widget _localImageFromCamera() {
  return Container(
    height: 80.0,
    width: 80.0,
    decoration: BoxDecoration
         borderRadius: BorderRadius.circular(50),
         border: Border.all(color: const Color(0x33A6A6A6)),
         image: DecorationImage(image: Image.file(_storedImage).image, fit: BoxFit.cover),
    ),
  ));
}

Answer 4

添加新的Circle Avatar，并且在其中添加了一个孩子，并且您的半径为

new CircleAvatar(
  child:new Image.asset("Your Directory"),
  radius: 60.0
)

Answer 5

这对我来说很有效（文件而不是资产或网络映像）

<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="img_snow_wide.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>

Answer 6

如果您正在使用资产中的本地图像，则可以将CircleAvatar用作

CircleAvatar(
              backgroundImage: ExactAssetImage('assets/images/cook.jpeg'),
              // Optional as per your use case
              // minRadius: 30,
              // maxRadius: 70,
            ),

如果您正在使用网络映像，则可以将CircleAvatar用作

CircleAvatar(
         radius: 30.0,
         backgroundImage: NetworkImage(imageURL),
         backgroundColor: Colors.transparent,
         ));

Answer 7

ClipRRect 对我来说很好，希望对您也有帮助

  ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child:Image.network(
                _supplierProduct.productImage,
                fit: BoxFit.cover,
                height: 220,
              ),
            ),

Answer 8

Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('assets/logo.png'),
                fit: BoxFit.cover
              ),
              borderRadius: BorderRadius.all(new Radius.circular(100.00)),
            ),
          ),

从外部存储器以圆形显示图像

8 个答案: