Image

Image

Image виджети сүрөттөрдү көрсөтүүгө мүмкүндүк берет.

         Image бардык жалпы сүрөт файл форматтарын колдойт: JPEG, PNG, GIF (анын ичинде анимацияланган), BMP, WebP, WBMP.

         Image виджети ар кандай булактардан сүрөттөрдү алууну колдойт. Жана булакка жараша, Image классынын тиешелүү конструктору колдонулат:

         Image() : ImageProvider аркылуу сүрөт алуу

         Image.asset() : AssetBundle объектинин жана ресурстук ачкычтын жардамы менен сүрөт алуу

         Image.network() : тармак дареги аркылуу сүрөт алуу

         Image.file() : классты колдонуп файлдан сүрөт алуу File

         Image.memory() : класстын жардамы менен сүрөттү алуу үчүн Uint8List

Кээ бир конструкторлорду колдонууну карап көрөлү.

Тармак аркылуу сүрөттү алуу

Интернеттин кайсы бир жеринде жайгашкан сүрөттү көрсөтүү үчүн, сүрөт дареги аркылуу өткөн Image.network() конструкторун колдонушуңуз керек:

import 'package:flutter/material.dart';

void main() {

  runApp(Container(

    color: Colors.white,

    child: Image.network("https://picsum.photos/250?image=9"),

  ), ); }

 

Жергиликтүү сүрөттү алуу

         Сүрөттү көрсөтүүнүн дагы бир варианты - Image.asset() конструктору . Бул колдонмонун ичинде сакталган жергиликтүү сүрөттү колдонууга мүмкүндүк берет.

         Сүрөттөрдү сактоо үчүн, келгиле, долбоорго жаңы папканы кошолу, аны биз images деп атайбыз . Бул папкада, түздөн-түз сүрөт файлдары үчүн, биз жаңы папканы түзөбүз сүрөттөр . Ага бир нече сүрөт файлын салалы:

 

         Менин учурда, сүрөт файлы forest.png деп аталат жана ага жол, долбоордун тамырына салыштырмалуу, assets/images/forest.png .

         Сүрөттү жүктөө үчүн Image.asset()долбоордун тамырына салыштырмалуу локалдык файл жолу конструкторго берилет:

import 'package:flutter/material.dart';

void main() {

  runApp(MaterialApp(

    home: Scaffold(

      body: Image.asset("assets/images/forest.png"),

      appBar: AppBar(

        title: const Text("Images"),

      ),   ),  ),  );  }

         Бирок андан тышкары, биз долбоордо ушундай имидж ресурсу бар экенин көрсөтүшүбүз керек. Бул үчүн, pubspec.yaml файлын ачыңыз , ал боюнча төмөнкүдөй көрүнөт:

 

name: hello_app

description: A new Flutter application.

 

# The following line prevents the package from being accidentally published to

# pub.dev using `pub publish`. This is preferred for private packages.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

 

# The following defines the version and build number for your application.

# A version number is three numbers separated by dots, like 1.2.43

# followed by an optional build number separated by a +.

# Both the version and the builder number may be overridden in flutter

# build by specifying --build-name and --build-number, respectively.

# In Android, build-name is used as versionName while build-number used as versionCode.

# Read more about Android versioning at https://developer.android.com/studio/publish/versioning

# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.

# Read more about iOS versioning at

# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html

version: 1.0.0+1

 

environment:

  sdk: ">=2.7.0 <3.0.0"

 

dependencies:

  flutter:

    sdk: flutter

 

 

  # The following adds the Cupertino Icons font to your application.

  # Use with the CupertinoIcons class for iOS style icons.

  cupertino_icons: ^1.0.2

 

dev_dependencies:

  flutter_test:

    sdk: flutter

 

# For information on the generic Dart part of this file, see the

# following page: https://dart.dev/tools/pub/pubspec

 

# The following section is specific to Flutter.

