[Flutter] List/GridView의 Item 만드는 다양한 방법

<분류>
A. 수단
- OS/Platform/Tool : Linux, Kubernetes(k8s), Docker, AWS
- Package Manager : node.js, yarn, brew, 
- Compiler/Transpillar : React, Nvcc, gcc/g++, Babel, Flutter
- Module Bundler  : React, Webpack, Parcel

B. 언어
- C/C++, python, Javacsript, Typescript, Go-Lang, CUDA, Dart, HTML/CSS

C. 라이브러리 및 프레임워크 및 SDK
- OpenCV, OpenCL, FastAPI, PyTorch, Tensorflow, Nsight

---

1. What? (현상)

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.amber[600],
      child: const Center(child: Text('Entry A')),
    ),
    Container(
      height: 50,
      color: Colors.amber[500],
      child: const Center(child: Text('Entry B')),
    ),
    Container(
      height: 50,
      color: Colors.amber[100],
      child: const Center(child: Text('Entry C')),
    ),
  ],
)

사실 ListView나 GridView를 구현함에 있어서 Children:[]에 넣을 Widget들은 위처럼 Container등 다양한 위젯으로 채워넣을 수 있습니다.

하지만 Conventional 한 방법 혹은 더 안정적인 방법으로 List Item을 구현하는 것은 많은 데이터를 직관적으로 보이도록 도울 수 있기 때문에 다양한 방법을 소개하고자 합니다.

---

2. Why? (원인)

• X

---

3. How? (해결책)

• BoxDecoration()을 활용 : 아래 예시는 AnimatedContainer() 혹은 Container()에서 제공하는 파라미터인 decoration을 활용하는 방법입니다. 이 방법의 child는 실제 넣고 싶은 Text() 등을 넣고, child가 차지 하는 공간 주변을 BoxDecoration()을 통해 꾸며주는 방법입니다.

[BoxDecoration() 예시]

AnimatedContainer(
    duration: const Duration(milliseconds: 300),
    margin: const EdgeInsets.all(5),
    width: 200,
    height: 45,
    decoration: BoxDecoration(
      color: condition? Colors.white70 : Colors.white54,
      borderRadius: condition? BorderRadius.circular(15): BorderRadius.circular(10),
      border: condition? Border.all(color: Colors.deepPurpleAccent, width: 2): null,
    ),
    child: Center(
      child: Text(
        ListNames[index],
        style: GoogleFonts.laila(
                fontSize: 30,
                fontWeight: FontWeight.w500,
                color: condition == index? Colors.black: Colors.grey),
      			),
    	),
    ),
),

Container(
    margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
    width: 400,
    height: 100,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: condition ? Colors.black : Colors.grey
  	),
    child : Container()
);

• ListTile()을 활용 :  타일 형태로 구현 하는 것입니다. leading(왼쪽에 넣고 싶은 것) and trailing(오른쪽에 넣고 싶은것) 파라미터, 그리고 title과 subtitle등의 주어진 파라미터를 활용해 구현할 수 있어 편리합니다.

[ListTile() 예시]

ListTile(
    onTap: () {
      query = ListNames[index];
      Navigator.of(context).pop(query);
    },
    leading: Image(
      image: CachedNetworkImageProvider(ListPathNames[index]),
    ),
    title: Text(
      '${ListNames[index]}',
      style: Theme.of(context).textTheme.bodyText1,
    ),
);

• Card() 를 활용 : 카드 형태의 위젯으로 Item을 구현하는 데 많이 쓰이는 위젯입니다. 모서리나 그림자를 통해 실제 카드처럼 만들 수 있기 때문에 자주 사용하는 것 같습니다.

[Card() 예시]

Center(
  child: Card(
    child: SizedBox(
      width: 300,
      height: 100,
      child: Center(child: Text('Elevated Card')),
    ),
    shape: RoundedRectangleBorder(
    	borderRadius: BorderRadius.circular(16.0),
    ),
    elevation: 4.0,
  ),
);

 

• IconButton() 활용 : Icon을 활용해 구현할 때 주로 사용하는 위젯입니다. 실제 디자인한 아이콘을 넣고, 눌렸을 때 어떤 동작을 할지 등을 구현할 때 유용합니다.

[IconButton() 예시]

IconButton(
    padding: EdgeInsets.zero,
    alignment: Alignment.centerLeft,
    icon: const Icon(Icons.android),
    color: Colors.white,
    onPressed: () {},
),

 

 

---