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/ツールのバージョンなど）

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

行動規範の内容に同意します

回答1件

ベストアンサー

Listクラスにsortメソッドがあるので下記のようにして、ソート後の結果を使うと良いのではないでしょうか。
sortメソッドにカーソルを合わせる(あるいはメソッド名を⌘クリックする)と定義箇所のドキュメントコメントが見られるので、
使い方を確認されると良いと思います。

void main(){

  //ソート前
  List<PixabayImage> pixabayImages = [
    PixabayImage(name:'aaa', likes: 4,),
    PixabayImage(name:'bbb', likes: 10,),
    PixabayImage(name:'ccc', likes: 1,),
    PixabayImage(name:'ddd', likes: 8,),
  ];

  pixabayImages.sort((a,b)=>b.likes.compareTo(a.likes));
  //ソート後
  print(pixabayImages); //[bbb : 10 likes, ddd : 8 likes, aaa : 4 likes, ccc : 1 likes]
}


class PixabayImage{
  PixabayImage({
    required this.likes,
    required this.name,
  });
  final int likes;
  final String name;

  toString(){
    return '$name : $likes likes';
  }
}

投稿2023/02/26 13:15

編集2023/02/26 13:19