flutter的 图片组件基本使用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("flutter demo"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        
         child: Image.network(
           "https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg",
           alignment: Alignment.bottomRight,
           color: Colors.green,
           colorBlendMode: BlendMode.screen,
           // fit: BoxFit.cover,
           repeat: ImageRepeat.repeatX,
        ),

      ),
    );
  }
}

给container设置背景图片或者说是设置圆形图片

Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(150),//设置圆形：
            image:DecorationImage(
              image: NetworkImage("https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"),
              fit: BoxFit.cover
            )
        ),
      ),
    );
  }

  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.network(
            "https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg",
            height: 100,
            width: 100,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

 

 

 

设置圆形：

child: Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
            color: Colors.red,
            // borderRadius: BorderRadius.all(Radius.circular(150)), //设置圆形：
            borderRadius: BorderRadius.circular(150),//设置圆形：
            image:DecorationImage(
              image: NetworkImage("https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"),
              fit: BoxFit.cover
            )
        ),
      ),