FlutterのGet startedを実践(english_wordsとリストビューの作成)
イントロダクション
Flutterで実際にアプリを作っていきます。練習を兼ねているので、公式サイトを参考にしながら開発していきます。
Hello worldを出力させるStep 1については、こちらをご覧ください。
目次
環境
- PC : macbook Air (2015 early)
- OS : macOS Mojave(10.14.5)
- CPU : 1.6 GHz Intel Core i5
- メモリ : 4GB
導入編はこちら
初期化
こちらの続きです。
lib/main.dartの編集までは同じです。
step2: 外部パッケージを使う
目標 : english_wordsのパッケージをコードに組み込む
pubspec.yamlに以下のコードを追加- vscodeなら保存、ターミナルなら
$ flutter pub getでプロジェクトにライブラリが保存される lib/main.dartに以下のようにコードを編集
pubspec.yamlに追加するコード
dependencies: flutter: sdk: flutter english_words: ^3.1.0 # 追加
lib/main.dartに追加するコード
flutter get started, part1 step2
エミュレータまたは実機で実行し、ホットリロードの度に文字が変わったら、成功です。
Pub siteは外部パッケージを検索できるサイトで、english_wordsもあります。
step3: Stateful widgetを追加
step2からさらに発展させて、Stateful widgetを追加します。
main.dartにstate classを作成- stateful widgetを追加
- buildメソッドを追加
main.dartを以下のように書き換えれば良いです。
flutter get started, part1 step3
アプリを再起動させて先程と同じように表示されれば成功です。
step4: スクロールリストビューの作成
RandomWordsStateクラスを編集してスクロールリストビューを作成します。
_suggestionsリストを追加_buildSuggestions関数を追加_buildRow関数を追加build関数を編集MyApp関数を編集
以下のように変更すれば良いです。
flutter get started, part1 step4
ホットリロードして画面がリストビューになったら成功です。
まとめ
お疲れ様でした。
ここまではPart1でした。 次はPart2が待っています。 他にも、Learn moreやFlutter samples、cookbookなど、公式は非常に充実しています。
ちなみに、私はまだまだ初学者なので、他のチュートリアルをします。
