[Flutter] ListView (Builder)
2020. 12. 26. 15:38ㆍFlutter Mobile App/Flutter 기초
반응형
ListView (Builder) : 리스트뷰에 사용할 수 있는 생성자로 Builder, custom, separated 기 있는데, 그 중에서 Builder를 제일 많이 사용하며, itemCount를 통해 들어간 값만큼 for문으로 반복하여 출력하는 형태
main.dart
더보기
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<String> entries = <String>['1', '2', '3'];
final List<int> colorCodes = <int>[700, 400, 100];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('MINOKUMA - FLUTTER'),
),
body: ListView.builder(
padding: EdgeInsets.all(8),
itemCount: entries.length, // 반복 횟수
itemBuilder: (context, index) {
return Container(
height: 50,
color: Colors.blue[
colorCodes[index]
],
child: Center(
child: Text('센터 ${entries[index]}'),
),
);
},
),
);
}
}
itemCount에 entries 리스트 길이를 입력하여 세 번 반복하여 컨테이너 각 위젯(센터 1, 센터 2, 센터 3)을 반환
반응형
'Flutter Mobile App > Flutter 기초' 카테고리의 다른 글
[Flutter] Card + ListTile (0) | 2020.12.26 |
---|---|
[Flutter] Card (0) | 2020.12.26 |
[Flutter] ListView (separated) (0) | 2020.12.26 |
[Flutter] Drawer (0) | 2020.12.26 |
[Flutter] Bottom Sheet (0) | 2020.12.26 |