LoginSignup
4
4

More than 3 years have passed since last update.

Flutterのはじめかた(学び方)

Last updated at Posted at 2020-05-07

Flutterのはじめかた(学び方)です。
Google Codelabsが学習に最適なコンテンツではありますが,2020年4月時点日本語版でflutterのコースは存在しないため英語版で頑張るしかない!:muscle_tone1:
英語が読めなくてもChromeであれば超簡単に翻訳できるので<こちら>をご確認ください。

0-1. 各種ドキュメント

まずは公式ドキュメントの所在です。
今後ガイドやチュートリアルに従い学習を進め行きますが、サンプルに出てくるクラスや関数について、公式ドキュメントで簡単に調べておくと理解が深まり習熟スピードも上がるのでお勧めです。

0-2. 学習に取り組むにあたり

Flutterはとにかく『Widget! Widget! Widget!』そして『Package』です。
多数存在するWidget(部品)とPackageを理解し、それらを組み合わせながらアプリケーションを構築します。WidgetやPackageに関しては以下を参照してください。

1. 開発環境の構築・簡単なプログラムの作成

Flutterの開発環境の準備と簡単なプログラムの作成を以下のガイド・コースに従い学習します。

  1. Flutter Siteの「Get Started」(1-3)
    https://flutter.dev/docs/get-started/install
    1から3までを実施する。(4からはCodelabsの内容となるため)

  2. Codelabsの「Write your first Flutter app, part 1」
    https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0

  3. Codelabsの「Write Your First Flutter App, part 2」
    https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#0

2. 画面レイアウトおよび画面部品の配置・カスタマイズ

画面レイアウトおよび画面部品の配置・カスタマイズについて以下のコースに従い学習します。

  1. Codelabsの「MDC-101 Flutter: Material Components (MDC) Basics (Flutter)」
    画面部品の使い方・カスタマイズ方法を101-104の4つのコースで学ぶことが出来ます。
    https://codelabs.developers.google.com/codelabs/mdc-101-flutter/#0

  2. Codelabsの「MDC-102 Flutter: Material Structure and Layout (Flutter)」
    https://codelabs.developers.google.com/codelabs/mdc-102-flutter/#0

  3. Codelabsの「MDC-103 Flutter: Material Theming with Color, Shape, Elevation, and Type (Flutter)」
    https://codelabs.developers.google.com/codelabs/mdc-103-flutter/index.html#0

  4. Codelabsの「MDC-104 Flutter: Material Advanced Components (Flutter)」
    必須のコースではありません。
    見た目についてこだわったカスタマイズを行いたい場合に本コースを実施してください。
    https://codelabs.developers.google.com/codelabs/mdc-104-flutter/index.html#0

  5. Codelabsの「Building Beautiful UIs with Flutter」
    チャットツールを作りながらUI開発を学ぶコースです。
    101-103を行っていれば、必須のコースではありませんが、LINEのようなチャットツールの作り方を学びたい場合に参考になります。
    https://codelabs.developers.google.com/codelabs/flutter/index.html#0

3. BLoCパターンについて学ぶ

Codelabsで学んだことをもとにアプリ開発を進めていくと、「1つのプログラムが大きく複雑になり、中規模以上のアプリ開発には向かないフレームワークなのでは」という不安を感じます。
ここで、現時点でデファクトスタンダードになりつつある設計パターン「BLoC」パターンについて学びます。

・ BLoCパターンの概要
 ネット上の記事でも一番わかりやすい記事でした。
 https://note.com/yamarkz/n/n7f9106e53179

リリース方法

ここまで作ったアプリをiPhone, Androidにリリースしてみます。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4