colorBlendModeプロパティ

BlendMode? colorBlendMode

Image(画像)と色の組み合わせ方を指定するプロパティ。

デフォルト値はBlendMode.srcIn。ブレンドモードに関しては

色がsource

画像がdestination

です。

colorBlendModeプロパティの型はBlendMode型。列挙型ですね。

列挙型の値を指定することで画像(image)と色の組み合わせ方を指定する、と。

色がsource

画像がdestination

何のこっちゃ、という感じですが、↓のページに詳しく説明されているのでその説明で使用される用語みたいです。

https://api.flutter.dev/flutter/dart-ui/BlendMode-class.html

BlendMode列挙型

import 'package:flutter/material.dart';
void main(){
  return runApp(MaterialApp(home:MyApp(),),);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return

…

2021年3月7日2023年12月1日

2021/3/7 :Flutter : Imageウィジェットを使った画像の読み込み

Engineer’s companionというエンジニア・プログラマーの学習をサポートするwebアプリを公開致しました😆🎉

フロントエンドフレームワーク公式ドキュメント用

https://fh1.okutaro.com

サーバーサイドフレームワーク公式ドキュメント用

https://fh2.okutaro.com

演習回数・メモ書きの保存機能、エクスポート/インポート機能、URLやメモの内容での検索機能など豊富な機能で日々の学習を強力にサポート!!

ほとんどのページに操作説明が付いていて操作がわかりやすい!

現在全機能完全無料でご利用可能です。

ユーザー登録不要、アクセス後すぐにご利用可能です。

ぜひ日々の学習にご利用いただけますと幸いでございます。

アプリ内に置いている画像をImage.assetメソッドで読み込んで表示させます。

基本

(1)読み込みたい画像をプロジェクトルート直下のassetsディレクトリに入れます。

ということでまずプロジェクトルート直下に画像などのアセットを入れるディレクトリ、assetsディレクトリを作ります(androidディレクトリの下)。

(2)次にassetsディレクトリに、読み込みたい画像を入れます。

assetsディレクトリ直下に

Screenshot_1596586622.png

を入れました。

そしてassetsディレクトリ内にもう一つディレクトリ「imagesディレクトリ」を作ります。

そしてassets/imagesディレクトリ内に

diamond.png

ファイルを入れました。

(3)pubspec.yamlファイルに、「assetsディレクトリ内のアセット(画像)をアプリで使う」ことを示すコードを記述します。

pubspec.yaml

flutter:

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

pubspec.yamlファイルのflutterセクションのassetsサブセクションに上記のように記述します。

インデントが「スペース二つ」でないと画像を読み込めませんので注意しましょう。

(4)これで

Screenshot_1596586622.png

を読み込めるようになったので、main.dartファイルに…

2021年3月6日

2021/3/7 : Flutter : Display images from the internetの訳

Display images from the internet

Displaying images is fundamental for most mobile apps.

画像の表示は、ほとんどのモバイルアプリにとって基本的なものです。

Flutter provides the Image widget to display different types of images.

Flutter は、さまざまな種類の画像を表示するImageウィジェットを提供します。

To work with images from a URL, use the Image.network() constructor.…

2020年10月19日

2020/10/19 Flutter : Image widgetの訳

Imageウィジェットは画像を表示します。

URLを指定する方法と、アプリのパッケージ内の画像を指定する方法があります。

下記のサンプルはネットワーク上の(GitHubにある)画像を表示するサンプルです。Image.networkメソッドは引数にURLを表す文字列を指定します。

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

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget

…

タグ: Image

2021/3/11 : Flutter : ImageクラスのBlendModeまとめ