CircleAvatorで画像を表示する方法

CircleAvatorに画像イメージを使用する方法をまとめます。

ネットワーク上の画像を使用する場合

以下のコードでネットーワーク上の画像を表示できます。

main.dart

CircleAvatar(
    backgroundImage: NetworkImage(
        "url"),
),

ローカルに保存した画像使用する場合

ネットワーク上にない画像を使用する場合、画像をフラッタープロジェクトに対してアセットとして登録する必要があります。

1、imagesフォルダを作成

まず画像保存用のフォルダをプロジェクト直下に配置します。今回はフォルダ名をimagesとしました。このフォルダ内に使用する画像を保存していきます。

2、puspec.yamlを編集

プロジェクトフォルダ内に存在する、pubsupec.yamlを編集し、先ほど作成したimagesフォルダをアセットとして登録します。

pubspec.yaml

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

asset:以下にimagesを追加します。

pubspec.yaml

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

以上でimagesフォルダをアセットとして利用可能になりました！

3,画像を表示

main.dart

CircleAvatar(
    backgroundImage: AssetImage('images/img.jpg'),
),

こちらのコードでimagesフォルダ内の画像を表示できます。
また

main.dart

CircleAvatar(
    child: Image.asset("images/girl.jpg"),
              ),

としても画像の表示はできますが、サークル型ではなく元の画像のまま表示されます。