图片与ICON

图片与ICON.png 图片 Fit.png

//导入Material UI 组件库
import 'package:flutter/material.dart';

//程序入口
void main() {
  runApp(const MaterialApp(home: ImageIcon()));
}

//图片与ICON
class ImageIcon extends StatelessWidget {
  final String imgUrl =
      "https://upload.jianshu.io/admin_banners/web_images/5055/348f9e194f4062a17f587e2963b7feb0b0a5a982.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540";

  const ImageIcon({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ImageIcon"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.network(
            imgUrl,
            width: 100.0,
            height: 100.0,
            //根据长宽做填充拉伸
            fit: BoxFit.fill,
          ),
          const SizedBox(
            height: 10,
          ),
          Image.network(
            imgUrl,
            width: 100.0,
            height: 100.0,
            //根据长宽做等比缩放并做裁剪
            fit: BoxFit.cover,
          ),
          const SizedBox(
            height: 10,
          ),
          Image.network(
            imgUrl,
            width: 100.0,
            height: 100.0,
            //等比缩放不做裁剪
            fit: BoxFit.contain,
          ),
          const SizedBox(
            height: 10,
          ),
          Image.network(
            imgUrl,
            width: 100.0,
            height: 100.0,
            //按宽度缩且放比变形
            fit: BoxFit.fitWidth,
          ),
          const SizedBox(
            height: 10,
          ),
          Image.network(
            imgUrl,
            width: 100.0,
            height: 100.0,
            //按高度缩放且不变形
            fit: BoxFit.fitHeight,
          ),
          //字体图标
          const Text(
            "\uE03e \uE237 \uE287",
            style: TextStyle(
              fontFamily: "MaterialIcons",
              fontSize: 32.0,
              color: Colors.deepOrange,
            ),
          )
        ],
      ),
    );
  }
}

自定义图标文字

//pubspec.yaml
fonts:
  - family: iconfont
    fonts:
      - asset: fonts/iconfont.ttf

class IconConst {
  static const IconData group =
  IconData(0xe656, fontFamily: 'iconfont', matchTextDirection: true);
}