ListView 위젯 : 스크롤이 가능한 List를 만들기 위한 ListView위젯에 대한 예제는 다음과 같다.
/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: ListView(
children: [
Container(
height: 100,
width: 100,
color: Colors.amber[0],
),
Container(
height: 100,
width: 100,
color: Colors.amber[100],
),
Container(
height: 100,
width: 100,
color: Colors.amber[200],
),
Container(
height: 100,
width: 100,
color: Colors.amber[300],
),
Container(
height: 100,
width: 100,
color: Colors.amber[400],
),
Container(
height: 100,
width: 100,
color: Colors.amber[0],
),
Container(
height: 100,
width: 100,
color: Colors.amber[100],
),
Container(
height: 100,
width: 100,
color: Colors.amber[200],
),
Container(
height: 100,
width: 100,
color: Colors.amber[300],
),
Container(
height: 100,
width: 100,
color: Colors.amber[400],
),
Container(
height: 100,
width: 100,
color: Colors.amber[0],
),
Container(
height: 100,
width: 100,
color: Colors.amber[100],
),
Container(
height: 100,
width: 100,
color: Colors.amber[200],
),
Container(
height: 100,
width: 100,
color: Colors.amber[300],
),
Container(
height: 100,
width: 100,
color: Colors.amber[400],
),
Container(
height: 100,
width: 100,
color: Colors.amber[0],
),
Container(
height: 100,
width: 100,
color: Colors.amber[100],
),
Container(
height: 100,
width: 100,
color: Colors.amber[200],
),
Container(
height: 100,
width: 100,
color: Colors.amber[300],
),
Container(
height: 100,
width: 100,
color: Colors.amber[400],
),
],
),
),
);
}
}
반복되는 구문이기에 이는 ListView.builder를 사용하면 다음과 같이 간결하게 나타낼 수 있다.
/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.
// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: ListView.builder(
itemCount: 100, // 전체 아이템 개수
itemBuilder: (context, index) {
// index는 0 ~ 99까지 증가하며 itemCount만큼 호출됩니다.
print(index % 5); // index를 5로 나눈 나머지
// 위젯을 반환해야 합니다.
return Container(
height: 100,
width: 100,
color: Colors.amber[100 * (index % 5)],
child: Text(
"$index",
style: TextStyle(
fontSize: 24,
),
),
);
},
),
),
);
}
}