Flutter APIから取得した画像をいいね数順に並べたい。

現在、フリー画像検索アプリを作成しており、検索したフリー画像を画面一覧に表示し、表示する際にいいねの数順に並び替えて表示させたいと思っております。

自分で調べてみて、sortを使って並び替えたいと思っているのですが、
Mapをクラスに変換した後にどのように並び替えを行えばよいかわからない状況です。(どこでどのような処理が必要なのかわからない。)

下記にソースコードを載せますので、助言いただければ幸いです。(Flutter初心者なので、できれば具体的に教えていただけると幸いです。)

*likesでいいね数を取得しています。

該当のソースコード

. . . //変数 class _PixabayPageState extends State<PixabayPage> { List<PixabayImage> PixabayImages = []; Future<void> fetchImage(String text) async{ final response = await Dio().get( 'https://pixabay.com/api', queryParameters: { 'key': '33291405-2778a36ae956e1bb7aae9efff', 'q':'$text', 'image_type':'photo', 'pretty':'true', 'per_page':'20' }, ); final List hits = response.data['hits']; PixabayImages = hits.map((e) => PixabayImage.fromMap(e)).toList(); setState(() { }); } @override void initState() { // TODO: implement initState super.initState(); fetchImage('赤'); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: TextFormField( decoration: InputDecoration( fillColor: Colors.white, filled: true, ), onFieldSubmitted: (text){ print(text); fetchImage(text); }, ), ), body: GridView.builder( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, ), itemCount: PixabayImages.length, itemBuilder: ((context, index) { final pixabayImage = PixabayImages[index]; return InkWell( child: Stack( fit: StackFit.expand, children: [ Image.network( pixabayImage.previewURL, fit:BoxFit.cover, ), Align( alignment: Alignment.bottomRight, child: Container( color: Colors.white, child: Row( mainAxisSize:MainAxisSize.min, children: [ const Icon( Icons.thumb_up_alt_outlined, size: 14, ), Text('${pixabayImage.likes}'), ], ) ), ), ], ), ); }) ), ); } } class PixabayImage { final String previewURL; final int likes; final String webformatURL; PixabayImage({ required this.previewURL, required this.likes, required this.webformatURL, }); factory PixabayImage.fromMap(Map<String,dynamic> map){ return PixabayImage(previewURL: map['previewURL'], likes: map['likes'], webformatURL: map['webformatURL']); } }

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

コメントを投稿

0 コメント