[Flutter] Card + ListTile

Card + ListTile : 스크롤이 가능한 카드와 리스트뷰 위젯을 합친 형태

---

Card + ListTile

---

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> comments = <String>[
    '최신 음악 무제한',
    '뮤직비디오 무제한',
    '음악 라이브러리 공유',
    '뮤직비디오 업로드',
    '뮤직비디오 공유 무제한'
  ];

  final List<IconData> icons = <IconData>[
    Icons.music_note,
    Icons.music_video,
    Icons.library_music,
    Icons.videocam,
    Icons.video_library
  ];

  final List<String> wons = <String>[
    "5,000",
    "7,000",
    "9,000",
    "10,000",
    "15,000",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MINOKUMA - FLUTTER'),
      ),
      body: ListView.separated(
        padding: EdgeInsets.all(8),
        itemCount: comments.length,
        itemBuilder: (context, index) {
          return Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Icon(
                    icons[index],
                    color: Colors.redAccent,
                  ),
                  title: Text('${comments[index]}'),
                  subtitle: Text(
                    '가격 : ${wons[index]} 원',
                  ),
                ),
                ButtonBar(
                  children: <Widget>[
                    FlatButton(
                      color: Colors.black87,
                      child: Text('신청하기'),
                      onPressed: () {},
                    )
                  ],
                )
              ],
            ),
          );
        },
        separatorBuilder: (context, index) {
          return Divider();
        },
      ),
    );
  }
}

 

ListView 위젯에 separated 으로 구분자를 줘서 Divider 위젯 삽입