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

Last updated at 2019-11-05Posted at 2019-11-03

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

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

とりあえず、ボタンを押すと、
上の絵が変わるところまでできた(*´ω｀*) pic.twitter.com/Ty8npyo3eO
— 積読ハウマッチ📚きらぷか (@kira_puka) November 3, 2019

以下の記事の続き的な内容。

背景画像をつけたい

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みたいなやつ。

参考: 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が効かないよう。

WidgetのキャッシュとHot Reloadが効くか否かの関係はこんな感じ(　´･‿･｀)https://t.co/fjG2ropgXs https://t.co/H4PUhW3v3u pic.twitter.com/kqqBFFvOt1
— mono 🎯 @自宅 (@_mono) November 3, 2019