Zenn
😺

[Flutter]知っていると得する書き方3つ[resizeToAvoidBottomInset,GestureDetectorなど]

2021/08/27に公開
Flutter
iOS
初心者
Dart
tech

初めまして、いもりん(@imorin_basson)です。

今回は私が初めてのアプリ開発の際用いた、知っているとお得だなと感じた書き方を３つご紹介します。

どんなアプリを作ったの？

書き方の紹介の前に宣伝がてらリリースしたアプリを紹介させていただきます。
私が作ったアプリは「QRコード読み取り・作成アプリ」です。

https://apps.apple.com/us/app/qrコード読み取り-作成アプリ/id1569144582?itsct=apps_box_link&itscg=30200

その名の通りのアプリですが、一応機能について書き出すと、

  • カメラでQRコードとバーコードを読み取る機能
  • スマホのアルバムの中からQRコード画像を選択して読み取る機能
  • オリジナルのQRコードを作成する機能
  • 読み取ったデータを履歴として保存して閲覧できる機能

大きく4つの機能があります。
簡単なアプリでありきたりだと思われるかもしれませんが、初めて作った習作ということで暖かい目（？）でみてください。
また本記事で紹介している書き方の参考資料になると思うので、興味があればダウンロードしていただけると非常に嬉しいです。よろしくお願いします。

①resizeToAvoidBottomInset

一つ目はresizeToAvoidBottomInsetです。

簡単に説明すると、Widgetとbodyの重なりを防ぐためのものです。
下の写真のようにFlutterアプリ内でキーボードを使う際、ページにFloatingActionButtonがある状態でそのまま開くとFloatingActionButtonがキーボードの上に来てしまい見栄えも使い勝手も悪くなってしまいます。

下に設置されているFloatingActionButtonが


キーボードの上に来てしまう！

そこで以下のようにresizeToAvoidBottomInsetを加えると

return Scaffold(
  resizeToAvoidBottomInset: false,
  appBar: CupertinoNavigationBar(

このようにキーボードの上に出なくなります！

②GestureDetector

キーボード繋がりでGestureDetectorを紹介します。

こちらも簡単に説明すると画面をタッチしたりボタンを入力した際にその操作・入力を検出するものです。

アプリの中では以下のように書くことでキーボードを閉じたい時に閉じやすくする仕組みとして用いています。

body: GestureDetector(
  onTap: () {
      FocusScope.of(context).requestFocus(new FocusNode());
    },
    child: Scrollbar(

③Uri.encodeFull();

最後にurl_launcherというパッケージを使用する際に知っておくと便利なUri.encodeFull();について紹介します。

url_launcherとはURLを起動するために用いる人気パッケージです。

アプリの中では様々なURLを読み込む都合上URL内にひらがなや漢字などの日本語が入り込んでしまうため、URLをエンコードしてあげる必要が出てきます。

以下のように書くことで文字列をエンコードし、canLaunch()がfalseを返すことなくURLを起動することができます。

static String url = 'https://ja.m.wikipedia.org/wiki/ファゴット';
//日本語が含まれるURL

String _encode = Uri.encodeFull(url);
if (await canLaunch(_encode)) {
  await launch(_encode);
}

最後に

ここまで読んでくださいありがとうございました。以上で知っていると得する書き方3つの紹介を終わります。

今後もFlutterやアプリ開発に関する記事や、他のプログラミング言語に関して書いていきますので、この記事がよかったと思いましたらぜひいいねとフォローをよろしくお願いします。

また質問やご意見などございましたらぜひDiscussionやTwitterにてコメントいただけるとありがたいです。

Discussion