Flutter image

Flutter app дээр хэрхэн зураг дүрслэх вэ?

1. Local assets

Дотоод эх сурвалжаас зураг дүрслэх.

Алхам 1: pubspec.yaml файлд дараах dependency-г нэмнэ.

flutter:
  uses-material-design: true
  assets:
    - assets/kittens/

Алхам 2: Зураг дүрслэх

Image.asset(
  'assets/kittens/kitten.jpg',
  fit: BoxFit.fill,
),

2. Network

Гадаад эх сурвалж буюу сүлжээнээс зураг татаж дүрслэх.

Алхам 1: Python local server ажиллуулах.

python -m SimpleHTTPServer 8000

Сервер байрлаж буй зам дээр зургуудаа байрлуулна.

ls
kitten0.png kitten1.jpg kitten2.jpeg kitten4.png

Сервер унтраах: control+C (Mac)

Алхам 2: Server-ийн замыг тохируулах

final String server = defaultTargetPlatform == TargetPlatform.android ? "10.0.2.2" : "localhost";

Алхам 3: Зураг дүрслэх

Image.network(
  "http://$server:8000/kitten.jpg",        
  fit: BoxFit.fill,
),

Нэг зургийг хуудас шилжих болгонд дахин дахин шинээр татахгүйн тулд утсан дээрээ хадгалбал зүгээр. Үүний тулд cached_network_image санг ашиглана.

cached_network_image | Flutter Package

CachedNetworkImage(
  imageUrl: "http://$server:8000/kitten.jpg",
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),