[Flutter]Listview

Listview
:내가 원하는 static, 정적인 뷰의 목록
ListView는 어느 정해진 공간안에 컨텐츠가 들어가고,
그 컨텐츠의 사이즈가 부모(ListView)의 사이즈보다 커지면 자동으로 스크롤이 생기는 위젯을 의미한다

ListTile
:각 목록 아이템 하나하나
Image.network
:이미지를 저장하지 않아도 주소에서 불러올 수 있다.

반복해주려면 Listview.builder()쓰면됨
Item count 에 몇번 반복 할건지
itembuilder(contexts){여기안에는 return 반복할 위젯 }

📍랜덤 유저 이미지
https://randomuser.me/

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(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:Scaffold(
        appBar: AppBar(
          title: Text('리스트입니다!'),
        ),
        body: Center(
          child: _buildList(),
        )
      )
    );
  }
}
Widget _buildList() => ListView(
  children: [
    _tile("안녕하세요", "반가워요"),
    _tile("안녕하세요", "반가워요"),
    _tile("안녕하세요", "반가워요"),
    _tile("안녕하세요", "반가워요"),
  ],
);

ListTile _tile(String title, String subtitle) => ListTile(
  title: Text(title),
  subtitle: Text(subtitle),
  leading: Image.network("https://randomuser.me/api/portraits/women/90.jpg")
);

Roundview로 설정하기

ListTile _tile(String title, String subtitle) => ListTile(
  title: Text(title),
  subtitle: Text(subtitle),
  leading: 
      ClipRRect(
        borderRadius: BorderRadius.circular(100),
  child:Image.network("https://randomuser.me/api/portraits/women/90.jpg")
      )
);

userimage 랜덤으로 나타내기

Widget _buildList() => ListView(
  children: [
    _tile("안녕하세요", "반가워요"),
    _tile("안녕하세요", "반가워요"),
    _tile("안녕하세요", "반가워요"),
    _tile("안녕하세요", "반가워요"),
    _tile("안녕하세요", "반가워요"),
    _tile("안녕하세요", "반가워요"),
    _tile("안녕하세요", "반가워요"),
    _tile("안녕하세요", "반가워요"),
  ],
);

ListTile _tile(String title, String subtitle) => ListTile(
  title: Text(title),
  subtitle: Text(subtitle),
  leading:_userImage(images[Random().nextInt(images.length)])
);
ClipRRect _userImage(String url) => ClipRRect(
    borderRadius: BorderRadius.circular(100),
    child:Image.network(url),
);
final images = [
  'https://randomuser.me/api/portraits/women/40.jpg',
  'https://randomuser.me/api/portraits/women/15.jpg',
  'https://randomuser.me/api/portraits/men/33.jpg',
  'https://randomuser.me/api/portraits/women/17.jpg',
  'https://randomuser.me/api/portraits/men/84.jpg',
  'https://randomuser.me/api/portraits/women/45.jpg',
  'https://randomuser.me/api/portraits/women/10.jpg',
  'https://randomuser.me/api/portraits/women/33.jpg'
];

📍참고자료

• https://www.youtube.com/watch?v=J61zERYY7k4