短视频系统源代码flutter--圆形头像

云豹网络科技

于 2020-08-14 14:25:27 发布

阅读量155

点赞数

分类专栏：技术类文章标签： ios js qt canvas qml

原文链接：https://blog.csdn.net/u013750244/article/details/106584320

版权

技术类专栏收录该内容

1491 篇文章 4 订阅

订阅专栏

方法一：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,
        ),
      ),
    ));
  }
}

方法二：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)),
    ));
  }
}