[Flutter] 이미지들을 목록형(List)으로 나열하기

>전체 코드

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    List<Map<String, dynamic>> dataList = [
      {
        "numbers": "숫자 1",
        "imgUrl": "https://www.google.com/1.jpg",
      },
      {
        "numbers": "숫자 2",
        "imgUrl": "https://www.google.com/2.jpg",
      },
      {
        "numbers": "숫자 3",
        "imgUrl": "https://www.google.com/3.jpg",
      },
      {
        "numbers": "숫자 4",
        "imgUrl": "https://www.google.com/4.jpg",
      },
      {
        "numbers": "숫자 5",
        "imgUrl": "https://www.google.com/5.jpg",
      },
    ];

    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: dataList.length,
              itemBuilder: ((context, index) {
                String numbers = dataList[index]['numbers'];
                String imgUrl = dataList[index]['imgUrl'];
                return Card(
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Image.network(
                        imgUrl,
                        height: 200,
                        width: double.infinity,
                        fit: BoxFit.cover,
                      ), // Image.network
                      Container(
                        width: double.infinity,
                        height: 200,
                        color: Colors.black.withOpacity(0.45),
                      ), // Conainer
                      Text(
                        numbers,
                        style: TextStyle(color: Colors.white, fontSize: 40),
                      ) // Text
                    ],
                  )); // Stack // Card
                }),
            ), // ListView.builder
          ), // Expanded
        ], // <Widget>[]
      ), // COlumn
    ); // Scaffold
  }
}

 

 

위젯

1. ListView와 ListView.builder

ListView	ListView.builder
모든 항목을 한 번에 생성하여 화면에 표시한다.	동적으로 항목을 생성하여 효율적으로 메모리를 관리한다.
작은 목록이나 정적인 데이터에 적합하다.	itemCount와 itemBuilder 매개변수를 사용하여 필요한 항목만 생성하고 스크롤 시 재활용한다.
children 속성을 사용하여 모든 위젯을 한 번에 정의한다.	대규모 데이터나 동적인 목록에 적합하며, 성능을 최적화할 수 있다.

 

> ListView.builder의 매개변수

- itemCount: 리스트에 표시할 전체 항목의 수를 지정한다.

- itemBuilder: 리스트의 각 항목에 대해 호출되어 해당 위치에 맞는 위젯을 반환한다.

 

 

2. Card

: Card는 Material Design 스타일의 그림자가 있는 사각형 위젯이다. 일반적으로 정보를 나타내거나 그룹화된 콘텐츠를 표시하는 데 사용되며, 리스트나 그리드 안에서 사용하여 사용자에게 정보를 시각적으로 제공하는 데 도움을 준다.

 

 

3. Stack

: 위젯을 겹쳐서 쌓을 수 있도록 배치하는 위젯이다. 자식 위젯들을 겹쳐서 배치할 때 유용하며, 각 자식 위젯의 위치를 정확하게 지정할 수 있다.

 

-  Stack의 특징

 - 자식 위젯들이 Z축을 따라 겹쳐져 표시된다. 가장 위에 있는 자식 위젯이 다른 자식 위젯보다 앞에 표시된다.

 - 각 자식 위젯의 위치는 Positioned 위젯을 사용하여 지정할 수 있는데, 이 위젯은 Stack의 자식으로 사용되어 각 자식 위젯의 위치와 크기를 정확히 제어할 수 있다.

 - Stack은 주로 복잡한 레이아웃을 구성할 때 사용되며, 다양한 디자인 요소를 겹쳐서 표시하는 데 유용하다.

 

- alignment 속성: Stack 내부의 자식 위젯들을 어떻게 정렬할 지 지정할 때 사용한다.

 - alignment.topLeft

 - alignment.center

 - alignment.bottomRight

 - alignment(0, 0)