一覧表示画面で、スクロールすると次々にデータを読み込んでいく、無限スクロールを簡単に作る方法を紹介します。 無限スクロールを作る方法がいろいろあるのですが、初心者の自分でもできたのでこれが一番簡単かと思います。 データを取得するAPIを準備する 今回はAPI経由でデータを取得し、一覧表示するのでまずAPIを準備します。 今回は、以下のswaggerで記載したtitleのみが一覧で返されるAPIを用意しました。次のデータがあれば、レスポンスのoffsetに次の位置が返り、なければ返りません。 sample.yml openapi: 3.0.0 info: title: sample version: '1.0' description: sample contact: name: murapon servers: - url: 'http://localhost:31180' paths: /list: get: operationId: get-list summary: 一覧取得 description: 一覧取得 parameters: - schema: type: integer default: '10' in: query name: limit description: limit - schema: type: integer default: '0' in: query name: offset description: offset responses: '200': description: OK content: application/json: schema: $ref: '#/components/schemas/response_list_get' components: schemas: response_list_get: title: reponse_list_get description: 一覧取得APIのレスポンスモデル type: object properties: list: type: array items: type: object properties: title: type: string description: タイトル required: - title total_count: type: integer description: 総件数 next_offset: type: integer description: 次のoffset required: - list - total_count flutterでswaggerを読み込んで、APIからデータを取得できるようにする FlutterでSwagger(openapi-generator)を使う方法を参考にしてください。 一覧表示を作る 以下が、flutter側の全ソースです。 sample_page.dart import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:openapi/api.dart'; class SamplePage extends StatefulWidget { const SamplePage({ Key key, }) : super(key: key); @override _SamplePageState createState() => _SamplePageState(); } class _SamplePageState extends State<SamplePage> { List<Map> list = null; bool loading = false; int offset = 0; @override Widget build(BuildContext context) { var length = list?.length ?? 0; return Scaffold( appBar: AppBar(title: Text("一覧")), body: new ListView.builder( itemBuilder: (context, index) { if (index == length && offset!=null) { _load(); return new Center( child: new Container( margin: const EdgeInsets.only(top: 8.0), width: 32.0, height: 32.0, child: const CircularProgressIndicator(), ), ); } else if (index > length) { return null; } if(list.length > index) { var event = list[index]; return Container( child: ListTile(title: Text(event['title'])), ); } else { return null; } }, ), ); } Future<void> _load() async { if (loading || offset == null) { return null; } loading = true; try { var client = ApiClient(basePath: "http://10.0.2.2:31180"); var defaultApi = DefaultApi(client); int limit = 3; // 一度に取得する件数 var response = await defaultApi.getListWithHttpInfo( limit:limit, offset: offset); ResponseListGet results = ResponseListGet.fromJson(jsonDecode(response.body)); setState(() { offset = results.nextOffset; if (list == null) { list = <Map>[]; } results.list.forEach((dynamic item) { list .add({'title': item.title as String}); }); }); } catch (e) { print(e.toString()); } finally { loading = false; } } } 最初の、 sample_page.dart（抜粋） List<Map> list = null; bool loading = false; int offset = 0; で、初期化し、_load();を実行します。 _load();の中で、APIからデータを取得し、setStateを使って、取得したデータをlistに入れつつ、再描画処理を実行し、初期表示を行います。 2回目は、取得したoffsetの値があれば、再度APIを実行しなければ、実行しません。 API経由で全データを取得し終わったら、それ以上スクロールしても何もしないという実装にしたかったので、loadingとoffsetで制御しましたが、これを二つを消せば、何度も_load()を実行し続けることが可能です。_load()の中身を変えることで、全部表示したらまた最初から表示し直すなどの表示も可能です。

iOSで画像間の類似度を数値化する方法です どちらが上の画像に似ている？ にている画像を探したい VisionFeaturePrintが使える VisionFeaturePrintは、たくさんの画像で学習した機械学習モデルによって画像の特徴を数値に抽象化したものです。 その数値を比べることで、画像が似た特徴を持っているかがわかります。 手順 画像からfeaturePrintを取得します。 do { let request = VNGenerateImageFeaturePrintRequest() let requestHandler = VNImageRequestHandler(ciImage: ciImage, options: [:]) try requestHandler.perform([self!.request]) guard let featurePrint = request.results?.first as? VNFeaturePrintObservation else { return } } catch let error { print(error) } 画像それぞれのfeaturePrintの間の差を計算します。 var distance = Float(0) try featurePrint.computeDistance(&distance, to: baseFeaturePrint) print(distance) この画像を基準に、featurePrintの差を出してみます。数値が小さい方が、特徴が似ていると判断されています。 ↑BaseImage 松ぼっくり distance: 28.104025 リス distance: 22.826147 全体の色調は松ぼっくりの画像の方が似ていますが、きちんとリスという特徴を把握していることがわかります。 ? フリーランスエンジニアです。 お仕事のご相談こちらまで rockyshikoku@gmail.com Core MLやARKitを使ったアプリを作っています。 機械学習／AR関連の情報を発信しています。 Twitter Medium