Flutter_Image详解例子

2022年7月11日 411点热度 0人点赞 0条评论

NetworkImage 例子:
先上效果图:
Flutter_Image详解例子插图

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Image详解_例子"),
        centerTitle: true,
      ),
      body: const MyHomeContent(),
    );
  }
}

class MyHomeContent extends StatefulWidget {
  const MyHomeContent({Key? key}) : super(key: key);

  @override
  State<MyHomeContent> createState() => _MyHomeContentState();
}

class _MyHomeContentState extends State<MyHomeContent> {
  final String imageUrl = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnews.yxrb.net%2Fuploadfile%2F2021%2F0419%2F20210419103029168.jpg&refer=http%3A%2F%2Fnews.yxrb.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660126448&t=f05df4856138d1f1a82712c9cd9e7546";

  @override
  Widget build(BuildContext context) {
    return Image(
        image: NetworkImage(imageUrl),
        width: 300,
        height: 300,
        fit: BoxFit.fitWidth,
        //color: Colors.purple,
        //colorBlendMode: BlendMode.colorDodge,
    );
  }
}

AssetImage 例子:
Flutter_Image详解例子插图

Flutter_Image详解例子插图1

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Image详解_例子"),
        centerTitle: true,
      ),
      body: const MyHomeContent(),
    );
  }
}

class MyHomeContent extends StatefulWidget {
  const MyHomeContent({Key? key}) : super(key: key);

  @override
  State<MyHomeContent> createState() => _MyHomeContentState();
}

class _MyHomeContentState extends State<MyHomeContent> {

  @override
  Widget build(BuildContext context) {
    return const Image(
        image: AssetImage("assets/images/lizi.jpeg"),
        width: 300,
        height: 300,
        fit: BoxFit.fitWidth,
        //color: Colors.purple,
        //colorBlendMode: BlendMode.colorDodge,
    );
  }
}

小小调酒师

此刻打盹,你将做梦; 此刻学习,你将圆梦。 个人邮箱:shellways@foxmail.com

文章评论