flutter展示图片

一:相关配置

 ，如上图所示，在根目录同级的地方，添加相关文档夹，然后在pubspec.yaml

这个文件写如下内容

  assets:

    - images/show.jpg

    - images/2.0x/show.jpg

    - images/3.0x/show.jpg

该内容用来配置本地的图片的路径

二:代码

1,正常展示图片

// ignore: file_names
//展示正常的图片

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MainContant());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: const Text("flutter demo")),
          body: const ShowContant()),
      theme: ThemeData(primarySwatch: Colors.blue,
    )
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(// 首先创建一个容器
      child: Container(
        // 其次，往容器里面添加一张图片
        // 容器里面添加一张图片，自然是一个child
        // 通过Image.network加载远程图片,并且加载图片，可以通过Image.某某来进行查找，上面有相关的提示，一共有4种提示
        // child: Image.network("https://image.baidu.com/search/detail"),
        // 通过本地加载图片
        child: Image.asset("images/show.jpg",
        // 添加对其因素
        //   alignment: Alignment.topLeft,
          // 是否重复
          // repeat: ImageRepeat.repeatY,
          // 设置图片显示标准，溢出还是全部放入,cover是指全部放入,会裁剪，显示最合适的效果
          fit: BoxFit.cover,

        ),
        width: 300,
        height: 300,
        decoration: const BoxDecoration(
          // 默认装饰盒子，显示是一个正方形，我们可以把它设置为一个圆形
          // borderRadius: BorderRadius.all(Radius.circular(150)),
          color: Colors.yellow
        ),
      )

    );
  }
}
 

2,展示圆形图片

// ignore: file_names
// 需求，在一个圆形里面展示图片

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MainContant());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: const Text("flutter demo")),
          body: const ShowContant()),
      theme: ThemeData(primarySwatch: Colors.blue,
    )
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(// 首先创建一个容器
      child: Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          // 默认装饰盒子，显示是一个正方形，我们可以把它设置为一个圆形
          // borderRadius: BorderRadius.all(Radius.circular(150)),
          borderRadius: BorderRadius.circular(150),
          image: const DecorationImage(image: AssetImage("images/show.jpg"),
          // 在一个圆形中实现图片覆盖的效果
          fit: BoxFit.cover
          ),
          color: Colors.yellow
        ),
      )

    );
  }
}
 

3,展示自适应圆形图片

// ignore: file_names
// 需求，在一个圆形里面展示图片


import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MainContant());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: const Text("flutter demo")),
          body: const ShowContant()),
      theme: ThemeData(primarySwatch: Colors.blue,
    )
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(// 首先创建一个容器
      child: Container(
        // 这种方式，会自适应，根据图片的形状，来变成对应的图片
       child: ClipOval(
         child: Image.asset("images/show.jpg"),
       )
      )

    );
  }
}