Re:birth エンジニアリング

Flultterとテックブログと時々iOS

Flutterでの画像表示と枠線、角丸を付ける方法について

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

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

qiita.com

画像の表示

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

flutter.dev

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

(参考画像の URL)

ja.wikipedia.org

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

f:id:qed805:20200219164552p:plain
assetsフォルダを追加する

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

f:id:qed805:20200219164705p:plain
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をタップすると無事にイメージファイルを読み込めます。

f:id:qed805:20200219165040p:plain
ボタン

画像の表示

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

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(),
    );
  }
}

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

f:id:qed805:20200219165256p:plain
画像の表示

画像の枠線の適用

ここでは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
f:id:qed805:20200219170913p:plain
枠線その1
f:id:qed805:20200219170943p:plain
枠線その2

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を使えば実現できます。

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

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

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"),
          ),
        ),
      ),
    );
  }
}

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

f:id:qed805:20200219172041p:plain
角丸を20反映させる場合

幅を200にしましたので20と100の見え方を比較します。

BorderRadius.circular(20) BorderRadius.circular(100)
f:id:qed805:20200219172212p:plain
20
f:id:qed805:20200219172244p:plain
100

これで画像の表示と枠線・角丸の付け方がわかりましたね。 あとはiOSと同じようにドロップシャドウやグラデーションなどの実装がありますがそれはまたの機会に学びます。