Flutterに入門してつまったところ。電卓アプリを作りながら。その１

16609 ワード
アプリ 入門 個人開発 Flutter アプリ テキストリンク

最近、やっとFlutterに入門。。

こんな電卓アプリを作りながら、Flutterのことを理解している最中。
その際に、悩んだ点や調べた内容の備忘録。

以下の記事の続き的な内容。
1. Flutterに入門する前に集めたリンク集 - くらげになりたい。
2. Flutterに入門して疑問に思ったことと、そのとき調べたこと - くらげになりたい。

背景画像をつけたい

Containerのdecorationを使うといける

class Background extends StatelessWidget {
  Background({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage("images/background.png"), fit: BoxFit.fill),
      ),
    );
  }
}

参考: Flutterで画像背景を設定して透過ヘッダーにする - Qiita

AppBarがないときに、ステータスバーにかぶらないようにしたい

SafeAreaで囲むといけた

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: //...,
      ),
    );
  }

参考: SafeArea | Flutter開発する前に知っておきたい35のWidget一覧 - Qiita

HexColorで色を指定したい

標準ライブラリにはないっぽい？
標準クラスをextendsして自作した。

import 'dart:ui';

class HexColor extends Color {
  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF" + hexColor;
    }
    return int.parse(hexColor, radix: 16);
  }

  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

使い方はこんな感じ。

import './HexColor.dart';
class ColorText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      "123456789",
      style: TextStyle(
        color: HexColor("#4D4DAC"),
      ),
    );
  }
}

参考: colors — Flutterで16進数のカラー文字列を使用する方法

ImageButtonみたいに、画像にクリックイベントをつける

ImageをGestureDetectorで囲むと、イベントを取得できるっぽい。

return GestureDetector(
  onTap: () => debugPrint("onTap"),
  child: Image.asset("image/button.png"),
);

参考: Create a button with an image in Flutter? - Stack Overflow
参考: How to add on click event to Image in Flutter

コンソールログを表示する

いろいろ書き方があるっぽい。

// stderr.writeln
stderr.writeln('print me');

// print, debugPrint
print("print messaage");
debugPrint("debugPrint messaage");

// developer.log
developer.log('log me', name: 'my.app.category');

developer.log('log me 1', name: 'my.other.category');
developer.log('log me 2', name: 'my.other.category');

// developer.log + error
developer.log(
  'log me',
  name: 'my.app.category',
  error: jsonEncode(myCustomObject),
);

参考: Debugging Flutter apps programmatically - Flutter
参考: Flutter で print 出力を得たい - Qiita

Widgetのツリー構造を確認したい

Dev ToolのWidget Inspectionを使う。
AndroidのLayout Inspectorみたいなやつ。

Dev Tool

参考: Debugging Flutter apps - Flutter

HotReloadが効かない(buildしても再生成されない書き方をしてた)

buildしても再生成されない書き方をしてた...

だめな例。

class _PageState extends State<Page> {
  Widget _widget = Text("aaaa"); // ←だめなところ

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _widget,
    );
  }
}

良い例。

class _PageState extends State<Page> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text("aaaa"),
    );
  }
}
追記

つぶやいたら、monoさんから詳細を教えてもらえた(´ω｀)
一連のリプの解説にもある通り、constをつけないと、キャッシュが使われるようHot Reloadが効かないよう。

公式ドキュメントではここ(Hot reload - Flutter)に、monoさんの別の記事でも解説されている。

フォーマッターでいい感じに整形されない

末尾のコンマをつけていないので、いい感じにならないっぽい。
参考記事をみると「末尾コンマは大事」と書いてあった。

Dartの末尾コンマは大事
Dartの末尾コンマはその有無によってdartfmt結果が変わったりします。
Using trailing commasに以下の図とともに説明されているように、
基本的には末尾に ”,” を入れた方がきれいかつ横幅もコンパクトに整形されます。

参考: Flutterでの開発をスムーズに行うためのTips集 - Flutter 🇯🇵 - Medium

おわりに

以下の記事、IDEの機能の紹介やリファクタのTipsもたくさんあるので、
開発前に以下の記事に目を通すとだいぶ楽になる。。
- Flutterでの開発をスムーズに行うためのTips集 - Flutter 🇯🇵 - Medium

やっと、UIができた感じなので、すこしずつ作っていく。
また進んだら、「その2」を調べたところをまとめていく予定〜

こんなのつくってます!!

積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