【Flutter】背景いっぱいに画像を表示する

最近Flutterにハマっています。むしろFlutterしか触っていません。

背景、iOSでいうとUIViewControllerのviewのbackgroundImageに画像を設定するやり方です。

背景いっぱいに画像表示

Stackを使って実現することができます。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text(widget.title)),
        body: new Stack(
          children: <Widget>[
            new Container(
              decoration: new BoxDecoration(
                image: new DecorationImage(
                  image: new NetworkImage(
                      "http://2xmlabs.com/wp-content/uploads/2018/01/C21NRVrUoAAI7eI.jpg"),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            new ListView(
                padding: const EdgeInsets.all(20.0),
                children: ["A", "B", "O"].map((String str) {
                  return new Text(str);
                }).toList()
            ),
          ],
        )
    );
  }
}

ちなみにContainerのdecorationプロパティに設定するやり方でもいけます。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text(widget.title)),
      body: new Container(
        decoration: new BoxDecoration(
          image: new DecorationImage(
            image: new NetworkImage(
                "http://2xmlabs.com/wp-content/uploads/2018/01/C21NRVrUoAAI7eI.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: new ListView(
            padding: const EdgeInsets.all(20.0),
            children: ["A", "B", "O"].map((String str) {
              return new Text(str);
            }).toList()
        ),
      ),
    );
  }
}