Flutter 圖片的使用

weixin_34148340發表於2018-08-04

效果圖


9303971-b166b88c76e5b046.png
image.png

1.本地asset中讀取

從本地中獲取

a.開啟pubspec.yaml設定(這裡格式很重要!)

flutter:
  assets:
    - images/timg.jpeg

b.根目錄新建 images 資料夾

9303971-eb8872bd400ea8ee.png
image.png

c.程式碼

        new Image.asset(本地靜態資源的地址)    
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new MyImg(),
    );
  }
}

class MyImg extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title:'圖片如何放入',
      home: new Scaffold(
        body: new Center(
         child: new Image.asset('images/timg.jpeg'),    
        ),
      )
    );
  }

}


2.從網路獲取

        new Images.network(網路資源https/http)
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter Demo',
        home: new MyImg(),
    );
  }
}

class MyImg extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title:'圖片如何放入',
      home: new Scaffold(
        body: new Center(
        child: new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533368711441&di=9517daea3b4fc02d74b27a1f0e2d11f8&imgtype=0&src=http%3A%2F%2Fimage13-c.poco.cn%2Fmypoco%2Fmyphoto%2F20121102%2F22%2F66582707201211022200252633924731300_000_640.jpg'),
        ),
      )
    );
  }

}

3.從快取中讀取(待更新)

送人玫瑰,手留餘香。

相關文章