Flutterで画像を説明文付きのいい感じに表示する

Flutterでいい感じにできたウィジェットの備忘録と共有を兼ねて、メモしておきます。

最終イメージ

画像にグラデーションをつけ、暗くなった部分に説明文を表示したい。

まずは画像を表示

（Statefulである必要はありませんが、デフォルトで作成されるmain.dartから変更が少ない状態からでも作成されるようにStatefulWidgetにしています。）

pubspec.yaml

  assets:
    - images/sample.jpg

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
              fit: BoxFit.fitHeight,
              image: AssetImage('images/sample.jpg'),
            ),
          ),
        ),
      ),
    );
  }
}

画像が表示される。
多くのサイトではImageやDecorationImageを使用しているが、説明文を画像の中に入れたいので、Containerのdecoration要素を利用する。

---

画像にグラデーションをかける

作成したコンテナの中に更にコンテナを作成し、decoration要素でグラデーションを作成する。
※_MyHomePageStateクラスのみ変更するので、プログラムはその部分だけの記載にします。

main.dart

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
              fit: BoxFit.fitHeight,
              image: AssetImage('images/sample.jpg'),
            ),
          ),
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                stops: [0.5, 0.7, 0.95],
                colors: [Colors.black12, Colors.black54, Colors.black87,],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

LinearGradientの中で注意するのは、stopsとcolorの要素。

• stops
  • グラデーションをかける位置を設定
  • 全体を1とするならば、半分からグラデーションをかけたいので0.5を設定
  • どんどん濃くして行くために0.7から0.95にかけて濃い色を設定
• colors
  • stopsで指定した位置から始める色を設定する
  • black12やblack54などの数字の部分は不透明率によって数が大きくなるので、調整しながら色を設定する

---

タイトルと説明文を追加する

作成したグラデーションの中にタイトルと説明文を追加する。
文字の大きさを変えた二段で構成したいので、Columnを使用する。

main.dart

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
              fit: BoxFit.fitHeight,
              image: AssetImage('images/sample.jpg'),
            ),
          ),
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.only(left: 30, bottom: 20),
                  alignment: Alignment.topLeft,
                  child: Text('写真のタイトル',
                      style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w600,
                          color: Colors.white)
                  ),
                ),
                Container(
                  padding: const EdgeInsets.only(left: 30, bottom: 100),
                  alignment: Alignment.topLeft,
                  child: Text('写真の説明文。写真の説明文。写真の説明文。写真の説明文。写真の説明文。写真の説明文。',
                      style: TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.w300,
                        color: Colors.white)
                  ),
                ),
              ],
            ),
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                stops: [0.5, 0.7, 0.95],
                colors: [Colors.black12, Colors.black54, Colors.black87,],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

画面の下に表示させたいので、mainAxisAlignmentはendに設定する。
paddingや表示位置を設定したいので、Containerを使って、その中にTextを入れている。

完成。