今回はFlutterで画像を表示させる方法とWidgetに枠線や角丸を付ける方法について学習します。

SwiftUIでも同じようなことを書きました。

Qiita

SwiftUIでViewに枠線、角丸を適用する – Qiita

https://qiita.com/tamappe/items/d0ac50fa37b326a975ef

はじめにSwiftUIでImageやTextに枠線や角丸を適用する方法を書きます。UIKitで言う所のUIImageViewやUIButtonに枠線や角丸を適用する方法のSwiftUI版です。環境についてMa…

画像の表示

Flutter公式では次のリンクが参考になります。

flutter.dev

52 Pockets

Adding assets and images

https://flutter.dev/docs/development/ui/assets-and-images

How to use images (and other assets) in your Flutter app.

まずはプロジェクトファイルに画像を追加します。
Imageを配置して画像(地球)を読み込みます。

(参考画像の URL)

ja.wikipedia.org

画像をダウンロードしてきます。
Flutterプロジェクトファイルのルート直下にassetsフォルダを追加します。

assetsフォルダにimageの画像ファイルをドラッグアンドドロップします。

これでプロジェクトファイルにimageファイルがimportされました。

画像の読み込み
画像の表示
画像の枠線の適用
画像の角丸の適用

画像の読み込み

Flutter公式には画像ファイルの読み込みは2種類の方法があるそうです。

該当のimageファイルのみを読み込む場合

flutter:

  uses-material-design: true

  assets:
    - assets/earth_image.jpg

とりあえず、assetsフォルダにある全てのファイルを読み込む場合

flutter:

  uses-material-design: true

  assets:
    - assets/

これでPackages upgradeをタップすると無事にイメージファイルを読み込めます。

画像の表示

画像の表示の方法は次のコードで一発です。

Image.asset("画像のファイルパス")

これだけで画像が表示できます。

それでは画像を実際に表示させます。
サンプルコードを書きましたのでそのまま載せます。

custom_image_page.dart

import 'package:flutter/material.dart';

class CustomImagePage extends StatefulWidget {
  @override
  _CustomImagePageState createState() => _CustomImagePageState();
}

class _CustomImagePageState extends State<CustomImagePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("画像表示のサンプル"),
      ),
      body: Center(
        child: Image.asset("assets/earth_image.jpg"),
      ),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:rss_app/custom_image_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '画像表示のサンプルアプリ',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CustomImagePage(),
    );
  }
}

これでビルドすると次のように画面が表示されたら成功です。

画像の枠線の適用

ここではBoxDecorationを使って実現させます。
画像をContainerに乗せて、decorationプロパティにBoxDecorationを入れます。
BoxDecorationにはcolorプロパティとwidthプロパティが存在します。

プロパティ	役割
color	枠線の色
width	枠線の太さ

書き方は次のような感じがいいかと思います。

Container(
          decoration: BoxDecoration(
            border: Border.all(
                color: Colors.red,
                width: 5
            ),
          ),
          child: Image.asset("assets/earth_image.jpg"),
        )

サンプルコードのcustom_image_page.dartを修正します。

import 'package:flutter/material.dart';

class CustomImagePage extends StatefulWidget {
  @override
  _CustomImagePageState createState() => _CustomImagePageState();
}

class _CustomImagePageState extends State<CustomImagePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("画像表示のサンプル"),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
                color: Colors.red,
                width: 5
            ),
          ),
          child: Image.asset("assets/earth_image.jpg"),
        ),
      ),
    );
  }
}

こちらをビルドすると次のように画面が表示されます。

少しわかりやすいようにContainerのwidthを200に設定したものも一緒にします。

width = max	witdh = 200

width = 200 の設定

import 'package:flutter/material.dart';

class CustomImagePage extends StatefulWidget {
  @override
  _CustomImagePageState createState() => _CustomImagePageState();
}

class _CustomImagePageState extends State<CustomImagePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("画像表示のサンプル"),
      ),
      body: Center(
        child: Container(
          width: 200,
          decoration: BoxDecoration(
            border: Border.all(
                color: Colors.red,
                width: 5
            ),
          ),
          child: Image.asset("assets/earth_image.jpg"),
        ),
      ),
    );
  }
}

画像の角丸の適用

次は画像に角丸を反映させる場合の実装になります。
角丸はClipRRectを使えば実現できます。

ClipRRectにborderRadiusのプロパティがあり、これが角丸をどれくらい反映させるのかを制御できるものになります。

例えば、こんな感じに書きます。

Container(
          width: 200,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: Image.asset("assets/earth_image.jpg"),
          ),
        )

角丸を反映させる場合のサンプルコードはこちらになります。

custom_image_page.dart

import 'package:flutter/material.dart';

class CustomImagePage extends StatefulWidget {
  @override
  _CustomImagePageState createState() => _CustomImagePageState();
}

class _CustomImagePageState extends State<CustomImagePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("画像表示のサンプル"),
      ),
      body: Center(
        child: Container(
          width: 200,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: Image.asset("assets/earth_image.jpg"),
          ),
        ),
      ),
    );
  }
}

これでビルドすると次のように表示されます。