DEV Community

kyorohiro (kiyohiro kawamura)
kyorohiro (kiyohiro kawamura)

Posted on

Dart x Flutter MokuMoku Live Coding 26/09/2020

I 'm makeing something with Dart and Flutter while doing live coding on 19/09/2020 now

  • not performance coding , not speed coding

Live Coding Address

https://youtu.be/AROnmhqagew

[delete]
folloinw link is deleted
https://youtu.be/nSNKBmNWBVs

Code

https://github.com/kyorohiro/mokumoku03

What is mokumoku

For the time being, people who are interested in a certain theme gather and do their own work. Just that.

# What is making

Image uploader at dart x flutter x firebase

Event Page For JP

https://8beat-mokumoku-2020.connpass.com/event/188590/

History

  • Dart x Flutter MokuMoku Live Stream 05/09/2020

https://dev.to/kyorohiro/dart-x-flutter-mokumoku-live-stream-2020-09-05-30oa

  • Dart x Flutter MokuMoku Live Stream 12/09/2020

https://dev.to/kyorohiro/todo-dart-x-flutter-mokumoku-live-coding-12-09-2020-bbm

  • Dart x Flutter MokuMoku Live Stream 19/09/2020

https://dev.to/kyorohiro/dart-x-flutter-mokumoku-live-coding-19-09-2020-iec

  • Dart x Flutter MokuMoku Live Stream 26/09/2020

now!!

Result

Alt Text

Alt Text

TODO

  • Recreate Dynamic Grid View
  • Upload Image then display this
  • Upload things other than images
  • Something Animation

Reflection

Hmmm, it's an image uploader, so it should be light
Because it doesn't end

Carry over to next time ..
Hmm

However, I wonder if the feeling of developing with Flutter and Dart will gradually return.

I want to continue until I can write code at 3x speed

know-how

Discussion (6)

Collapse
kyorohiro profile image
kyorohiro (kiyohiro kawamura) Author

following code is ok

 fb.firestore().collection("users/${fb.auth().currentUser.uid}/files").orderBy("name").limit(5); 

but followinc code is ng

var x = fb.firestore().collection("users/${fb.auth().currentUser.uid}/files")
x = x.orderBy("name");
x = x.limit(5);
Collapse
kyorohiro profile image
kyorohiro (kiyohiro kawamura) Author • Edited on

Failed to download a file from firebase storage at flutter for web

cors.json

[
    {
      "origin": ["*"],
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
]

cors.sh

#!/bin/sh

gsutil cors set cors.json gs://mokumoku00003.appspot.com

ref
firebase.google.com/docs/storage/w...

Collapse
kyorohiro profile image
kyorohiro (kiyohiro kawamura) Author • Edited on

Firebase
give a user permission to the user directory

stackoverflow.com/questions/636040...

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{uid}/{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

PS
this is wrong

Collapse
kyorohiro profile image
kyorohiro (kiyohiro kawamura) Author • Edited on

Firebase Storage Rule

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{uid}/{allPaths=**} {
      allow read, write: if request.auth.uid == uid;
    }
  }
}

Firebase Store Rule

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{uid}/{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

[ref]
medium.com/@khreniak/cloud-firesto...

Collapse
kyorohiro profile image
kyorohiro (kiyohiro kawamura) Author • Edited on

File Input From Web

fileinput.dart

abstract class FileInputData{
  Future<List<int>> getBinaryData(); 
}

abstract class FileInput {
  Future<List<FileInputData>> getFiles();
}

abstract class FileInputBuilder {
  FileInput create();
}

fileinput_web.dart

import 'dart:html' as html;
import 'dart:typed_data';
import './fileinput.dart';
import 'dart:async';

class FileInputDataWeb extends FileInputData {
  html.File file;
  FileInputDataWeb(this.file);
  Future<List<int>> getBinaryData() async {
    Completer completer = new Completer<List<int>>();
    html.FileReader reader = new html.FileReader();
    reader.onLoad.listen((event) {
      completer.complete(reader.result);
    });
    reader.onError.listen((event) {
      completer.completeError(event);
    });
    reader.readAsArrayBuffer(this.file);
    return completer.future;
  }
}

class FileInputBuilderWeb extends FileInputBuilder{  
  FileInput create() {
    return FileInputWeb();
  }
}

class FileInputWeb implements FileInput { 
  @override
  Future<List<FileInputData>> getFiles(){
    print("..");
    var completr = Completer<List<FileInputData>>();
    try {
      html.InputElement elm =  html.document.createElement('input');
      elm.type = 'file';
      elm.onChange.listen((event) {
        print("onchange 1");
        var data = <FileInputData>[];
        for(var f in elm.files){
          // todo
          data.add(FileInputDataWeb(f));
        }
        completr.complete(data);
      });
      elm.onAbort.listen((event) {
        print("abort");
      });
      elm.click();
    } catch(e) {

      print("anything wrong ${3}");
      completr.completeError(e);
    }
    return completr.future;
  }
}


var inputFile = FileInputBuilderWeb().create();

Collapse
kyorohiro profile image
kyorohiro (kiyohiro kawamura) Author

Random uuid 1?

import 'dart:math' as math;

class Uuid 
{
  static math.Random _random = new math.Random();
  static String createUUID() {
    return s4()+s4()+"-"+s4()+"-"+s4()+"-"+s4()+"-"+s4()+s4()+s4();
  }
  static String s4() {
    return (_random.nextInt(0xFFFF)+0x10000).toRadixString(16).substring(0,4);
  }
}