flutter实现image的圆形效果

image属性

运用部分属性

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("关于Text属性的界面"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return new Container(
      child: Image.network(
        "https://pic.baike.soso.com/ugc/baikepic2/0/20180926123725-2140348888_png_400_400_25800.jpg/0",
        repeat: ImageRepeat.noRepeat,
        fit: BoxFit.fill,
      
      ),
      width: 300,
      height: 300,
    );
  }
}

实现image的圆形效果

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("关于Text属性的界面"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return new Center(
        child: Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(150),
        image: DecorationImage(
            image: new NetworkImage(
                "https://pic.baike.soso.com/ugc/baikepic2/0/20180926123725-2140348888_png_400_400_25800.jpg/0"),
            fit: BoxFit.cover),
      ),
    ));
  }
}