【Flutter】ローカル画像を用いた背景表示【日本語】

Flutterのプログラミングについて、備忘録も兼ねて簡単に日本語で記載していきます。

尚、本記事はローカル画像を用いた背景表示についてです。

他のプログラミングに関する記事はこちら

スポンサーリンク

ローカル画像を用いた背景表示

1.画像を使うプロジェクトに「images」フォルダを作成する

※フォルダ名は何でもよい。今回は「images」で作成

※フォルダを作成するディレクトリは「pubspec.yaml」があるディレクトリ

 

2.作成したフォルダ内に画像を保存する(今回はop_back.jpgという廃村の画像を使用)

 

3.pubspec.yamlのflutter:配下にassets:を追加し、表示させる画像を指定する(以下の3~5行目部分)

※サンプルアプリには英語表記のコメントがずらーっと書かれているため人によってはわかりにくい。要はuses-material-design: trueの下に入力すればいい

flutter:
uses-material-design: true
  assets:
   - images/op_back.jpg
   - images/~~~~~.png ←複数読み込ませる場合は下に追加していく

 

4.lib/main.dartに以下の44~56行目部分を指定する(後から自分で見直してもわかるようにコメントを無駄に多く書いている)

// インポート
import 'package:flutter/material.dart';

// 起動時にmain()が呼ばれる → runApp(MyApp()) でMyAppクラスが呼び出される
void main() => runApp(MyApp());

//MyAppクラス
class MyApp extends StatelessWidget {
    // オーバーライド(スーパークラスの関数を上書き)
    @override
    // build関数(様々なタイミングで呼び出される関数)
    Widget build(BuildContext context) {
        return MaterialApp(
            // タイトル
            title: 'Flutter Demo',
            // テーマ
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            // MyHomePageクラスを呼び出す。その際、MyHomePageクラスが持つtitleに値を設定する
            home: MyHomePage(title: 'テスト'),
        );
    }
}

// MyHomePageクラス(StatefulWidgetクラスを継承:状態を持たせる場合に継承させる)
class MyHomePage extends StatefulWidget {
    // コンストラクタ。Keyは状態を保持するためのクラス。コロンは初期化の意味。
    MyHomePage({Key key, this.title}) : super(key: key);
    // 変数宣言
    final String title;
    // _MyHomePageStateのcreateState関数をオーバーライド(上書き) → _MyHomePageStateクラスを呼び出し
    @override
    _MyHomePageState createState() => _MyHomePageState();
}

// _MyHomePageStateクラス(State<クラス名>を継承することで、指定したクラス名に状態をリンクさせる)
class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
        // Scaffoldは枠組みを作る
        return Scaffold(
            // bodyはメインコンテンツ。StackはWidgetを重ねることが可能。
            body: new Stack(
                children: <Widget>[
                    new Container(
                        decoration: new BoxDecoration(
                            image: new DecorationImage(
                                image: new AssetImage('images/op_back.jpg'),
                                fit: BoxFit.cover,
                            ),
                        ),
                    ),
                ],
            )
        );
    }
}

 

5.完成。画像が背景となって表示される。

他のプログラミングに関する記事

プログラミングまとめ

プログラミングに関する記事です。 言語とかツールごとにまとめています。 スポンサーリンク [adcode] Flutter ・簡単導入~サンプルアプリのデバック起動まで ・文字の表示(重ねて[…]

IMG

スポンサーリンク