くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Google SignInボタンを画像を使って作成する

以下のガイドラインにあるファイルを使って、 Google SignInボタンを実装したときの備忘録。 ログインにおけるブランドの取り扱いガイドライン | Google Identity Platform | Google Developers background-imageを使って画像を設定し、 疑似要素を使って画…

FlutterでListViewのPull To Refreshをつかう

リストを引っ張って更新するPull To Refreshは、 ListView+RefreshIndicatorでできるっぽい。 @override Widget build(BuildContext context, WidgetRef ref) { return RefreshIndicator( onRefresh: () => _refresh(), child: ListView( children: <Widget>[ // ..</widget>…

Node.jsでローカルのIPアドレスを取得する(node-ip)

Nuxtみたいに、Expressの起動時に、 ローカルのIPアドレスを表示したいなと思い、 いろいろ調べたときの備忘録。 ℹ Listening on: http://192.168.11.6:3000/ IP(node-ip)という、Node.js用のIPアドレスのユーティリティがあるらしい。 ・indutny/node-ip: I…

Flutterのfreezedパッケージでimmutableなオブジェクトを楽に扱う

Flutterのfreezedパッケージを調べたときの備忘録。 freezedとは Dartでデータクラスのような機能を提供するパッケージ。 コンストラクタだけのシンプルなモデル定義 オブジェクトをクローンできるcopyWithメソッド union-types/pattern matching 自動的なse…

FlutterでQRコードを表示する(qr_flutter)

FlutterでQRコードを表示したいなと思ったときに、 いろいろ調べたときの備忘録。 qr_flutterというライブラリを使えばOK。 ・qr_flutter | Flutter Package インストール $ flutter pub add qr_flutter $ flutter pub get 使い方 使い方はシンプルでこんな…

Flutterで画面の向きを固定する

小ネタ。画面の向きを固定したいときは、 SystemChrome.setPreferredOrientations()を使えばOK。 import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; Future<void> main() async { // Flutter Engineの機能を使うので有効化 Widget</void>…

Vue/TypeScriptでGoogle API Client Library for JavaScriptをつかう

Nuxtで開発しているWebサービスで、 Google API Client Library for JavaScriptを使いたいなと思ったら、 意外とハマったので、その時の備忘録。 Google API ClientのNode.js版(googleapis)は、 npmでインストールできるけど、 ブラウザ版はCDNなので、いろ…

FlutterのAppBarをカスタマイズする

背景色を変える AppBarのbackgroundColorで指定。 class MyAppBar extends StatelessWidget implements PreferredSizeWidget { const MyAppBar({Key? key}) : super(key: key); @override Size get preferredSize => const Size.fromHeight(kToolbarHeight);…

Flutterでキーボードを表示時にオーバーフローするときの対処法

Flutterでキーボードを表示したときに、 BOTTOM OVERFLOWED BY 11 PIXELS と黒と黄色の背景で警告された。。 Scaffoldをつかっているとき、キーボードを表示すると、 自動的に高さを調整してくれるらしい。 ・resizeToAvoidBottomInset property - Scaffold …

FlutterのUI分割は、個別のWidgetクラスでするといいらしい

Flutterではbuild()のネストが深くなり、見づらくなる。 Widgetをどうやって分割するのがいいのか調べていたときの備忘録。 @_monoさんのツイートにあるとおり、 Widgetクラスを使うのが良さそう。 Widget分割をWidgetクラス・メソッドのどちらでするかの回…