Flutter 加载图片、网络圆形图片、圆角图片

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';
void main(){
  runApp(MyApp());
}
//自定义组件
//StatelessWidget:无状态组件,状态不可变的widget
//StatefulWidget:有状态组件,状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class  MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: HomeContent(),
      ),
      //主题
      theme: ThemeData(
        primarySwatch: Colors.red
      ),
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      //定义一个容器Container
      child: Container(
        //加载网络图片
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.all(
            Radius.circular(15),
          ),
          image: DecorationImage(
            image: NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566225123&di=83f75424937ce7c71c34bb275b72a2b8&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F0%2F85%2Fd194485054.jpg"),
            fit:BoxFit.cover,
          )
        ),
      ),
  );
  }
}

 

Flutter 加载图片、网络圆形图片、圆角图片_第1张图片

 

 

圆角图片 

 borderRadius: BorderRadius.all(
            Radius.circular(150),
          ),

 

Flutter 加载图片、网络圆形图片、圆角图片_第2张图片

ClipOval 组件实现圆形图片

 

 

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';
void main(){
  runApp(MyApp());
}
//自定义组件
//StatelessWidget:无状态组件,状态不可变的widget
//StatefulWidget:有状态组件,状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class  MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: HomeContent(),
      ),
      //主题
      theme: ThemeData(
        primarySwatch: Colors.red
      ),
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      //定义一个容器Container
      child: Container(
        //ClipOval 实现圆形图片
        child: ClipOval(
          child: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566120270717&di=cf20cc7e7e27a7a5ceb540914089dab0&imgtype=0&src=http%3A%2F%2Fimg1.ph.126.net%2FCY4vmclHMPpeB7oPRIx6RQ%3D%3D%2F2740721848249581208.jpg',
          width: 300,
          height: 300,
          fit: BoxFit.cover,
          ),
        ),
      
      ),
  );
  }
}

Flutter 加载图片、网络圆形图片、圆角图片_第3张图片

 

 

 

你可能感兴趣的:(Flutter)