flutter:

 

  # The following line ensures that the Material Icons font is

  # included with your application, so that you can use the icons in

  # the material Icons class.

  uses-material-design: true

 

  # To add assets to your application, add an assets section, like this:

  # assets:

  #   - images/a_dot_burr.jpeg

  #   - images/a_dot_ham.jpeg

 

  # An image asset can refer to one or more resolution-specific "variants", see

  # https://flutter.dev/assets-and-images/#resolution-aware.

 

  # For details regarding adding assets from package dependencies, see

  # https://flutter.dev/assets-and-images/#from-packages

 

  # To add custom fonts to your application, add a fonts section here,

  # in this "flutter" section. Each entry in this list should have a

  # "family" key with the font family name, and a "fonts" key with a

  # list giving the asset and other descriptors for the font. For

  # example:

  # fonts:

  #   - family: Schyler

  #     fonts:

  #       - asset: fonts/Schyler-Regular.ttf

  #       - asset: fonts/Schyler-Italic.ttf

  #         style: italic

  #   - family: Trajan Pro

  #     fonts:

  #       - asset: fonts/TrajanPro.ttf

  #       - asset: fonts/TrajanPro_Bold.ttf

  #         weight: 700

  #

  # For details regarding fonts from package dependencies,

  # see https://flutter.dev/custom-fonts/#from-packages

Атап айтканда, биз төмөнкү бөлүмдү табабыз:

 

# To add assets to your application, add an assets section, like this:

# assets:

#   - images/a_dot_burr.jpeg

#   - images/a_dot_ham.jpeg

# белгиси комментарий белгисин билдирет. Бул бөлүмдү төмөнкүдөй өзгөртөлү:

 

# To add assets to your application, add an assets section, like this:

assets:

    - assets/images/forest.png

         Менин учурда сүрөт файлы forest.png деп аталып , активдер/сүрөттөр папкасында жайгашкандыктан, мен- assets/images/forest.png

 

Андан кийин, Flutter сүрөттү алышы керек:

 

 

Сүрөттүн өлчөмдөрү

Бардык Сүрөт виджетинин конструкторлоруна ээ болгон кошумча эн жана бийиктик параметрлери менен сиз сүрөттүн туурасын жана бийиктигин көрсөтө аласыз.

import 'package:flutter/material.dart';

void main() {

  runApp(MaterialApp(

    home: Scaffold(

      body: Image.asset("assets/images/forest.png", width: 320, height: 240),

      appBar: AppBar(

        title: const Text("images"),

      ),    ),  ), ); }

 

BoxFit

         Image классынын бардык конструкторлору контейнердин ичиндеги сүрөттүн абалын тууралоого мүмкүндүк берүүчү ылайыктуу параметрге ээ. Анын мааниси катары BoxFit enum маанилеринин бирин алат :

         BoxFit.contain : Сүрөт контейнердин минималдуу тарабына (туурасы же бийиктиги) карата масштабдалат. Баалоого окшошBoxFit

         BoxFit.cover : Сүрөт контейнердин максималдуу тарабында (туурасы же бийиктиги) масштабдалат. Баалоого окшошBoxFit

         BoxFit.fill : Сүрөт контейнердин бүт жерин толтурат. Баалоого окшошBoxFit

         BoxFit.fitHeight : Сүрөт бийиктикте сунулган. Баалоого окшош BoxFit

         BoxFit.fitWidth : Сүрөт туурасы сунулган. Баалоого окшош BoxFit

         BoxFit.none : Сүрөт контейнерде тегизделген (демейки боюнча борбордо) жана туурасы менен бийиктигинин катышы этибарга алынбайт. Баалоого окшош BoxFit

         BoxFit.scaleDown : Сүрөт контейнерде тегизделген (демейки боюнча борбордо) жана контейнердин чегине туура келүү үчүн масштабдуу. Баалоого окшош BoxFit

Толтуруу мисалы:

import 'package:flutter/material.dart';

void main() {

  runApp(Container(

    color: Colors.white,

    padding: EdgeInsets.only(top:25),

    child: Image.asset("assets/images/forest.png", fit:BoxFit.fill),

    ),  ); }