[Flutter] List_ 사용법

ListView 사용법과 주요 property

• 가장 일반적으로 사용되는 스크롤 위젯
• ListView는 주로 다음과 같은 방식으로 사용
  • 일반적인 ListView를 명시적으로 호출하고 children 전달하는 방법 (적은 데이터에 사용시 용이함)
  • ListView.builder를 사용하여 동적으로 호출
  • ListView.separated는 ListView.builder 기능에 구분선 사용 가능
• 주요 property
  • reverse: true이면 bottom에서부터 리스트 표시
  • padding: 리스트 아이템 간격 (EdgeInsets로 적용)
  • itemCount: 동적 리스트 아이템 개수 (ListView.builder/ListView.separated에서 사용 가능)
  • itemBuilder: 각 동적 리스트 아이템 정의 (ListView.builder/ListView.separated에서 사용 가능)
  • physics: 스크롤 방식 설정

리스트 타일 위젯을 사용

 

import 'package:flutter/material.dart';
import 'package:flutter_list_grid_page/main.dart';

// ListView 와 ListTile 위젯을 살펴 보자.
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ListView(
          children: [
            ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.amber,
                child: Text('1'),
              ),
              title: Text('item1'),
              subtitle: Text('item sub...'),
              trailing: IconButton(
                onPressed: () {
                  print('item1 클릭 했어요');
                },
                icon: Icon(Icons.more_horiz),
              ),
            ),
            ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.amber,
                child: Text('2'),
              ),
              title: Text('item2'),
              subtitle: Text('item sub...'),
              trailing: IconButton(
                onPressed: () {
                  print('item2 클릭 했어요');
                },
                icon: Icon(Icons.more_horiz),
              ),
            )
          ],
        ),
      ),
    );
  }
}

 

 

list - 2

import 'package:flutter/material.dart';
import 'package:flutter_list_grid_page/main.dart';

// ListView 와 ListTile 위젯을 살펴 보자.
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.amber,
                child: Text('${index + 1}'),
              ),
              title: Text('Item ${index + 1}'),
              subtitle: Text('Item sub ${index + 1}'),
              trailing: IconButton(
                onPressed: () {},
                icon: Icon(Icons.add),
              ),
            );
          },
        ),
      ),
    );
  }
}

 

 

GridView 위젯

• 리스트 뷰와 마찬가지로 항목을 나열하는 위젯이지만, 리스트 뷰와 달리 한 줄에 여러 개를 함께 나열할 수 있음 (그리드 형태)
• 리스트 뷰와 마찬가지로 그리드뷰도 GridView.builder() 생성자를 제공하며,
  • itemCount, itemBuilder 속성을 통해 항목의 개수와 위젯을 지정
  • gridDelegate 속성을 설정해야 함
    • 이 속성에는 SliverGridDelegateWithFixedCrossAxisCount 객체를 지정해줘야 함
    • 해당 객체에서 crossAxisCount 값이 한 줄에 함께 나와야 하는 항목의 개수임
    • 그리드 두 방향을 설정하지 않으면, crossAxisCount는 가로를 가리킴
• 리스트 뷰와 마찬가지로 항목을 나열하는 위젯이지만, 리스트 뷰와 달리 한 줄에 여러 개를 함께 나열할 수 있음 (그리드 형태)
• 리스트 뷰와 마찬가지로 그리드뷰도 GridView.builder() 생성자를 제공하며,
  • itemCount, itemBuilder 속성을 통해 항목의 개수와 위젯을 지정
  • gridDelegate 속성을 설정해야 함
    • 이 속성에는 SliverGridDelegateWithFixedCrossAxisCount 객체를 지정해줘야 함
    • 해당 객체에서 crossAxisCount 값이 한 줄에 함께 나와야 하는 항목의 개수임
    • 그리드 두 방향을 설정하지 않으면, crossAxisCount는 가로를 가리킴
• 참고: scrollDirection 속성에 Axis.horizontal을 설정하면, crossAxisCount는 세로 방향을 가리킴

그리드 뷰 연습

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: GridView.builder(
          // 방향을 지정한다
          scrollDirection: Axis.vertical,
          // 그리드의 열 개수를 고정하는 속성입니다.
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, crossAxisSpacing: 16.0, mainAxisSpacing: 16.0),
          itemCount: 20,
          itemBuilder: (context, index) {
            return Container(
              color: Colors.blue,
              child: Center(child: Text('${index}')),
            );
          },
        ),
      ),
    );
  }
}

 

 

PageView 위젯

• 스와이프 이벤트에 반응하여 항목을 보여주는 위젯
• PageController의 initialPage로 처음 보일 페이지를 설정할 수 있고, viewportFraction으로 현재 페이지가 화면에 차지하는 비율도 설정 가능
  • 예: viewportFraction: 0.7이면 현재 페이지가 화면에 70%, 나머지 30%가 이전과 다음 페이지가 살짝 보이게 됨
• PageController 객체를 PageView의 controller 속성에 적용하여, PageController 설정을 반영시킬 수 있음

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text('pageview'),
          ),
          body: PageView(
            controller: PageController(
              initialPage: 2,
              viewportFraction: 0.9,
            ),
            children: [
              Container(
                margin: EdgeInsets.all(0.0),
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(0.0),
                color: Colors.blue,
              ),
              Container(
                margin: EdgeInsets.all(0.0),
                color: Colors.green,
              ),
            ],
          ),
        ),
      ),
    );
  }
}