Macでファイルを拡張子検索して削除する
パワポでコードにSyntax Highlightをつける方法
はじめてのFlutter -Codelab part1 実装編-
はじめに
はじめてのFlutter -開発環境構築-からの続きで、Codelab:Write Your First Flutter App, part 1の最後までやっていきます。
実装①: Hello Worldを表示
lib/main.dartを次の様に変更し、実行してください。
実機でビルドする場合、最初はロードに少し時間がかかりますが、二回目以降はファイルを保存するだけでhot reload機能が適応され、短時間でビルドが完了します。
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: const Text('Welcome to Flutter'), ), body: const Center( child: const Text('Hello World'), ), ), ); } }
■ ビルド後の画面
学習ポイント
void main() => runApp(new MyApp());
- Flutterでは、ほぼすべてがwidgetで構成されている。
- widgetとは: 現在の設定と状態を考慮して、ビューの外観を記述するもの。
- Stateless Widget:変更可能な状態をもたないwidget。そのため値が変更できない。
- Scaffold Widget: 基本的なマテリアルデザインのレイアウトを構成するクラス。AppBar,SnackBar,BottomSheetなど。
- widgetで実行されるのは
buildメソッド。ここにwidgetの表示方法を記述する。
実装②:外部のパッケージを読み込む。
Flutter Packages ←ここにまとまっていて、検索できます。
プロジェクト直下にあるpubspec.yamlでFlutterアプリのライブラリ管理をします。
追加したいライブラリ(english_words)をdependenciesに記入します。
dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.0 english_words: ^3.1.0 # ← こんな感じで追加
追加したら、AndroidStudioのエディタ画面上部の「Packages get」を選択しましょう。
すると、コンソールにアップデート状況が表示されます。
flutter packages get Running "flutter packages get" in startup_namer... Process finished with exit code 0
あとは、lib/main.dartでimportしてコードを変更してください。
※Codelabからの転用
import 'package:flutter/material.dart'; import 'package:english_words/english_words.dart'; // <- 追加したライブラリをimport void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final wordPair = new WordPair.random(); // Add this line. return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Center( // Change "const" to "new". //child: const Text('Hello World'), // Replace this text... child: new Text(wordPair.asPascalCase), // With this text. ), ), ); } }
■ ビルド後の画面
こんな感じです。ビルドするたびに画面中央の英語の文字が変化します。
また、AndroidStuiodのツールバーにある⚡️ボタンを押して、hot reloadを手動実行できます。
実装③: statefull Widgetの追加
Stateless Widgetはimmutableである。つまり、プロパティの値が不変です。 Statefull Widgetは可変のプロパティ値を扱います。 Statefull Widgetを使うには、次の2つのクラス実装が必要です。
- StatefulWidget class
- State class
- アプリのロジックや状態はこちらに持たせます。
StatefullWidgetとStateの作り方を説明していきます。
まず、最初にStatefulWidgetを継承したRandomWordsクラスを作成します。
あとあとでStateを作ったら、このクラスと紐づけます。とりあえず現時点では、クラスだけ作っておきます
class RandomWords extends StatefulWidget { }
次に、Stateを作成します。 Stateful Widgetのサブクラスをジェネリクスに持たせます。
class RandomWordsState extends State<RandomWords>{ // TODO add build method }
ここから、具体的な実装をしていきます。
Statefull WidgetとStateを関連付けましょう。
createStateメソッドをオーバライドし、Stateを返却します。
class RandomWords extends StatefulWidget { RandomWordsState createState() => new RandomWordsState(); // before lambda function // @override // State<RandomWords> createState() { // return new RandomWordsState(); // } }
最後に、Stateの処理を実装しましょう。
buildメソッド内で英単語をランダムで作成します。
class RandomWordsState extends State<RandomWords> { @override Widget build(BuildContext context) { final WordPair wordPair = new WordPair.random(); return new Text(wordPair.asPascalCase); } }
State,Statefull widgetの準備ができたので、bodyのcenterに設定しましょう。 ビルドするたびに、画面中央の英単語が変化するアプリができているはずです。
import 'package:flutter/material.dart'; import 'package:english_words/english_words.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: const Text('Welcome to Flutter'), ), body: new Center( child: new RandomWords(), // ← 作ったStateful widgetを作成 ) ) ); } } // Stateful Widget class RandomWords extends StatefulWidget { RandomWordsState createState() => new RandomWordsState(); } // State class: class RandomWordsState extends State<RandomWords>{ @override Widget build(BuildContext context) { final wordPair = new WordPair.random(); return new Text(wordPair.asPascalCase); } }
実装④： 無限リストビューを作る
Codelab.1の最後は、ランダムの英単語がひたすら表示されるリストビューを作成します。
RandomWordsStateクラスに次の2行を追加します。
_suggestionsは画面に表示する英単語のリストを保持する変数で、_biggerFontは画面表示する文字サイズ情報です。
📝Dart言語では変数・関数の前に_をつけるとprivateになります。
class RandomWordsState extends State<RandomWords> { // この2行を追加 final List<WordPair> _suggestions = <WordPair>[]; final TextStyle _biggerFont = const TextStyle(fontSize: 18.0); ... }
ListViewに表示するデータの準備
では、次は_suggestionsに持たせる英単語リストを生成するメソッドを作成しましょう。
次のコードをRandomWordsStateに実装します。
ListView.builderのコンストラクタを使って、ListViewの作成条件をつくります。
paddingプロパティで、テキスト周辺のパディング(余白)を設定します。EdgeInsets.allを設定することで、上下左右すべてに同じ値を設定できます。itemBuilderプロパティには、ListViewの各行をWidgetとして作る匿名関数を設定します。 引数のiは0から始まり、呼ばれる度にインクリメントされます。i.isOddで偶数行ならば、区切り線を作成し、 奇数行の場合に、_buildRowメソッドでListViewの行Widgetを作成します。- 無限スクロールできるように、
_suggestionsの要素数以上になったときに、新しく10個の英単語を配列に追加しています。
Widget _buildSuggestions() {
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: (BuildContext _context, int i) {
if (i.isOdd) {
return new Divider();
}
final int index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
}
);
}
_buildRowメソッドの実装は以下の通りです。
ListTileを使って、文字列をListViewにあったWidgetに変換します。
Widget _buildRow(WordPair pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
ListViewに表示する
RandomWordsStateのbuildメソッドを更新し、_buildSuggestionsメソッドでbody要素を作ります。
@override
Widget build(BuildContext context) {
//final wordPair = new WordPair.random(); // Delete these...
//return new Text(wordPair.asPascalCase); // ... two lines.
return new Scaffold ( // 追加: ここから
appBar: new AppBar(
title: new Text('Startup Name Generator'),
),
body: _buildSuggestions(),
); // 追加: ここまで
}
最後に、Widget rootになるMyAppで、RamdomWords Stateful Widgetを設定してあげると完成です。
全体のlib/main.dartを見たい場合は、こちらを参照してください。
class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Startup Name Generator', home: new RandomWords(), // <- ここに設定 ); } }
■ビルド後の画面
GoogleアシスタントのE2Eテストライブラリの使い方
↓のGithubに使い方(詳細な記事へのリンク)とサンプルコードをあげました。
説明が雑ですが😓、、情報を集約しているので誰かの役に立てると幸いです 🙇♂️
