# flutter

**Repository Path**: mqwxyg/flutter

## Basic Information

- **Project Name**: flutter
- **Description**: flutter学习笔记
- **Primary Language**: Dart
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-04-24
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# flutter

#### 介绍
flutter学习笔记

#### 圆形头像

1.
```
new ClipOval(
    child: new Image.asset(Utils.getImgPath('ali_connors')),
  )
```



2.
```
new CircleAvatar(
    radius: 36.0,
    backgroundImage: AssetImage(
      Utils.getImgPath('ali_connors'),
    ),
  )
```





```
3.new Container(
    width: 72.0,
    height: 72.0,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
        image: AssetImage(
          Utils.getImgPath('ali_connors'),
        ),
      ),
    ),
  )
```


#### 圆角


① ClipRRect

```
new ClipRRect(
    borderRadius: BorderRadius.circular(6.0),
    child: new Image.asset(Utils.getImgPath('ali_connors')),
  )
```



② BoxDecoration BoxShape.rectangle



```
new Container(
    width: 88.0,
    height: 88.0,
    decoration: BoxDecoration(
      shape: BoxShape.rectangle,
      borderRadius: BorderRadius.circular(6.0),
      image: DecorationImage(
        image: AssetImage(
          Utils.getImgPath('ali_connors'),
        ),
      ),
    ),
```



第二个方法中



```
Container(
          decoration: BoxDecoration(
            borderRadius:BorderRadius.circular(10)
          ),
          child: Image.network(
            imagePath,
            width: 250,
            height: 150,
            fit: BoxFit.cover,
            ),
        ),
```

此时，Container是圆角。但是，Image,没有显示圆角；


####注意
          
```
 Material(
                    borderRadius: BorderRadius.circular(12),
                    elevation: 14,
                    shadowColor: Colors.grey.withOpacity(0.5),
                    child: Stack(
                      children: <Widget>[
                        AspectRatio(
                          aspectRatio: 16 / 9,
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(12),
                            child: Image.network(
                              posts[index].imageUrl,
                              fit: BoxFit.cover,
                            ),
                          ),
                        )
                      ],
                    ),
                  )
```


如果child，直接也是Image，会出现，Container同样的问题。material是圆角，但是Image 不是圆角

因此，需要ClipRRect包裹Image，同时对Material和ClipRRect，设置相同的圆角效果；


Material borderRadius 对其他的控件有效，比如Text，materialButton等，对Image无效