前書き
Flutterに精通したい皆さん、こんにちは！
私は数ヶ月にわたって蓄積した私の知識をあなたと共有したいという熱烈な願望を持っていました。
おそらく私の経験は教祖のプログラマーに比べて非常に小さいですが、それでも私はあなたのために何か役に立つことをしようとします。
私たちの作業の結果は、JSONPlaceholderからデータを取得する小さなFlutterアプリケーションになります。
私たちの計画
パート1（現在の記事）-開発の概要、最初の付録、状態の概念。
パート2-pubspec.yamlファイルとコマンドラインでのflutterの使用。
パート3-BottomNavigationBarとナビゲーター;
パート4-MVC。この特定のパターンを最も単純なものの1つとして使用します。
パート5-httpパッケージ。リポジトリクラスの作成、最初のリクエスト、投稿のリスト。
パート6-画像の操作、グリッド形式での画像の表示、ネットワークからの画像の受信、アプリケーションへの独自の画像の追加。
パート7-独自のテーマを作成し、カスタムフォントとアニメーションを追加します。
パート8-テストについて少し。
最初のステップ-コンポーネントの構成とインストール
さて、始めましょう。
インストールページに移動します：インストール-Flutterおよびプラットフォーム用のFlutterをダウンロードします
次に、「エディターのセットアップ」命令を使用してエディターまたはIDEをインストールします。
GoogleのAndroidStudioIDEを使用します。
Android Studioで開発するには、Flutterプラグインをインストールする必要があります（エディターのセットアップ手順で、これを行う方法が説明されています）。
2番目のステップ-プロジェクトの作成
Flutterアプリケーションの選択
次に、アプリケーションの名前を示します（Flutterアプリケーションの名前は小文字である必要があり、個々の単語はアンダースコアで区切ることができます）。
次に、パッケージ名を指定します（GooglePlayまたはAppleStoreでアプリケーションを識別するために使用されます。後で変更できます。AndroidアプリケーションIDまたはAppleApp IDについて詳しく説明します）。
[完了]をクリックします。
3番目のステップは、アプリケーションの初期構造を作成することです
main.dartファイルを不要なコードから削除します。
import 'package:flutter/material.dart';
// main()
//
//
void main() => runApp(MyApp());
// Flutter (,, ..)
// - ,
// ( Android )
// StatelessWidget
//
class MyApp extends StatelessWidget {
// build
@override
Widget build(BuildContext context) {
// MaterialApp - ,
//
// Material Design .
return MaterialApp(
//
// ,
title: 'Json Placeholder App',
// ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
// ,
home: HomePage(),
);
}
}
次に、パッケージを作成します（コードは、明確にするために常に整理する必要があります）。
pages:
home_page.dart:
:
import 'package:flutter/material.dart';
// StatefulWidget ,
//
// setState(VoidCallback fn);
// setState
class HomePage extends StatefulWidget {
// StatefulWidget ,
// State
@override
_HomePageState createState() => _HomePageState();
}
// StatefulWidget
//
// _ ,
// _HomePageState
// private Java / Kotlin
class _HomePageState extends State<HomePage> {
// buil, ,
//
@override
Widget build(BuildContext context) {
// Scaffold ,
//
// Scaffold AppBar, BottomNavigationBar,
// Drawer, FloatingActionButton
// ().
return Scaffold(
// AppBar "Home Page"
appBar: AppBar(title: Text("Home page")),
// Scaffold
// Center ,
//
body: Center(
child: Text(
"Hello, JSON Placeholder!!!",
// Text
textAlign: TextAlign.center,
// Theme.of(context)
// ThemeData, MaterialApp
// ThemeData
// ( headline3, )
style: Theme.of(context).textTheme.headline3,
)
)
);
}
}
Flutter - ,
-
, .
HomePage main :
import 'pages/home_page.dart';
: , , :
import 'package:json_placeholder_app/pages/home_page.dart';
, pubspec.yaml (pubspec.yaml ):
, , iOS Android.
, ( , Honor 30i), Run:
!
DEBUG , :
import 'package:flutter/material.dart';
// main()
//
//
void main() => runApp(MyApp());
// Flutter (,, ..)
// - ,
// ( Android )
// StatelessWidget
//
class MyApp extends StatelessWidget {
// build
@override
Widget build(BuildContext context) {
// MaterialApp - ,
//
// Material Design .
return MaterialApp(
//
// ,
title: 'Json Placeholder App',
//
debugShowCheckedModeBanner: false,
// ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
// ,
home: HomePage(),
);
}
}
, , hot reload:
Hot Reload 2-5 , .
, .
Hot Reload build . ( )
: Hot Reload , .
: Flutter , :
, .. release Flutter .
, Hot Reload.
-
, .
:
import 'package:flutter/material.dart';
// StatefulWidget ,
//
// setState(VoidCallback fn);
// setState
class HomePage extends StatefulWidget {
// StatefulWidget ,
// State
@override
_HomePageState createState() => _HomePageState();
}
// StatefulWidget
//
// ,
// _HomePageState
// - private Java / Kotlin
class _HomePageState extends State<HomePage> {
// ,
// .. _counter
// ,
// _counter
var _counter = 0;
// build ,
//
@override
Widget build(BuildContext context) {
// Scaffold
//
// Scaffold AppBar, BottomNavigationBar,
// Drawer, FloatingActionButton
// ().
return Scaffold(
// AppBar "Home page"
appBar: AppBar(title: Text("Home page")),
// Scaffold
// Center ,
//
body: Center(
// AnimatedSwitcher,
//
child: AnimatedSwitcher(
// : const
// , Duration
//
// Duration
// (, ..)
duration: const Duration(milliseconds: 900),
// AnimatedSwitcher reverse ,
//
// , ,
// reverseDuration 0
//
reverseDuration: const Duration(milliseconds: 0),
child: Text(
//
// _counter
//
"$_counter",
//
// _counter
// setState,
// AnimatedSwitcher
// key ,
// ,
key: ValueKey<int>(_counter),
// Text
textAlign: TextAlign.center,
// Theme.of(context)
// ThemeData, MaterialApp
// ThemeData
// ( headline3, )
style: Theme.of(context).textTheme.headline3,
),
)
),
//
// FloatingActionButton -
floatingActionButton: FloatingActionButton(
//
// Flutter
child: Icon(Icons.animation),
onPressed: () {
// setState
// ,
// .
//
setState(() {
_counter++;
});
},
),
);
}
}
:
! !
.
, ))
)
!