※自分の学習記録のメモとしてこの記事を書いています。
1日目：Flutter学習1日目 -公式を読む 1. インストール編-
2日目前編：Flutter学習2日目前編 -公式を読む 2. エディターの設定編-
2日目後編：Flutter学習2日目後編 -公式を読む 3. テストドライブ編-
3日目: Flutter学習3日目 -公式を読む 4. スターターFlutterアプリを作成する-（イマココ）
今回は公式ドキュメントのWrite your first Flutter app, part 1ページを進めていきます！
part1〜4とプロファイルまたはリリースの実行まであり、充実してそうで嬉しいです😊
最初に注意書きが有りました。
This is a guide to creating your first Flutter app. If you are familiar with object-oriented code and basic programming concepts such as variables, loops, and conditionals, you can complete this tutorial. You don’t need previous experience with Dart, mobile, or web programming.
訳：
これは、最初の Flutter アプリを作成するためのガイドです。オブジェクト指向のコードと、変数、ループ、条件式などの基本的なプログラミングの概念に慣れていれば、このチュートリアルを完成させることができます。Dart、モバイル、Web プログラミングの経験は必要ありません。
Dart全く触ったこと無い（Sassでちょこっと見たぐらい）ので、Dartの経験がなくても大丈夫なのはありがたいです🥺モバイル開発も、シミュレーターを起動するぐらいしかやったことないのでそんな人でも扱えるアプリサンプルが公式ドキュメントであるのは信頼が置けます…！
それではやっていきましょう🤳
パート1で作成するもの
パート1ではスタートアップ企業の提案された名前を生成するシンプルなアプリを作ります。ユーザーは名前を選択したり、選択解除したりすることができ、最適なものを保存します。コードは、一度に10個の名前をlazilyに生成します。ユーザーがスクロールすると、より多くの名前が生成されます。ユーザーがスクロールできる範囲に制限はありません。
パート1で学習する内容
- iOS、Android、およびWebで自然に見えるFlutterアプリの作成方法
- Flutterアプリの基本構造
- 機能を拡張するためのパッケージの検索と使用
- ホットリロードを使用して開発サイクルを短縮する
- ステートフルウィジェットを実装する方法
- 無限の遅延読み込みリストを作成する方法
準備
アプリをコンパイルしてウェブで実行する場合は、Webサポートを有効にする必要があります（現在ベータ版です）。
flutter channel beta
flutter upgrade
flutter config --enable-web
実行するとこんな感じ。
configコマンドは一度だけ実行する必要があります。Webサポートを有効にすると、作成したFlutterアプリはすべてWeb用にコンパイルされます。IDE でデバイスプルダウンの下、または flutterデバイスを使ったコマンドラインで、Chromeとウェブサーバーがリストアップされているのがわかるはずです。Chromeデバイスは自動的に Chrome を起動します。Web サーバーはアプリをホストするサーバーを起動し、どのブラウザからでもアプリを読み込めるようにします。開発中はChromeデバイスを使用してDevToolsを使用できるようにし、他のブラウザでテストする場合はWebサーバーを使用します。
ステップ1：スターターFlutterアプリを作成する
まずはテンプレートからFlutterアプリを作成
前回やったCreate the appの手順通りにシンプルなテンプレートのFlutterアプリを作成します。
VS Codeを起動してCommand Paletteにflutterを入力。
New Projectを選択してstartup_namerという名前をつけます。
※このときコマンドパレットでFlutter: New Projectが表示されていない場合はFlutterとDartのプラグインがインストールされていない可能性があります。
暫く待つとlib/main.dartが表示されます。
F5を押してシミュレーターも起動させておきます。
テンプレートを編集
lib/main.dartの内容を置き換えます。main.dartのコードをすべて削除し、画面の中央に「Hello World」と表示するために次のコードをコピペします。
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
このコードの解説💡
- この例では、Materialアプリを作成しています。Materialは、モバイルやウェブで標準的に使用されているビジュアルデザイン言語です。Flutter には豊富な Material ウィジェットが用意されています。
- main() メソッドは矢印 (=>) 記法を使用しています。1行の関数やメソッドには矢印表記を使用します。
void main() => runApp(MyApp());
- アプリはStatelessWidgetを拡張し、アプリ自体をウィジェットにします。Flutterでは、整列、パディング、レイアウトなど、ほとんどすべてがウィジェットになっています。
class MyApp extends StatelessWidget {...
- MaterialライブラリのScaffoldウィジェットは、デフォルトのアプリバー、タイトル、ホーム画面のウィジェットツリーを保持するbodyプロパティを提供します。ウィジェットのサブツリーは非常に複雑です。
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
- ウィジェットの主な仕事は、他の下位レベルのウィジェットの表示方法を記述する build() メソッドを提供することです。
Widget build(BuildContext context) {
- この例のボディは、テキスト子ウィジェットを含むセンターウィジェットで構成されています。Center ウィジェットは、ウィジェットのサブツリーを画面の中央に配置します。
body: Center(
child: Text('Hello World'),
),
ステップ2：外部パッケージを使用する
このステップではenglish_wordsという名前のオープンソースパッケージを使用します。これには数千の最もよく使われる英語の単語といくつかのユーティリティ関数が含まれています。
english_wordsパッケージ及び他の多くのオープンソースパッケージはpub.devで見つけることができます。
pubspec.yamlファイルは、Flutterアプリのアセットと依存関係を管理します。このpubspec.yamlにenglish_words（v3.1.5以降）を追加します。
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
+ english_words: ^3.1.5
保存すると自動でflutter pub getが実行され、プロジェクトにインストールされたすべてのパッケージとそのバージョン番号のリストを含む pubspec.lock ファイルも自動生成されます。
lib/main.dartで新しいパッケージをインポートします。
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
文字列「Hello World」を使用する代わりに、英語の単語パッケージを使用してテキストを生成します。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
+ final wordPair = WordPair.random();
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
title: Text('Welcome to Flutter'),
),
body: Center(
- child: Text('Hello World'),
+ child: Text(wordPair.asPascalCase),
),
),
);
※asPascalCaseは最初の単語を含む文字列内の各単語が大文字で始まることを意味します。
これで保存する度にホットリロードが走り、ランダムな単語のペアが表示されるようになります。
ステップ3：ステートフルウィジェットを追加する
ステートレス・ウィジェットは不変で、そのプロパティは変更できません。
ステートフルウィジェットは、ウィジェットの有効期間中に変更される可能性のある状態を維持します。ステートフルウィジェットを実装するには、少なくとも2つのクラスが必要です。
- StatefulWidgetのインスタンスを生成するクラス
- State クラス
です。ステートフルウィジェットクラスはそれ自体が不変で、捨てたり再生成したりすることができますが、ステートクラスはウィジェットの有効期間中は持続します。
このステップでは、ステートフルウィジェットであるRandomWordsを追加し、そのステートクラスである_RandomWordsStateを作成します。そして、既存のMyAppステートレスウィジェットの中でRandomWordsを子ウィジェットとして使用します。
ステートフルウィジェットのためのボイラプレートコードを作成します。
lib/main.dartで、すべてのコードの後にカーソルを置き、新しい行から始めるためにReturnを数回入力します。stfulと入力するとステートフルウィジェットを作成する候補が出てきます。
Returnキーを押して承諾すると、2つのクラスのボイラプレートコードが表示されます。
カーソルの位置にステートフルウィジェットの名前となるRandomWordsを入力します。
RandomWordsウィジェットはStateクラスを作成する以外にはほとんど何もしません。
デフォルトでは、State クラスの名前の前に"_"が付きます。識別子の前にアンダーバーを付けることは Dart 言語のプライバシーを保護し、State オブジェクトのベストプラクティスとして推奨されています。
これで両方のクラスは以下のようになりました。
class RandomWords extends StatefulWidget {
@override
_RandomWordsState createState() => _RandomWordsState();
}
class _RandomWordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
return Container();
}
}
RandomWordsStateのbuild()メソッドを更新します。
class _RandomWordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
final wordPair = WordPair.random();
return Text(wordPair.asPascalCase);
}
}
以下のdiffの通りに変更を行い、MyAppから単語生成コードを削除します。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
- final wordPair = WordPair.random();
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
title: Text('Welcome to Flutter'),
),
body: Center(
- child: Text(wordPair.asPascalCase),
+ child: RandomWords(),
),
),
);
}
ステップ4：無限スクロールListViewを作成する
このステップでは、_RandomWordsStateを展開して、単語のペアリングのリストを生成して表示します。ユーザーがスクロールすると、リスト（ListViewウィジェットに表示される）は無限に増えていきます。ListViewのビルダーファクトリコンストラクタを使用すると、必要に応じてリストビューをlazilyに構築することができます。
提案された単語のペアリングを保存するための _RandomWordsState クラスに _suggestions list を追加します。また、フォントサイズを大きくするための変数 _biggerFont を追加します。
class _RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _biggerFont = TextStyle(fontSize: 18.0);
// ···
}
次に、_RandomWordsStateクラスに_buildSuggestions()関数を追加します。このメソッドは、提案された単語のペアリングを表示するListViewをビルドします。
RandomWordsState クラスに _buildSuggestions() 関数を追加します。
Widget _buildSuggestions() {
return ListView.builder(
padding: EdgeInsets.all(16.0),
itemBuilder: (context, i) {
if (i.isOdd) return Divider();
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}
このコードの解説💡
itemBuilder コールバックは、提案された単語の組み合わせごとに 1 回呼び出され、各提案を ListTile 行に配置します。偶数行の場合は、単語ペアのリストタイル行が追加されます。奇数行の場合は、分割ウィジェットが追加され、エントリを視覚的に分離します。小さいデバイスでは、分割器が見にくいかもしれないので注意してください。
itemBuilder: (context, i) {
ListViewの各行の前に高さ1ピクセルの分割器ウィジェットを追加します。
if (i.isOdd) return Divider();
式 i ~/ 2 は i を 2 で割って整数の結果を返します。例: 1, 2, 3, 4, 5 は 0, 1, 1, 1, 2, 2 になります。 これは ListView の単語ペアリングの実際の数を計算します。
final index = i ~/ 2;
利用可能な単語ペアリングの数に達した場合は、さらに10個の単語ペアリングを生成してサジェストリストに追加します。
_suggestions.addAll(generateWordPairs().take(10));
_buildSuggestions()関数は、単語ペアごとに1回_buildRow()を呼び出します。
RandomWordsStateに_buildRow()関数を追加。
Widget _buildRow(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
RandomWordsState クラスの build() メソッドを更新して、単語生成ライブラリを直接呼び出すのではなく、_buildSuggestions() を使用するようにします。(Scaffold は基本的なマテリアルデザインのビジュアルレイアウトを実装しています。)
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Startup Name Generator'),
),
body: _buildSuggestions(),
);
}
MyAppクラスで、タイトルを変更してbuild()メソッドを更新し、ホームをRandomWordsウィジェットに変更します。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
- title: 'Welcome to Flutter',
- home: Scaffold(
+ title: 'Startup Name Generator',
+ home: RandomWords(),
- appBar: AppBar(
- title: Text('Welcome to Flutter'),
- ),
- body: Center(
- child: RandomWords(),
- ),
- ),
);
}
完成です🎉
コードの全体像はこちら。
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Startup Name Generator',
home: RandomWords(),
);
}
}
class RandomWords extends StatefulWidget {
@override
_RandomWordsState createState() => _RandomWordsState();
}
class _RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _biggerFont = TextStyle(fontSize: 18.0);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Startup Name Generator'),
),
body: _buildSuggestions(),
);
}
Widget _buildSuggestions() {
return ListView.builder(
padding: EdgeInsets.all(16.0),
itemBuilder: (context, i) {
if (i.isOdd) return Divider();
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}
Widget _buildRow(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
}
感想
ソースコード書ける段階にようやく入れて嬉しいです！🎉
Dartを初めて本格的に見たんですが、TSと少し似てるなあと思いながら進めていました。
立ち位置的にも似ているし、思ったよりも今後スムーズに進みそうです。
次回はWrite Your First Flutter App, part 2を進めていきます！