Home Mobile Image Assets and Image Network

Image Assets and Image Network

0

Aplikasi Flutter dapat menyertakan kode dan aset (terkadang disebut sumber daya). Aset adalah file yang dibundel dan diterapkan dengan aplikasi Anda, dan dapat diakses pada waktu proses. Jenis aset yang umum mencakup data statis (misalnya, file JSON), file konfigurasi, ikon, dan gambar (JPEG, WebP, GIF, animasi WebP / GIF, PNG, BMP, dan WBMP).

Flutter menggunakan pubspec.yaml,  yang terletak di root project Anda, untuk mengidentifikasi aset yang diperlukan oleh aplikasi.

Berikut ini contohnya:


flutter:
assets:
    - assets/my_icon.png
    - assets/background.png

Contoh Image assets and image network :

pubsec.yaml

dependencies:
cupertino_icons: ^1.0.0
cached_network_image: ^2.5.0

Code main.dart :


import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  String url =
      'https://rstatic.akamaized.net/media/500/files/fta_rcti/Landscape/upin_dan_ipin/upinipinnew_L.jpg';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image From Url'),
        backgroundColor: Colors.green,
      ),
      backgroundColor: Colors.grey,
      body: Column(
        children: <Widget>[
          CachedNetworkImage(
            imageUrl: url,
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
          new Image(image: new CachedNetworkImageProvider(url)),
          Image.network(
              'https://img.jakpost.net/c/2020/04/22/2020_04_22_93420_1587522578._large.jpg'),
          Text(
            'Serial Upin Ipin',
            style: new TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                color: Colors.blue),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Image.network(
                'https://img.jakpost.net/c/2020/04/22/2020_04_22_93420_1587522578._large.jpg',
                height: 150.0,
                width: 150.0,
              ),
              Image.network(
                  'https://img.jakpost.net/c/2020/04/22/2020_04_22_93420_1587522578._large.jpg',
                height: 120.0,
                  width: 120.0,)
            ],
          )
        ],
      ),
    );
  }
}

Hasil :