[Flutter] ScrollBar

ScrollBar : 스크롤 위젯에 현재 사용자가 어느 부분을 알려주는 막대를 추가

---

 

ScrollBar

 

---

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: Scrollbar(
        child: 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();       
          },        
        ),
      ),
    );        
  }       
}       

 

반복할 때마다 Divider 위젯을 추가로 삽입