flutter--圆形头像

方法一：ClipOval

如图：

全部代码如下，核心代码就是Container组件下的ClipOval组件：

import 'package:flutter/material.dart';

/*void main() {
  runApp(MyApp());
}*/
void main() => runApp(MyApp());

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("FlutterDemo")),
        body: HomeContent(),
      ),
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.yellow),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
      //圆形图片
      child: ClipOval(
        child: Image.network(
          'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1591422573&di=d382784d098379686247eb23f3f8da08&src=http://b-ssl.duitang.com/uploads/item/201810/20/20181020180558_RaGtA.thumb.700_0.jpeg',
          height: 100,
          width: 100,
          //cover 裁剪充满不变形，contain原图显示，fitwidth横向充满，fitHeight纵向充满
          fit: BoxFit.cover,
        ),
      ),
    ));
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

方法二：decoration组件的borderRadius函数

如图：

全部代码如下，核心代码就是Container组件下的decoration组件和borderRadius属性：

import 'package:flutter/material.dart';

/*void main() {
  runApp(MyApp());
}*/
void main() => runApp(MyApp());

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("FlutterDemo")),
        body: HomeContent(),
      ),
      theme: ThemeData(primarySwatch: Colors.yellow),
    );
  }
}

//
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
          color: Colors.yellow,
          //  borderRadius: BorderRadius.all(Radius.circular(150))
          borderRadius: BorderRadius.circular(150),
          image: DecorationImage(
              image: NetworkImage(
                  "https://app.lgwy.net/upload/picture/course_school/20200525/20200525142631823.jpg"),
              fit: BoxFit.cover)),
    ));
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41