虎視眈々と

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

Retoryのプライバシーポリシー

画像/メディア/ファイル

投稿した画像はクラウドサービスに保存するために使用します。保存先は「Firebase Storage」です

Firebase storageはこちら→ https://www.firebase.com/terms/privacy-policy.html

その他(ネットワーク接続の表示で使用します)

クラウドからデータを取得や送信するために使用します

不適切なコンテンツに関して

不適切なコンテンツに関してはユーザーからの通報から管理者が確認し、不適切と判断した場合はデータを削除、ユーザーの削除を行います。

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

なぜか現時点(2019/6/21)で Firebase StorageのFlutterプラグインの画面にサンプルコードが載っていないのでサンプルコードを載せておきます。

pub.dev

Firebaseの設定などは済ましてある前提です。

    String storageUrl = "ストレージURL";
    FirebaseStorage storage =
    new FirebaseStorage(storageBucket: storageUrl);
    final StorageReference ref =
    storage.ref().child("user_icon").child(uid + ".png");
    StorageUploadTask task = ref.putFile(image);
    return await (await task.onComplete).ref.getDownloadURL();

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

上のツイートのようなもりもりにカスタマイズできます。

        child: Center(
          child: Container(
            margin: const EdgeInsets.only(left: 10, right: 10),
            child: Theme(
              data: new ThemeData(
                primaryColor: Colors.redAccent,
                primaryColorDark: Colors.red,
              ),
              child: TextField(
                decoration: InputDecoration(
                    border: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.teal)),
                    hintText: 'Tell us about yourself',
                    helperText: 'Keep it short, this is just a demo.',
                    labelText: 'Life story',
                    prefixIcon: const Icon(
                      Icons.phone_iphone,
                      color: Colors.green,
                    ),
                    prefixText: ' ',
                    suffixText: "USD",
                    suffixStyle: const TextStyle(color: Colors.green)),
              ),
            ),
          ),
        )

UICollectionView.reloadData() must be used from main thread onlyがでたとき

f:id:superman199323:20190525100213p:plain

どうやらSwiftでreloadDataするときはメインスレッドでやらないといけないらしい

対処法は下記でいけた

DispatchQueue.main.async {
     self.collctionView.reloadData()
}

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: Text('Hello world'),
            backgroundColor: Colors.transparent, //No more green
            elevation: 0.0, //Shadow gone
          ),),
        ], )

Findalizmプライバシーポリシー

画像/メディア/ファイル

投稿した画像はクラウドサービスに保存するために使用します。保存先は「Firebase Storage」です

Fibrease storageはこちら→ Privacy Policy - Firebase

カメラ(画像)

写真の撮影・プレビューに利用します 撮影された画像はグループ内で共有するために使用します その他(ネットワーク接続の表示で使用します) クラウドからデータを取得や送信するために使用します

不適切なコンテンツに関して

不適切なコンテンツに関してはユーザーからの通報から管理者が確認し、不適切と判断した場合はデータを削除、ユーザーの削除を行います。

データの保存先について

データはFirebaseに保存します。プライバシーポシーは こちら

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

作っている様子はこちら

youtu.be

最終的にできたコードはこちら

gist.github.com

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

作っている様子は下記の動画をご覧ください

youtu.be

最終的に書いたコードはこちら

gist.github.com

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

実際に作ってる様子はこちら

youtu.be

最終的にできたコードはこちら

gist.github.com

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

作ってる様子はこちら

youtu.be

最終的にできたコードはこちら

gist.github.com

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

作っている様子はこちら

youtu.be

最終的にできたコードはこちら

gist.github.com

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

f:id:superman199323:20190407213622p:plain

下記の方法でいけた

FlatButton(
     onPressed: () {},
     child: Container(
         width: double.infinity,
         child: const Text(
              "もっとみる",
              textAlign: TextAlign.right,
         ),
       ),
),

Flutterでバリデーションする

上の記事に書きてるようなバリデーション方法のやり方を載せておく

class _EditProfileState extends State<EditProfile> {

  final _nameInputController = TextEditingController();
  final _intoroductionInputController = TextEditingController();

  final _formKey = GlobalKey<FormState>();


  @override
  void initState() {
    super.initState();
    _initSet();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Edit Profile"),
        actions: <Widget>[
          StreamBuilder<bool>(
            stream: null,
            builder: (_, snapshot) {
              if (!snapshot.hasData || !snapshot.data) {
                return FlatButton(
                  onPressed: () {
                    _formKey.currentState.validate();
                  },
                  child: const Text(
                    "Done",
                    style: const TextStyle(color: Colors.blue),
                  ),
                );
              }
              return CupertinoActivityIndicator();
            },
          )
        ],
      ),
      body: Form(
        key: _formKey,
        child: CustomScrollView(
              slivers: <Widget>[
                _profileImage(user),
                _buildProfileSetting(
                  "名前",
                  rightLayout: Flexible(
                    child: TextFormField(
                      controller: _nameInputController,
                      validator: (value) {
                        if (value.isEmpty) {
                          return 'Not allow empty text';
                        }
                      },
                      decoration: InputDecoration(
                        border: UnderlineInputBorder(),
                        labelText: "UserName",
                      ),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }

詳しくはこちら

flutter.dev

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

まずは下記のプラグインを導入します。

pub.dartlang.org

同時にFirebaseとFlutterの接続も忘れずに、

設定方法は下記をご覧ください。

firebase.google.com

Future<String> saveUserProfileImage(File image) async {
    final StorageReference firebaseStorageRef =
        FirebaseStorage.instance.ref().child("image.jpg");
    final StorageUploadTask task = firebaseStorageRef.putFile(image);
    StorageTaskSnapshot storageTaskSnapshot = await task.onComplete;
    return storageTaskSnapshot.ref.getDownloadURL();
  }

そしてこのメソッドを async/await で取得すればダウンロードURLが取得できます。

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

上のようないわゆるよくあるボタンである。

出し方は下記のプラグインを導入する

pub.dartlang.org

実装はこんな感じ。一行書くだけ

Widget _loginLayout() {
    return Container(
      color: Colors.black.withOpacity(0.3),
      child: Center(
        child: GoogleSignInButton(
          onPressed: () {},
        ),
      ),
    );
  }