Lorem Picsum

Lorem ipsum 들어봤나? 가짜로 만드는 문장 이야기 하는 거임 ㅇㅇ. 디자인에 글이 필요할 때가 있잖아? 그런데 "어제 부대찌개 먹는데 김부장이 침튀어서 따귀 때리고 싶었다." 이렇게 써놓으면 안되잖아? 그래서 그럴싸하지만 읽어보면 전혀 말이 안되는 그런 문장을 로렘 입숨이라고 그랴. "때로는 별들에 떠오르는 태양은 숨죽였다." 뭐 이런식으로 말이지.

이미지도 그럴 때가 있잖아 아무거나 하긴 뭐하고... 대강 아무거나 있어보이는 거 넣고 싶은데 언제 그거 일일이 찾아서 넣어. 이럴 때 랜덤으로 사진을 가져올 수 있는 사이트가 있어. 👇👇

https://picsum.photos/

Lorem Picsum

Lorem Picsum(로렘 픽숨 정도 되려나?)

사용법은 초간단해. https://picsum.photos/ 기본 링크 뒤에 URL을 적절히 추가해서 이미지를 가져오면 됨.

가로 세로 크기 지정해서 랜덤 이미지 한장 읽어오기	https://picsum.photos/{width}/{height}
가로 세로 정사각형 랜덤 이미지 한장 읽어오기	https://picsum.photos/{size}
특정 id를 가진 이미지 한장 읽어오기	https://picsum.photos/{id}/{width}/{height}
seed를 넣어 랜덤 이미지 한장 읽어오기	https://picsum.photos/seed/{seed}/{width}/{height}
grayscale로 변환해서 읽어오기	https://picsum.photos/{size}?grayscale
blur로 변환해서 읽어오기	https://picsum.photos/{size}?blur | blur={1~10}
파일 포맷 지정하기	https://picsum.photos/{size}.jpg
이미지 List 불러오기	https://picsum.photos/v2/list
이미지 List 불러오기 + Page 번호와 읽어올 갯수 추가	https://picsum.photos/v2/list?page=2&limit=50

 

이걸 왜 플루터에 했냐고? 앱 제작할 때 이런 데이터가 없으면 .... 뭐랄까 좀 제작하기가 힘들더라고.. 막 답답하고 ㅎㅎㅎ 그래서 웹에서 random image를 가져올 수 있는지 찾아봤더니 누가 짧게 위젯을 만들어 놔서 소개할려고 ㅎㅎ👇👇

import 'dart:math';

class developmentHelper {
  static final random = Random();
  static String randomPictureUrl() {
    final randInt = random.nextInt(1000);
    return 'http://picsum.photos/seed/$randInt/300/300';
  }
}

요렇게 작성하고 Image.network 안에서 불러오면👇👇

import 'utils/developmentHelp.dart';

...
class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.network(developmentHelper.randomPictureUrl()),
    );
  }
}
...

Lorem picsum 이미지

간단하게 이미지를 불어올 수 있지.

 

그런데 누군가 만들어 놨을 거라고? 응 맞아 lorem_picsum 이라는 Dart package가 있어. 👇

https://pub.dev/packages/lorem_picsum/install

lorem_picsum | Dart Package

아래 명령으로 설치하고

% flutter pub add lorem_picsum

import 'package:lorem_picsum/lorem_picsum.dart';

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(children: [
        Text("Lorem Picsum",
        textDirection: TextDirection.rtl,
        ),
        Image.network(LoremPicsum().getImage(300, 300))
      ]),
    );
  }
}

실행하면 에러가 null safety error가 나오지 훗 ㅋㅋㅋㅋㅋㅋㅋ null safery error는 조금 다른 주제니까 나중에 따로 설명하도록 하던지.. 아니면 다른 블로그나 문서 많아~ 아주 많아 찾아보던지. 암튼 지금은 에러를 무시하자고👇

--no-sound-null-safety 옵션 추가

vsc 기준으로 설정-> flutter run additional args로 검색-> --no-sound-null-safety 추가하고 동작시켜보면 정상적으로 구동시킬 수 있어. 그런데 이건 매우 매우 추천하는 방법이 아냐. 결국은 저 lorem_picsum package를 업그레이드 하거나 해야 하는데.. 음... 뭐 내가 만든 것도 아니고.. 몰라.. 뭐야, 그거.. 무서워..

몰라.. 뭐야 그게 무서워..

lorem_picsum package로부터 image load