📷

Flutterで画像をバックグラウンドに表示する

2 min read

環境

  • macOS Big Sur Version 11.3.1
  • Flutter 2.2.0
  • Dart 2.13.0

画像をバックグラウンドに表示する

画像を置くフォルダを用意

まず、利用したい画像を用意してプロジェクト内のフォルダに入れます。
※ネット上にある画像を使うパターンもできますが、今回はあらかじめ用意した画像を読み込む形にします。
単純にこちらのサンプルのほうが少ないなーという主観的観測結果によるものです😎

プロジェクト直下にimagesフォルダをつくります。(フォルダの名前は任意です。)

Image from Gyazo

androidでエラーになってますが気にしないでいただければ・・・w

次に作成したフォルダにぱくたそ様から拾ってきたいい感じフリー画像を置きます。
ファイル名はbackground-sample.jpgとしました。

https://www.pakutaso.com/photo/37868.html

Image from Gyazo

pubspec.yamlに設定を追加する

Flutterでプロジェクト内に用意した画像を利用するには、pubspec.yamlに設定が必要になります。
以下のようにpubspec.yamlflutterキー配下にあるassetsに上で作成したフォルダ名を追記します。

Image from Gyazo

BoxDecorationを使って画像をバックグラウンドに表示する

単に画像を読み込むだけならImageウィジェットを使えば事足りますが、背景画像として使いたい場合にはBoxDecorationDecorationImageを使います。

ポイントをまとめると、

  • ContainerdecorationプロパティにBoxDecorationを指定する
  • BoxDecorationimageプロパティにDecorationImageを指定する
  • DecorationImageimageプロパティに画像を表示するウィジェットを利用してパスを指定する

mainと分けて記述しているので、そこは各自補完していただくかGitHubのソースをご確認ください。

import 'package:flutter/material.dart';

class BackGroundImage extends StatelessWidget {
  const BackGroundImage({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('画像をバックグラウンドに設定サンプル'),
      ),
      body: Container(
        decoration: const BoxDecoration(
            image: DecorationImage(
          image: AssetImage('images/background-sample.jpg'),
          fit: BoxFit.cover,
        )),
        child: const Center(
          child: Text(
              'ホラーゲームとかに使えそう',
            style: TextStyle(
              color: Colors.white,
              fontSize: 30,
            ),
          ),
        ),
      ),
    );
  }
}

Image from Gyazo

ソース全体

https://github.com/captain-blue210/flutter_todo_app

参考