FlutterのListViewを使って、リストを作成します。

また背景は、画像を使用します。

まずは、asssetsフォルダ内にimagesフォルダを作成し、画像を入れます。

image2

pubspecc.yaml内に、画像の位置を指定します。

image3

ターミナルで、flutter pub getを実行しましょう。

main.dartに、先程設定した画像パスのリストを作成します。

class _MyHomePageState extends State<MyHomePage> {
  List<String> images = [
    "assets/images/img1.jpg",
    "assets/images/img2.jpg",
    "assets/images/img3.jpg",
  ];

Scaffold内のbodyListViewを設定します。

class _MyHomePageState extends State<MyHomePage> {
  List<String> images = [
    "assets/images/img1.jpg",
    "assets/images/img2.jpg",
    "assets/images/img3.jpg",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
      ),
    );
  }
}

ListVie.builderitemCountitemBuilderを設定します。

itemCountは、imagesの数を指定します。

body: ListView.builder(
  itemCount: images.length,
  itemBuilder: () {},
),

itemBuildercontextindexを指定します。

body: ListView.builder(
  itemCount: images.length,
  itemBuilder: (BuildContext context, int index) {},
),

itemBuilder内に、Containerを返します。

Container内にリストの高さとリスト内の画像を指定します。

画像の指定は、decorationBoxDecorationを設定します。

また、BoxDecoration内にimageを指定し、DeocorationImageで画像を指定します。

画像は、BoxFitcoverを設定します。

body: ListView.builder(
  itemCount: images.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 200,
      decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.cover,
          image: AssetImage(images[index]),
        ),
      ),
    );
  },
),

では、ブラウザで確認すると、

image4

無事、リストで画像を背景にすることができました。

テキストを挿入してみましょう。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: ListView.builder(
      itemCount: images.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 200,
          decoration: BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage(images[index]),
            ),
          ),
          child: Text(
            "これは、${index + 1}番目のリストです",
            style: const TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.white),
          ),
        );
      },
    ),
  );
}

背景画像の上にテキストを表示することができました。

image5

ブログ一覧