#1 30代から始めるAndroidアプリ開発奮闘記
まさかの続編。
全米が待ち望んだ新作。
ここでティンパニの音が鳴る。
主のスペック
- 30代
- ずっと接客業
PC
- Windows10 Pro
スマホ
- SCG14(Samsung Galaxy S22 Ultra)
お前なんでFlutterなんだよ
だってAndroidStudioの日本語化めんどくさいし、
VScodeの方が日本語多くて楽なんだもん。（←でも今回英語のエラーで若干沼ったバカ）
今回なにするのー
前回はとりあえずアプリ開発の基盤と、
シンプルな画面構造を作るところまでやりました。
そこで今回は
REST APIからのデータ取得
をやっていきたいと思います。
そんなすごいものどんどん作れたらこの記事書いてないです。
何のデータ取得すんのー
今回サンプルはこちら
とりあえず
google apiを叩いてみるところから
今回知ったこと
パッケージ追加
flutter pub add http
これでいけるんだね。pubspec直接いじるだけじゃないよねそりゃ。
Windowsでデバッグするときは開発者モードをオンにする
これです
めんどくさかったのでプロジェクトフォルダはそのまま
main.dartをmain.old.dartに。新しくmain.dart作ってそこで作業
今回、特に問題なくGoogle API叩く方はコピペだけでいけました。
MTG APIも叩いてみたい。
まあ、ここらへんを変えるんだろうなあなんて。
var response = await http.get(Uri.https(
'www.googleapis.com',
'/books/v1/volumes',
{'q': '{Flutter}', 'maxResults': '40', 'langRestrict': 'ja'}));
URLがあって、パスがあって、一番下の行はパラメータかなって。
URLは"api.magicthegathering.io"
パスは"/v1/cards"
パラメータは{"set":'DMU'}
でいいかな。
setState(() {
items = jsonResponse['items'];
});
この'items'もcardsに変えないといけませんね。
取得するパラメータも変えて実行。
エラーとの戦い
なん・・・これ・・・？
色々調べたら要はchrome入れろってことだった。
画像URLのhttp通信が解決できないってエラーのよう。
うまいことやってくれよって思ったけど、しょうがないね。
chrome入れたら何事もなく動いたよ
Flutterの何が良いって、
Android繋いだらちゃんとAndroidでやってくれるところだなあ。
そして同じエラーが起きるっていうね。
実機エラー起きた。
に約一日苦しめられた。
ここに助けられた。
import 'dart:io';
class MyHttpOverrides extends HttpOverrides {
@override
HttpClient createHttpClient(SecurityContext? context) {
return super.createHttpClient(context)
..badCertificateCallback =
(X509Certificate cert, String host, int port) => true;
}
}
void main() {
HttpOverrides.global = MyHttpOverrides();
runApp(const MyApp());
}
実はよくわかってない。
たぶん署名必要ないものを署名無くてもとりあえずとってこいアクセスしてこいってことだと思ってる。
でも無事動いて本当に良かった。
実機画面
画質悪！！！
さいごに
なんだかんだいろいろ問題出てきたけど、
すげえ楽しかったです。今回のコード貼っておきますね。
よかったらバッジもよろしくお願いします。
ありがたく活動資金にさせていただきます。
それでは、ここまでありがとうございました。
第０回はこちら
今回のコード
import 'dart:io';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
class MyHttpOverrides extends HttpOverrides {
@override
HttpClient createHttpClient(SecurityContext? context) {
return super.createHttpClient(context)
..badCertificateCallback =
(X509Certificate cert, String host, int port) => true;
}
}
void main() {
HttpOverrides.global = MyHttpOverrides();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Sample',
home: MyHomePage(title: 'Flutter Sample'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List items = [];
Future<void> getData() async {
var response = await http.get(Uri.https('api.magicthegathering.io',
'/v1/cards', {'set': 'DMU', 'pageSize': '50'}));
var jsonResponse = jsonDecode(response.body);
setState(() {
items = jsonResponse['cards'];
});
}
@override
void initState() {
super.initState();
getData();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Sample'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
children: <Widget>[
ListTile(
leading: Image.network(
items[index]['imageUrl'],
errorBuilder: (BuildContext context, Object exception,
StackTrace? stackTrace) {
return const Text('Your error widget');
},
),
title: Text(items[index]['name']),
subtitle: Text(items[index]['type']),
),
],
),
);
},
),
);
}
}
Discussion