반응형

테스트 하기 위해 새로운 프로젝트를 만들고 

main.dart 코드를 다음과 같이 세팅한다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'ListViews',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('ListViews')),
        body: BodyLayout(),
      ),
    );
  }
}

class BodyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _myListView(context);
  }
}

// replace this function with the code in the examples
Widget _myListView(BuildContext context) {
  return ListView();
}

 

ListView

설정메뉴나 고정적인 메뉴 항목일 경우 유용하게 사용할 수 있음.

리스트 선이 있는 경우

Widget _myListView(BuildContext context) {
  return ListView(
    children: ListTile.divideTiles(
      context: context,
      tiles: [
        ListTile(
          title: Text('Sun'),
        ),
        ListTile(
          title: Text('Moon'),
        ),
        ListTile(
          title: Text('Star'),
        ),
      ],
    ).toList(),
  );
}

 

리스트 선이 없는 경우

Widget _myListView(BuildContext context) {
  return ListView(
    children: <Widget>[
      ListTile(
        title: Text('Sun'),
      ),
      ListTile(
        title: Text('Moon'),
      ),
      ListTile(
        title: Text('Star'),
      ),
    ],
  );
}

 

Dynamic ListView

데이터를 가져와 동적으로 리스트를 생성하는 방식

Widget _myListView(BuildContext context) {

      // backing data
  final europeanCountries = ['Albania', 'Andorra', 'Armenia', 'Austria', 
    'Azerbaijan', 'Belarus', 'Belgium', 'Bosnia and Herzegovina', 'Bulgaria',
    'Croatia', 'Cyprus', 'Czech Republic', 'Denmark', 'Estonia', 'Finland',
    'France', 'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland',
    'Italy', 'Kazakhstan', 'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania',
    'Luxembourg', 'Macedonia', 'Malta', 'Moldova', 'Monaco', 'Montenegro',
    'Netherlands', 'Norway', 'Poland', 'Portugal', 'Romania', 'Russia',
    'San Marino', 'Serbia', 'Slovakia', 'Slovenia', 'Spain', 'Sweden', 
    'Switzerland', 'Turkey', 'Ukraine', 'United Kingdom', 'Vatican City'];

  return ListView.separated(
    itemCount: europeanCountries.length,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(europeanCountries[index]),
      );
    },
    separatorBuilder: (context, index) {
      return Divider();
    },
  );
}

데이터를 만들어 생성하는 방식

리턴쪽에 ListView.separated로 설정해서 separatorBuilder를 넣어주면 구분선을 사용할 수 있다.

구분선이 없이 사용하려면 ListView.builder로 리턴시키면 된다.

 

Infinite List

말그대로 무한 스크롤... 그냥 되는거다 사용하는 방법은 좀더 연구해봐야겠지만...

Widget _myListView(BuildContext context) {
  return ListView.builder(
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('row $index'),
      );
    },
  );
}

구분선을 추가하려면

Widget _myListView(BuildContext context) {
  return ListView.separated(
    itemCount: 1000,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('row $index'),
      );
    },
    separatorBuilder: (context, index) {
      return Divider();
    },
  );
}

 

Horizontal ListView

가로스크롤 구현이다.

Widget _myListView(BuildContext context) {
  return ListView.builder(
    scrollDirection: Axis.horizontal,
    itemBuilder: (context, index) {
      return Container(
        margin: const EdgeInsets.symmetric(horizontal: 1.0),
        color: Color(0xFFEEEEEE),
        child: Text('$index'),
        width: 50.0,
      );
    },
  );
}

가로 스크롤 리스트

 

리스트 타일 커스터마이즈

플루터는 기본적으로 제공되는 아이콘이 무척 많은듯 하다. 사용하는 방법도 간단함.

Widget _myListView(BuildContext context) {
  return ListView(
    children: ListTile.divideTiles(
      context: context,
      tiles: [
        ListTile(
          leading: Icon(Icons.wb_sunny),
          title: Text('Sun'),
          trailing: Icon(Icons.keyboard_arrow_right),
        ),
        ListTile(
          leading: Icon(Icons.brightness_3),
          title: Text('Moon'),
          trailing: Icon(Icons.keyboard_arrow_right),
        ),
        ListTile(
          leading: Icon(Icons.star),
          title: Text('Star'),
          trailing: Icon(Icons.keyboard_arrow_right),
        ),
      ],
    ).toList(),
  );
}

다양한 아이콘 적용

 

원하는 이미지를 리스트에 넣기

아래코드로 먼저 바꿔준 후,

Widget _myListView(BuildContext context) {
  return ListView(
    children: ListTile.divideTiles(
      context: context,
      tiles: [
        ListTile(
          leading: CircleAvatar(
            backgroundImage: AssetImage('assets/sun.jpg'),
          ),
          title: Text('Sun'),
          trailing: Icon(Icons.keyboard_arrow_right),
        ),
        ListTile(
          leading: CircleAvatar(
            backgroundImage: AssetImage('assets/moon.jpg'),
          ),
          title: Text('Moon'),
          trailing: Icon(Icons.keyboard_arrow_right),
        ),
        ListTile(
          leading: CircleAvatar(
            backgroundImage: AssetImage('assets/stars.jpg'),
          ),
          title: Text('Star'),
          trailing: Icon(Icons.keyboard_arrow_right),
        ),
      ],
    ).toList(),
  );
}

에셋폴더 생성 후 이미지 넣기

프로젝트 폴더에 에셋폴더를 위와같이 만들고 해당 이름으로 이미지를 넣어준다.

에셋 폴더 설정

pubspec.yaml파일을 열어서 

flutter:

  assets:

    - assets/ 

이부분을 추가해 준다.

 

리스트의 이미지 커스터마이징

 

서브타이틀 추가방법

ListTile(
  leading: CircleAvatar(
  	backgroundImage: AssetImage('assets/sun.jpg'),
  ),
  title: Text('Sun'),
  trailing: Icon(Icons.keyboard_arrow_right),
  subtitle: Text('93 million miles away'),
),

서브타이틀 추가

 

카드타입 리스트

 

Widget _myCardTypeList(BuildContext context) {
  final titles = [
    'bike',
    'boat',
    'bus',
    'car',
    'railway',
    'run',
    'subway',
    'transit',
    'walk'
  ];

  final icons = [
    Icons.directions_bike,
    Icons.directions_boat,
    Icons.directions_bus,
    Icons.directions_car,
    Icons.directions_railway,
    Icons.directions_run,
    Icons.directions_subway,
    Icons.directions_transit,
    Icons.directions_walk
  ];

  return ListView.builder(
    itemCount: titles.length,
    itemBuilder: (context, index) {
      return Card(
        //                           <-- Card widget
        child: ListTile(
          leading: Icon(icons[index]),
          title: Text(titles[index]),
        ),
      );
    },
  );
}

카드타입 리스트

 

커스텀 리스트 아이템

위젯 컬럼을 세팅해서 리스트에 집어넣은 경우이다.

Widget _customListItem(BuildContext context) {
  // the Expanded widget lets the columns share the space
  Widget column = Expanded(
    child: Column(
      // align the text to the left instead of centered
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Card(
          child: ListTile(
            leading: Icon(Icons.computer),
            title: Text("Title"),
            subtitle: Text("SubTitle"),
          ),
        )
      ],
    ),
  );

  return ListView.builder(
    itemBuilder: (context, index) {
      return Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: <Widget>[
              column,
              column,
              column,
            ],
          ),
        ),
      );
    },
  );
}

카드타입에 카드타입을 넣은 경우

 

출처 : https://pusher.com/tutorials/flutter-listviews

반응형

+ Recent posts