snovaのブログ

プログラミングとか、日常のこととか、アウトプットしたほうがよいと聞いたので

FlutterのGet startedを実践(english_wordsとリストビューの作成)



【スポンサーリンク】



イントロダクション

Flutterで実際にアプリを作っていきます。練習を兼ねているので、公式サイトを参考にしながら開発していきます。

Hello worldを出力させるStep 1については、こちらをご覧ください。

www.snova301.work

目次

環境

導入編はこちら

www.snova301.work

初期化

こちらの続きです。 lib/main.dartの編集までは同じです。

step2: 外部パッケージを使う

目標 : english_wordsのパッケージをコードに組み込む

  1. pubspec.yamlに以下のコードを追加
  2. vscodeなら保存、ターミナルなら$ flutter pub getでプロジェクトにライブラリが保存される
  3. 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を追加します。

  1. main.dartにstate classを作成
  2. stateful widgetを追加
  3. buildメソッドを追加

main.dartを以下のように書き換えれば良いです。

flutter get started, part1 step3

アプリを再起動させて先程と同じように表示されれば成功です。

step4: スクロールリストビューの作成

RandomWordsStateクラスを編集してスクロールリストビューを作成します。

  1. _suggestionsリストを追加
  2. _buildSuggestions関数を追加
  3. _buildRow関数を追加
  4. build関数を編集
  5. MyApp関数を編集

以下のように変更すれば良いです。

flutter get started, part1 step4

ホットリロードして画面がリストビューになったら成功です。

まとめ

お疲れ様でした。

ここまではPart1でした。 次はPart2が待っています。 他にも、Learn moreFlutter samplescookbookなど、公式は非常に充実しています。

ちなみに、私はまだまだ初学者なので、他のチュートリアルをします。

参考サイト