[Flutter] URL 주소로 이미지 가져오기 / 무료 이미지 사이트 picsum

[Flutter] URL 주소로 이미지 가져오기 / 무료 이미지 사이트 picsum

 

안녕하세요, 

오늘은 무료로 이미지를 제공해주는 사이트를 소개해드리고, Flutter 에서 URL 주소로 이미지를 가져오는 방법을 공유드릴게요

 

https://picsum.photos/

Lorem Picsum

 

코딩연습할때 이미지가 필요할 때가 많을텐데, 그때마다 이리저리 찾을 필요없이 픽썸에서 이미지를 가져오실 수 있습니다.

 

 

픽썸 사이트에 들어가면 url 사용 가이드를 볼 수 있는데,

위와 같은 url을 사용하면 랜덤이미지를 가져올 수 있습니다.

 

저는 위의 가이드에 나와있는것 처럼, id를 사용해서 특정 이미지를 가져와보겠습니다.

 

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, crossAxisSpacing: 3, mainAxisSpacing: 10),
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) {
          return Image.network('https://picsum.photos/id/1/200/200');
        },
      ),
    );
  }
}

 

 

대충 GridView 위젯을 사용해서 이미지를 가져와보았어요.

return Image.network('url'); 을 사용해서 이미지를 표시하는데 id값이 1로 고정이라 같은 이미지만 나온것을 볼 수 있습니다.

 

 

return Image.network('https://picsum.photos/id/${index+1}/200/200');

 

 

이번에는 id값을 입력하는 자리에 index+1값을 줘서 id 1~10 까지 이미지를 가져와보았습니다.

인스타그램 클론코딩이나 사진을 많이 사용하는 앱을 코딩할때 사용하면 편리할꺼예요.