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

https://api.flutter.dev/flutter/rendering/RenderImage/colorBlendMode.html

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 :Flutter : Imageウィジェットを使った画像の読み込み

 

広告

ChatGPTの回答のシェア機能を利用して、ChatGPTの回答の質を評価する投稿アプリ「Engineers and GAI」をPlay storeにリリースしました。

ReactとFlutterに関する回答を対象としております。

今後いろいろなジャンルを追加していきます🔥

投稿の閲覧はアカウント登録無しで可能、投稿・フォロー・ブックマークなどはアカウント登録後ご利用いただけます。

現在全機能無料でご利用いただけます。

Google Play で手に入れよう


 

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: 

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 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