21. Flutterでの画像表示と枠線、角丸を付ける方法について
今回はFlutterで画像を表示させる方法とWidgetに枠線や角丸を付ける方法について学習します。
SwiftUIでも同じようなことを書きました。
画像の表示
Flutter公式では次のリンクが参考になります。
まずはプロジェクトファイルに画像を追加します。 Imageを配置して画像(地球)を読み込みます。
(参考画像の URL)
画像をダウンロードしてきます。
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"), ), ), ), ); } }
これでビルドすると次のように表示されます。
幅を200にしましたので20と100の見え方を比較します。
BorderRadius.circular(20) | BorderRadius.circular(100) |
---|---|
これで画像の表示と枠線・角丸の付け方がわかりましたね。 あとはiOSと同じようにドロップシャドウやグラデーションなどの実装がありますがそれはまたの機会に学びます。