虎視眈々と

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

Firebase

FlutterでFirebase Storageに画像をアップロードする

Firebase StorageのFlutterプラグイン、READMEにサンプルコードかかれてないんか、、、 pic.twitter.com/HydEW5aTcJ— shogo.yamada@Flutterマン (@yshogo87) June 21, 2019 なぜか現時点(2019/6/21)で Firebase StorageのFlutterプラグインの画面にサンプル…

FlutterでTextFieldをカスタマイズする

FlutterでおしゃれなTextForm作れた pic.twitter.com/svGBJjV6N5— shogo.yamada@Flutterマン (@yshogo87) June 8, 2019 上のツイートのようなもりもりにカスタマイズできます。 child: Center( child: Container( margin: const EdgeInsets.only(left: 10, r…

FlutterでAppBarの背景色を透明にする

下記の方法で行けた body: Stack( children: <Widget>[ Container( //My container or any other widget color: Colors.blue, ), new Positioned( //Place it at the top, and not use the entire screen top: 0.0, left: 0.0, right: 0.0, child: AppBar(title: Tex</widget>…

FlutterでYouTubeアプリのUIを作ってみる

作っている様子は下記の動画をご覧ください youtu.be 最終的に書いたコードはこちら gist.github.com (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

FlutterでGmailアプリのUIを作ってみる

作っている様子はこちら youtu.be 最終的にできたコードはこちら gist.github.com (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

FlutterでGmailアプリのUIを作ってみる

実際に作ってる様子はこちら youtu.be 最終的にできたコードはこちら gist.github.com (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

Flutterで旅行アプリのUIを作ってみる

作ってる様子はこちら youtu.be 最終的にできたコードはこちら gist.github.com (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

FlutterでTED アプリのUIを作ってみる

作っている様子はこちら youtu.be 最終的にできたコードはこちら gist.github.com (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

Flutterでボタンのテキストを右寄せにする

下記の方法でいけた FlatButton( onPressed: () {}, child: Container( width: double.infinity, child: const Text( "もっとみる", textAlign: TextAlign.right, ), ), ), (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsby…

Flutterでバリデーションする

Flutter validationの実装も簡単でいいなー。自前でゴリゴリ書く必要ない。 pic.twitter.com/mtYQKakD3p— shogo.yamada@Flutterマン (@yshogo87) March 30, 2019 上の記事に書きてるようなバリデーション方法のやり方を載せておく class _EditProfileState e…

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

まずは下記のプラグインを導入します。 pub.dartlang.org 同時にFirebaseとFlutterの接続も忘れずに、 設定方法は下記をご覧ください。 firebase.google.com Future<String> saveUserProfileImage(File image) async { final StorageReference firebaseStorageRef = </string>…

Flutterでグーグルサインインボタンを出す

Flutterでグーグルサインインボタン簡単に出せた。 pic.twitter.com/lMPAY6aAKm— shogo.yamada@Flutterマン (@yshogo87) March 24, 2019 上のようないわゆるよくあるボタンである。 出し方は下記のプラグインを導入する pub.dartlang.org 実装はこんな感じ。…

Firebase Cloud FunctionsでJsonを返す

Cloud FunctionsからJsonを返す方法 下の実装では別のAPIを叩いて受け取った結果をjsonにして返却している。 const functions = require('firebase-functions'); const request = require('request'); exports.onBooksGenre = functions.https.onRequest((re…

FlutterでのAppBar3選

FlutterのAppbarについて3つ動画にして紹介しました。 www.youtube.com (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

FlutterとFirebase Authを使ってメールアドレス認証をする

FirebaseとFlutterの接続方法は下記 firebase.google.com 下記のプラグインを導入 pub.dartlang.org 導入したら下記のコードでログインできる Future<FirebaseUser> _handleSignUp(String email, String password) async { final FirebaseAuth _auth = FirebaseAuth.instan</firebaseuser>…

FlutterでBottom Sheetを出す

FlutterのBottom Sheet pic.twitter.com/8yh2csgrPA— shogo.yamada@Flutterマン (@yshogo87) March 10, 2019 下記の方法で行けた _showUserInfo(User user, BuildContext context) { showModalBottomSheet( context: context, builder: (_) { return Contain…

Flutterでドロワーを出す

drawer: Drawer() っていう一行でドロワーが出せるようになるFlutterすごすぎないか、、、しかも、iOS、Android両方動くって、、、爆速でアプリ作れる。 pic.twitter.com/96eHeCCvV1— shogo.yamada@Flutterマン (@yshogo87) March 5, 2019 ドロワーを出すだ…

FlutterでBLoCのテストを書く

FlutterでBLoCのテストを書く方法について BLoCって何?って方は下記の記事をご参照ください。 www.shogogeek.com BLoCクラス まずはBlocクラス class HomeBloc { final UserRepositoryInterface userRepository; HomeBloc({ @required this.userRepository,…

FlutterにFirebase Crashlyticsを導入する (Android編)

FlutterにFirebase プロジェクトを追加 下記の手順で導入しましょう。 firebase.google.com gradleを編集 android/build.gradle に下記を追加 buildscript { ext.kotlin_version = '1.3.20' repositories { google() jcenter() // ↓追加 maven { url 'https:…

FlutterでCrashlyticsが動かない時

FlutterでFirebase Crashlyticsがビルドエラーになって動かなかったが下記の方法で解決した。 android/gradle/gradle-wrapper.properties に下記を追加すると直る。 #Sat Mar 02 00:07:33 JST 2019 distributionBase=GRADLE_USER_HOME distributionPath=wrap…

Firebaseのコンソールでユーザーを招待する

ユーザーの招待は下記の方法でできる。 コンソールに移動 ↓ 下記のボタンをタップ そこから「ユーザーと権限」ボタンをタップすればできる。 (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoogle = window.adsbygoogle || []).push({});

Flutter(Dart)でシングルトン

class AnalyticsUtil { static FirebaseAnalytics _analytics; static FirebaseAnalytics getInstance() { if (_analytics == null) { return FirebaseAnalytics(); } return _analytics; } } (adsbygoogle = window.adsbygoogle || []).push({}); (adsbygoo…

FlutterでSnackBarを出す

SnackBarとはしたみたいなやつです。 flutter.dev 自分は下の方法でできた。 final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>(); void _showInSnackBar(String value) { _scaffoldKey.currentState .showSnackBar(new SnackBar(content: new Text(value))); }</scaffoldstate></scaffoldstate>…

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.…