Flutter实现头像效果的两种方式

（一）效果图

（二）实现方式，两种
第一种（基础版）：实现要点：利用Container里面的BoxDecoration
网络加载图片 NetworkImage

import 'package:flutter/material.dart';
class CircleImgPage extends StatelessWidget {
  Widget headImg(){
    return Container(    
      width: 400,
      height: 300,
      decoration: BoxDecoration(
      //  color: Colors.yellow,
        borderRadius: BorderRadius.circular(150),
        image: DecorationImage(
          image: NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607336741228&di=0ebbe7a3981768571ad6458bbe4efd7b&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftranslate%2F20170515%2FUPDq-fyfeutp9939956.jpg"
          )   ,
          fit:BoxFit.cover     
          )
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("甜宠软妹"),
        centerTitle: true,
      ),
      body:Container(
        margin: EdgeInsets.all(50),
        child: headImg(),
      )
    );
  }
}

第二种方式：进阶版
实现要点：clipOval

import 'package:flutter/material.dart';
class CircleImgPage extends StatelessWidget {
  Widget headImg(){
    return Container(
      child: ClipOval(
        child: Image.network(
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607336741228&di=0ebbe7a3981768571ad6458bbe4efd7b&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftranslate%2F20170515%2FUPDq-fyfeutp9939956.jpg" ,
        height: 200,
        width: 200,
        fit: BoxFit.cover,),
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("甜宠软妹"),
        centerTitle: true,
      ),
      body:Container(
        margin: EdgeInsets.all(50),
        child: headImg(),
      )
    );
  }
}