Google謹製のFlutterの使い方(2)

のえる のえる 2018.12.20

前回はFlutterの開発環境を構築するまでを記事にしました。
 
今回はアプリを開発する上で、簡単なTipsなどを記載していきます。
 
まだFlutterの導入がお済みでない方は コチラ の記事からどうぞ。

コンソールにログを出力したい

開発に必要なコンソールへのログ出力は下記のような感じです。

右上のDEBUGを消したい

Flutterでは、プロジェクトを作成すると、アプリ右上に DEBUG という帯が表示されてしまいます。
こちらは、下記のようなコマンドで消すことが可能です。


ナビゲーションバーにアイコンボタンをつけたい

ナビゲーションバーにアイコンボタンを追加するには、下記のようにします。

また、ナビゲーションボタンにアイコンを追加すると、タイトルが自動で左寄せになります。
タイトルの位置を中央寄せ・左寄せにする場合、上記にある「centerTitle」のパラメータを変更することで可能です。

新規画面を追加し、画面遷移をしたい

画面遷移は下記のようにします。
 
まず、遷移後の画面を作成するため、dartファイルを作成します。
(例: screen/sub.dart を作成)
 
sub.dart の内容は下記のような感じにします。

 
次に main.dart に sub.dartを読み込む処理を記載し、ボタン押下などのイベント時に、遷移する処理を記載します。

これで main.dart と sub.dart を行き来する画面遷移が完成します。

テキストのスタイルを変更したい

テキストのスタイルを変更するには下記のようになります。

記事作成時点でデフォルトでは13種類存在しているみたいです。
また、カスタムスタイルを適用することも可能です。

その他

その他、詳細については コチラ の公式ドキュメントからご覧になれます。

POPULAR

のえる

書いた人

のえる

Full-stack Developer / Guitarist