フレームワーク
これも新しいプロジェクトで、Flutterのウェブリクエストフレームワークに何を使うべきか、技術的なリサーチをする必要があります。イメージの読み込みは？記事の詳細にはMarkdownを使う予定ですが、Flutterはそれを実装できますか？これらはすべて事前にリサーチする必要があります。
このプロジェクトでは、コードのバージョン管理にはGitHubを使います。 まず、新しいFlutterプロジェクトと新しいプライベートGitHubプロジェクトを作成し、以下のコマンドを使ってローカルのコードとリモートのGitHubを関連付けます。
echo "# andblog" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://.//.it
git push -u origin master
関連付けに問題がなく、後で変更を加えたい場合は、Android Studio付属のGitを使ってコードを直接コミットできます。
次は、Flutterウェブリクエストフレームワークは何を使っているのか？どのように機能するのでしょうか？
ネットワーク
データ・ソース
ネットワークリクエストフレームワークというと、まずデータの出所の問題を解決するために、バックエンドを持っていない、サーバーがない、どうやって入手するのか？急がない、彼らはゼロからAPPの開発の記事のこのシリーズは、単独でプロジェクトを行うことができると言う、私は当然方法を持っています。
http
ウェブ・リクエスト・フレームワークのデータがあります。
例として、Postmanを使って記事のリストをリクエストするデータ構造を見てみましょう：
{
"results": [
{
"content": "記事の内容テスト1",
"cover": "http://..//--/.pg",
"createdAt": " ",
"date": "",
"objectId": "ct7BGGGV",
"summary": "要約1",
"title": "タイトルテスト1",
"updatedAt": " "
},
{
"content": "記事の内容テスト2",
"cover": "http://..//--/.pg",
"createdAt": " ",
"date": "",
"objectId": "3L42777G",
"summary": "まとめ2",
"title": "タイトルテスト2",
"updatedAt": " "
}
]
}
Flutterが提供するWebリクエストフレームワークはhttp、アドレスです：
httpパッケージをpubspec.yamlに追加します：
dependencies:
http: ^0.12.1
プロジェクトルートからflutter pub getコマンドを実行してパッケージをインストールします。
新しいblog_list_page.dartは、記事リストを表示するために使用され、blog.dartは記事リストの構造テーブルであり、直接記事リストをロードするエントリmain.dartを配置し、詳細なコードは次のとおりです。
main.dart：
import 'package:flutter/material.dart';
import 'andblog/list/blog_list_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AndBlog',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: new BlogListPage(),
);
}
}
blog_list_page.dart：
import 'package:flutter/material.dart';
import 'package:flutter_andblog/andblog/http/http_common.dart';
import 'package:http/http.dart' as http;
import 'blog.dart';
class BlogListPage extends StatefulWidget {
@override
BlogListPageState createState() => new BlogListPageState();
}
class BlogListPageState extends State<BlogListPage> {
List<Blog> blogList = [];
@override
void initState() {
super.initState();
//ページに入るとすぐにインターフェースを要求する
getBlogListData();
}
//Webリクエスト
getBlogListData() async {
var response = await http.get(HttpCommon.blog_list_url, headers: HttpCommon.headers());
if (response.statusCode == 200) {
// setState runOnUiの Threadに相当する。
setState(() {
blogList = Blog.decodeData(response.body);
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AndBlog'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
],
),
),
floatingActionButton: FloatingActionButton(
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
すべてのネットワークURLをHttpCommonに入れます。詳細なコードはhttp_common.dartにあります：
class HttpCommon{
static var blog_list_url = 'https://..///le/';
static Map<String, String> headers(){
//ヘッダーを設定する
Map<String, String> headers = new Map();
headers["X-Bmob-Application-Id"] = "bmob Application-Id";
headers["X-Bmob-REST-API-Key"] = "bmob REST-API-Key";
headers["Content-Type"] = "application/json";
return headers;
}
}
Webリクエストデータの解析はblog.dartにあります：
import 'dart:convert';
class Blog{
final String content;
final String cover;
final String date;
final String objectId;
final String summary;
final String title;
//コンストラクタ
Blog({
this.content,
this.cover,
this.date,
this.objectId,
this.summary,
this.title,
});
static List<Blog> decodeData(String jsonData) {
List<Blog> blogList = new List<Blog>();
var data = json.decode(jsonData);
var results = data['results'];
print('results='+results[0]['content']);
for (int i = 0; i < results.length; i++) {
blogList.add(fromMap(results[i]));
}
return blogList;
}
static Blog fromMap(Map<String, dynamic> map) {
return new Blog(
content: map['content'],
cover: map['cover'],
date: map['date'],
objectId: map['objectId'],
summary: map['summary'],
title: map['title'],
);
}
}
print('results='+results[0]['content']);私は習慣的にデータが正しく解析されているかどうかを確認するために印刷し、最終的に期待に応えるために、記事のテスト1の内容を印刷するために多くの試み。
json_serializable
blog.dartの記事リストの構造を書く際に、手動でフィールドを1つずつノックし、その後パースする必要がありますが、FlutterにはGsonFormatのような自動パースプラグインはありません、もちろんあります、それはjson_serializableです、json_serializableを使用すると、通常の依存関係と2つの開発依存関係が必要です：
dependencies:
flutter:
sdk: flutter
json_annotation: ^3.0.1
dev_dependencies:
flutter_test:
sdk: flutter
build_runner: ^1.10.0
json_serializable: ^3.3.0
プロジェクトルートからflutter pub getコマンドを実行してパッケージをインストールします。
記事の詳細構造を例に挙げましょう：
{
"content": "記事の内容テスト1",
"cover": "http://..//--/.pg",
"createdAt": " ",
"date": "",
"objectId": "ct7BGGGV",
"summary": "まとめ1",
"title": "タイトルテスト1",
"updatedAt": " "
}
jsonからエンティティクラスdetail.dartを作成します：
import 'package:json_annotation/json_annotation.dart';
//エンティティー・クラス・ファイルが生成されたファイルを見つけるためには、そのファイルを'detail.g.dart'
part 'detail.g.dart';
@JsonSerializable()
class Detail{
final String content;
final String cover;
final String date;
final String objectId;
final String summary;
final String title;
//コンストラクタ
Detail({
this.content,
this.cover,
this.date,
this.objectId,
this.summary,
this.title,
});
}
detail.g.dartを書き終えたばかりのときにエラーが出るのは普通のことです！パーサファイルがまだ生成されていないからです。
次に、プロジェクトのルート・ディレクトリを解析し、以下のコマンドを実行します。flutter packages pub run build_runner build
detail.g.dartファイルが生成されることがわかります：
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'detail.dart';
// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************
Detail _$DetailFromJson(Map<String, dynamic> json) {
return Detail(
content: json['content'] as String,
cover: json['cover'] as String,
date: json['date'] as String,
objectId: json['objectId'] as String,
summary: json['summary'] as String,
title: json['title'] as String,
);
}
Map<String, dynamic> _$DetailToJson(Detail instance) => <String, dynamic>{
'content': instance.content,
'cover': instance.cover,
'date': instance.date,
'objectId': instance.objectId,
'summary': instance.summary,
'title': instance.title,
};
次に、これら2つのメソッドをdetail.dartに記述します：
factory Detail.fromJson(Map<String, dynamic> json) => _$DetailFromJson(json);
Map<String, dynamic> toJson() => _$DetailToJson(this);
次に、fromJsonメソッドを呼び出して、Webリクエストからデータを解析します：
var data = json.decode(response.body);
detail = Detail.fromJson(data);
print('results='+detail.title);
このように考えると、json_serializableを使うことはGsonFormatよりも便利とは言えません。 フィールドのパースが省けるだけで、フィールドを追加するステップが自動化されるわけではありません。
