虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

Flutter関連

Flutterで下タブを実装する

Flutterで下タブを実装する方法 下記の方法でいける class _MyHomePageState extends State<MyHomePage> { int _currentIndex = 0; final List<Widget> _children = [ Center(child: Text("ホーム")), Center(child: Text("メール")), ]; @override Widget build(BuildContext co</widget></myhomepage>…

Flutterで上タブを実装する

上タブの実装する方法は下記です。 下記の実装でいけた。 class _HomeState extends State<Home> with SingleTickerProviderStateMixin { TabController _tabController; List<Widget> _tabs = [ const Tab( child: Text("男性"), ), const Tab( child: Text("女性"), ) ];</widget></home>…

Flutterでよくあるマテリアルリストを作る

上のようなレイアウトを作る方法について書きます return ListView.builder( itemCount: 1, itemBuilder: (context, index) { return Container( margin: const EdgeInsets.only(top: 10), child: ListTile( title: Text("テスト2"), leading: Material( ch…

FlutterでContainerを角丸にする

上記のようなボタンを生成しているコードはこちら Container(decoration: new BoxDecoration(color: Colors.green, borderRadius: new BorderRadius.all(const Radius.circular(20)), ), child: Row(mainAxisAlignment: MainAxisAlignment.center, children: …

Cloud Functionsからアプリに結果をJsonで返す。

アプリから直接onCallメソッドを使ってCloud Functionsを呼び出した時に結果をアプリにjsonで返す方法について書きます。 アプリからCloud Functionsを直接呼び出す方法については下記をご覧ください www.shogogeek.com 実装 jsonを返す const batch = fires…

FlutterでRadioButtonを出す

こんなやつを出す方法は下記です。 int _value1 = 0; void _setvalue1(int value) => setState(() => _value1 = value); Row(mainAxisAlignment: MainAxisAlignment.center, children: < Widget > [ new Radio(value: 0, groupValue: _value1, onChanged: _s…

FlutterでOutlineButtonの色を変更する

ボタンの色を変える方法が少し違ったので書きます。 Row(children: < Widget > [ ButtonTheme(minWidth: 50, buttonColor: Colors.red, child: OutlineButton(color: Colors.red, onPressed: () {}, child: Text("×", style: const TextStyle(color: Colors.…

Flutterでボタンのサイズを変更する

Flutterのボタンのサイズは下記の方法で実装できた。 Row(children: < Widget > [ ButtonTheme(minWidth: 50, child: OutlineButton( onPressed: () {}, child: Text("×"), )), SizedBox(width: 5, ), ButtonTheme(minWidth: 50, child: OutlineButton(onPre…

Flutterから直接Cloud Functionsを呼び出す

Flutterから直接Cloud Functionsを呼び出す方法について書きます。 プラグインをいれる 下記のプラグインを導入します。 pub.dartlang.org 実装 実装もJavaScriptで使う方法とほぼ似ています。 Flutter側 Future<String> requestFriend( String groupId, String uid,</string>…

FlutterからCloud Vision APIを叩く

FlutterからCloud Vision APIを叩く FlutterからCloud Vision APIを叩く方法について書きます。 すでにAPIキーは取得したものとして書きます 詳しいセットアップ方法は下記のどうぞ cloud.google.com 実装 _requestCloudVision(File cameraImage) async { St…

FlutterでLottieを使う

FlutterでLottieを使う Lottieを使うためのプラグインは二つあります。 pub.dartlang.org pub.dartlang.org このふたつの実装を読んでいると、fluttieはJavaかobjective-cのコードを内部的に呼んでるだけですが、lottie_flutterはDartのコード自身で動いてる…

Flutterで角丸ダイアログを出す

Flutterで角丸ダイアログを出す こんな面白いダイアログ出せた。お友達申請と登録できる機能つけます pic.twitter.com/Q8flZWrrpM— shogo.yamada@Flutterマン (@yshogo87) January 28, 2019 こんなダイアログを出す方法は下記でいけました。 _showUserAlertD…

FlutterでFloatingActionボタンの大きさを変更する

FlutterでFloatingActionボタンの大きさを変更する 大きさを変更することもできる loatingActionButton: Container( margin: const EdgeInsets.only(bottom: 20), height: 100.0, width: 100.0, child: FittedBox( child: FloatingActionButton(onPressed: (…

FlutterのBLoCアーキテクチャを実装する

FlutterのBLoCアーキテクチャを実装する Flutterで有名なBLoCアーキテクチャの実装方法について紹介します。 BLoCとは BLoCとはGoogleが推奨しているアーキテクチャになります。 詳しくは下記をご覧ください www.shogogeek.com こちらもすごく参考になるきじ…

FlutterでFacebookや、YouTubeみたいなかっこいいプログレスを出す

FlutterでFacebookや、YouTubeみたいなかっこいいプログレスを出す この記事はFlutter #2 Advent Calendar 2018 6日目の記事になります。 どうなプログレスかというとこんなやつです。 Flutterでデータの読み込み中レイアウトを作ってぞーFacebookや、YouTub…

Flutter Liveで発表されたことまとめ

Flutter Liveで発表されたことまとめ 自分が寝ている間にFlutter Liveが終わり、今ささっと、情報収拾したのでまとめます。 Flutter Live発表されたことは5点で概要は下記のツイートをご覧ください。 Flutter Liveで発表されたこと・Flutter 1.0の発表・Squ…

Flutterの好きなところを語る

Flutterの好きなところを語る この記事はFlutter Advent Calendar 2018 5日目のものになります。 自分はFlutterで開発を初めて半年経ちFlutterの虜になってしまっています。 そんな自分がFlutterの好きなところを語ってみたいと思います。 Flutterは開発スピ…

Flutter製アプリ「GroupAlbum」で使ってるプラグイン全部晒します!!!!

Flutter製アプリ「GroupAlbum」で使ってるプラグイン全部晒します!!!! この記事はFlutter Advent Calendar 2018 4日目 になります。 年末だし、せっかくなので今現在作ってるFlutter製アプリ「GroupAlbum」で使ってるプラグインを全部書きます。 使って…

Flutterで画像を複数選択する

Flutterで画像を複数選択する この記事はFlutter #2 Advent Calendar 2018 4日目のものになります。 Flutterで画像を複数選択できるプラグインがあったので使ってみた!これでSwiftとKotlinコードを削除して、全部Dartでいけるぞ!!実装方法については明日…

Flutterができるようになるためにやったことまとめ

Flutterができるようになるためにやったことまとめ これはFlutter Advent Calendar 2018 2日目の記事になります。 Flutterを初めて半年ほどたち、自分でFlutterのアプリをリリースしたのである程度できるようになったと言えると思います。 www.shogogeek.com…

FlutterからSwift Kotlinコードを呼ぶ

FlutterからSwift Kotlinコードを呼ぶ 結構簡単に実装できます。 まずはFlutter側の実装 callNativeComponent(String groupId) async { MethodChannel callNativeViewChannel = const MethodChannel("jp.groupsnap/CreateGroupDetail"); try { await callNat…

Flutterアプリが一覧でみれるサイト

Flutterアプリが一覧でみれるサイト Flutterで作られたアプリを一覧で見れるサイトがあります。 サイトはこちら itsallwidgets.com Twitterアカウントはこちら twitter.com いろんなアプリがあって、どれもダウンロードできるのでFlutterでできるレイアウト…

12月4日はFlutter Live !!!

12月4日はFlutter Live !!! 12月4日にFlutter Liveが開催されます。 developers.google.com すでにYouTubeの生放送にも予約されています。 www.youtube.com 何かしら発表はある? 楽しみ12月4日に何かしらの発表があるはず pic.twitter.com/Qqm0t3Ohpy— shog…

現時点でFlutterで広告ビジネスをやるのは向いてないかもしれない

現時点でFlutterで広告ビジネスをやるのは向いてないかもしれない Flutterを使うなら広告ビジネスにはげ時点では全然向いてないっぽい。なぜなら広告を出せるSDKはAdMobしかなくて、しかもAdmobも表示位置がスマホの一番下か上しか出せない。Listに紛れて広…

FlutterでFirebase Storageに画像をアップロードしてダウンロードURLを取得する

FlutterでFirebase Storageに画像をアップロードしてダウンロードURLを取得する FlutterとFirebaseの接続方法についてはこちらをご覧ください。 www.shogogeek.com 準備 pubspec.ymlを編集します。 dependencies: flutter: sdk: flutter firebase_storage: ^…

Flutterでサインイン、サインアップをFirebase Authを使って実装する

Flutterでサインイン、サインアップをFirebase Authを使って実装する Firebase Authを使ったメールアドレスとパスワードを使った認証機能の実装について書きます。 FirebaseとFlutterの接続方法については下記の記事をご覧ください。 www.shogogeek.com 準備…

Flutterでスライドで画像を切り替える

Flutterでスライドで画像を切り替える Flutterで画像の切り替えについて説明します。 特にプラグインなどは使いません。 アプリのチューリアルの画像差し替えました pic.twitter.com/jPy1FXSAxD— shogo.yamada@Flutterマン (@yshogo87) 2018年11月26日 実装 …

Flutterでデスクトップアプリを作れる??

Flutterでデスクトップアプリを作れる?? GoogleのFlutterプロジェクトの一つにデスクトップでFlutterを動かすプロジェクトがあります。 まず、GithubプロジェクトがGoogleのリポジトリの中にあります。 github.com 解説記事は下記になります。 medium.com …

FlutterでローカルDBを使う

FlutterでローカルDBを使う FlutterでローカルDBを使う方法について説明します。 導入 今回導入するプラグインはこちら pub.dartlang.org pubspec.ymlを編集します。 dependencies: flutter: sdk: flutter sqflite: ^0.12.2 書いたら下記のコマンドを実行し…

FlutterでTextFieldにテキストを入力してたらクラッシュする

FlutterでTextFieldにテキストを入力してたらクラッシュする 今日起こったこと。 Flutterのチャット画面で文字入力しまくったらクラッシュする、、、エラーもなにもでないので、どうやって解析したらいいかわからん。— shogo.yamada@Flutterマン (@yshogo87)…