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に使い方(詳細な記事へのリンク)とサンプルコードをあげました。
説明が雑ですが😓、、情報を集約しているので誰かの役に立てると幸いです 🙇♂️