flutter listview 예제

flutter listview
flutter 세로 방향 listview

class SampleCode extends StatefulWidget {
  const SampleCode({super.key});

  @override
  State<SampleCode> createState() => _SampleCodeState();
}

class _SampleCodeState extends State<SampleCode> {
  @override
  Widget build(BuildContext context) {
    
    List<ZoneModel> testZoneList = [
      ZoneModel(type: 'Intro Zone', teacherName: 'kang', teacherImgPath: 'www')
    ];

    return Expanded(
      child: ListView.builder(
        scrollDirection: Axis.vertical,
        itemCount: testZoneList.length,
        shrinkWrap: true,
        itemBuilder: (context, index) {
          return Container(
            width: 100,
            height: 50,
            // color: Colors.pink,
          );
        },
      ),
    );
  }
}

flutter 가로 방향 listview
이것을 그대로 세로 listview 안에 넣어서 중접 listview 구현 가능
이것을 위해 physics 속성 화인 필요

class SampleCode extends StatefulWidget {
  const SampleCode({super.key});

  @override
  State<SampleCode> createState() => _SampleCodeState();
}

class _SampleCodeState extends State<SampleCode> {
  @override
  Widget build(BuildContext context) {
    List<ZoneModel> testZoneList = [
      ZoneModel(type: 'Intro Zone', teacherName: 'kang', teacherImgPath: 'www')
    ];

    return Row(
      children: [
        Expanded(
          child: Container(
            height: 110,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              shrinkWrap: true,
              physics: const BouncingScrollPhysics(),
              itemBuilder: (context, index) {
                return Column(
                  children: [
                    Container(
                      width: 90,
                      height: 90,
                      margin: const EdgeInsets.fromLTRB(0, 0, 15, 0),
                    ),
                    Container(
                      width: 90,
                      height: 20,
                      alignment: Alignment.center,
                      margin: const EdgeInsets.fromLTRB(0, 0, 15, 0),
                      padding: const EdgeInsets.fromLTRB(0, 5, 0, 0),
                      // color: Colors.blue,
                      child: Text('어린이'),
                    )
                  ],
                );
              },
            ),
          ),
        ),
      ],
    );
  }
}