[13] Flutter ListView

flutter_listview
lib.zip
└── lib/
├── main.dart
├── grid_listview.dart
├── HorizontalListview.dart
└── vertical_listview.dart

List View : 스크롤이 가능한 배열형 위젯

코드

• HorizontalListview

import 'package:flutter/material.dart';
import 'package:fluuter_listview/vertical_listview.dart';
class Horizontallistview extends StatelessWidget {
  const Horizontallistview({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView.builder(
          // 가로 리스트뷰로 변경 코드
          // scrollDirection을 미작성시 vertical이 기본
          scrollDirection: Axis.horizontal,
          itemBuilder: (context,index) {
            return Container(
              margin: EdgeInsets.all(4),
              height: 50,
              color: Colors.lightBlueAccent,
              child: Text("${intList[index]}번째"),
            );
          }
        ),
      ),
    );
  }
}

• verticalListview

import 'package:flutter/material.dart';
// 1~100 있는 리스트 생성
// 리스트 안에 있는 내장 메소드
// generate(몇개 만들지, 한개 만든 후 실핼될 코드)
List<int> intList = List<int>.generate(100,(index) => index++);
class VerticalListview extends StatelessWidget {
  const VerticalListview({super.key});
  @override
  Widget build(BuildContext context) {
    print(intList);
    return Scaffold(
      body: SafeArea(
          child: ListView.builder(
            itemCount: intList.length,
              itemBuilder: (context,index){ // builder의 매개변수 context _로 수정가능
                // 매개변수 buildContext, int
                // ListView의 한 칸(item)에는 index가 존재
                // return 위젯
                // 디자인
                return Container(
                  // 회색줄 : lint 줄(hint)
                  // 의미  : 에러 x, 경고 x
                  // --> 추천
                  margin: EdgeInsets.all(8),
                  color: Colors.greenAccent,
                  height: 50,
                  child: Text("${intList[index]}번째 아이템"),
                );
              }
              )),
    );
  }
}

• gird_listview

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
// 1.count
List<int> intList = List<int>.generate(100,(index) => index++);
class GridListviewCount extends StatelessWidget {
  const GridListviewCount({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
          childAspectRatio: 1/2
          ),
          itemBuilder: (_,index){
            return Container(
              margin: EdgeInsets.all(4),
              height: 50,
              color: Colors.purple,
              child: Text("${intList[index]}번째"),
            );
          },
        ),
      ),
    );
  }
}
// 2. extend -- 비율
class GridListviewExtend extends StatelessWidget {
  const GridListviewExtend({super.key});
  @override
  Widget build(BuildContext context) {
    // 디바이스 가로길이를 구하는 코드
    print(MediaQuery.of(context).size.width);
    return Scaffold(
      body: SafeArea(
        child: GridView.builder(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 100,
                  // 디바이스의 가로길이 ~/ maxCrossAxisExtend에 작성한 숫자 +1 개수 출력
            ),
            itemBuilder: (_, index){
              return Container(
                margin: EdgeInsets.all(4),
                height: 50,
                color: Colors.pinkAccent,
                child: Text('${intList[index]}번쩨'),
              );
            }),
      ),
    );
  }
}